HTML
   HTML5
   CSS
   CSS3
   JavaScript
   jQuery
   AngularJS
   Articles
   Tech Articles
   Blog
Google News
logo
AngularJS Interview Questions
1 .
What is AngularJS ?
Angular JS is an JavaScript-based open-source front-end web application framework mainly maintained by Google. AngularJS is based on the MVC pattern (Model View Control), it's mainly used in Single Page Application (SPA) projects.
2 .
Name the key features of AngularJS ?
The key features of AngularJS are:

MVC
Validations
Modules
Directives
Templates
Scope
Expressions
Data Binding
Filters
Services
Routing
Dependency Injection
Testing
and more...
3 .
What are directives in AngularJS ?
A core feature of AngularJS, directives are attributes that allow you to invent new HTML syntax, specific to your application.

The different types of directives are :

Element directives
Attribute directives
CSS class directives
Comment directives
4 .
What are the controllers in AngularJS ?
Controllers are JavaScript functions that are bound to a particular scope. They are the prime actors in AngularJS framework and carry functions to operate on data and 

decide which view is to be updated to show the updated model based data.
5 .
What are the services in AngularJS ?
AngularJS come with several built-in services. For example $https: service is used to make XMLHttpRequests (Ajax calls). Services are singleton objects which are instantiated only once in app.
6 .
What are the filters in AngularJS ?
Filters select a subset of items from an array and return a new array. Filters are used to show filtered items from a list of items based on defined criteria.
7 .
Explain directives in AngularJS.
Directives are markers on DOM elements (such as elements, attributes, css, and more). These can be used to create custom HTML tags that serve as new, custom widgets. 

AngularJS has built-in directives (ng-bind, ng-model, etc)
8 .
What is MVC ?
In the MVC pattern, the different aspects of the application are broken into components to separate responsibilities. The Model contains the data and logic, the View contains the visual layout and presentation is following :

Model : It is the lowest level of the pattern responsible for maintaining data.

View : It is responsible for displaying all or a portion of the data to the user.

Controller : It is a software Code that controls the interactions between the Model and View.

9 .
Explain ng-app directive.
ng-app directive defines and links an AngularJS application to HTML. It also indicate the start of the application.

<body ng-app ="app_name">
  //some content.....
</body>

10 .
What are expressions in AngularJS ?
Expressions are the code snippets that resolves to a value. AngularJS expressions are placed inside {{expression}}. 

For example :
{{9+18}}  

AngularJS supports one-time binding expressions.
11 .
What are AndularJS Directives ?
Andularjs directives are used to extend the functionality of HTML.  Most of the directives in AngularJS are starting with  ng-  where ng stands for Angular.

The most common angularjs directives are Following :

ng-app : This directive starts an AngularJS Application.
ng-init : This directive initializes application data.
ng-model : This directive binds the value of HTML controls (input, select, textarea) to application data.
ng-repeat : This directive repeats html elements for each item in a collection.
12 .
what is ng-app directive ?
The ng-app directive defines the root element of an AngularJS application. The ng-app directive will auto-bootstrap (automatically initialize) the application when a web page is loaded.
<div ng-app=" ">  
   .........
   ..........
</div>
13 .
What is ng-init directive ?
The ng-init directive defines initializes an AngularJS application. It defines the initial values for an AngularJS application. In following example, we'll initialize an array of countries. We're using JSON syntax to define array of countries.

<div ng-app="" ng-init="countries = [{locale:'en-US',name:'United States'}, 
{locale:'en-IND',name:'India'}, {locale:'en-GB',name:'United Kingdom'}, 
{locale:'en-PAK',name:'Pakistan'}, {locale:'en-AUS',name:'Australia'}]">
  .....
  .....
</div>

14 .
what is ng-model directive ?
The ng-model directive binds the value of HTML controls (<input>, <select> or <textarea>) to application data. In following example, we've defined a model named "name".
<div ng-app="">  
 
   <label>Name :</label>
   <input type="text" ng-model="name" placeholder="Your Name">
   
</div>
15 .
What is ng-model directive ?
The ng-model directive binds the value of HTML controls (<input>, <select> or <textarea>) to application data. In following example, we've defined a model named "name".
<div ng-app="">  
 
   <label>Name :</label>
   <input type="text" ng-model="name" placeholder="Your Name">
   
</div>  
16 .
What is ng-repeat directive ?
The ng-repeat directive repeats HTML elements for each item in the specified array collection. In following example, we've iterated over array of countries

<div ng-app="">
   <p><b>List of locale with Countries :</b></p>
   <ol>
      <li ng-repeat = "country in countries">
         {{ ' Locale: ' + country.locale + ', Country: ' + country.name }}
      </li>
   </ol>
</div>
17 .
What is AngularJS Animations ?
AngularJS provides animated transitions, with help from CSS. The transformation of an HTML element gives you an illusion of motion.

Then you must refer to the ngAnimate module in your application :

<body ng-app="ngAnimate">
  .....
  .....
</body>
18 .
What does ngAnimate do ?
The ngAnimate module does not animate HTML elements itself. It only adds and removes some pre-defined classes to make animations when ngAnimate notice certain events, like hide or show of an HTML element.

The Following directives in AngularJS who add/remove classes :

ng-show
ng-hide
ng-class
ng-view
ng-include
ng-repeat
ng-if
ng-switch
19 .
Explain ng-show directive.
ng-show directive shows a given control.

In below example, we've added ng-show attribute to a HTML button and pass it a model. Then we've attached the model to a checkbox and can see the variation.

<input type = "checkbox" ng-model = "showBtn">Free Time Learn
<button ng-show = "showBtn">Click Me!</button>

20 .
Explain ng-hide directive.
ng-hide directive hides a given control.

In below example, we've added ng-hide attribute to a HTML button and pass it a model. Then we've attached the model to a checkbox and can see the variation.

<input type = "checkbox" ng-model = "HideBtn">Free Time Learn
<button ng-hide = "HideBtn">Click Me!</button>
21 .
About ng-include directive.
We can embed HTML pages within a HTML page using ng-include directive.

<div ng-app = "" ng-controller = "MyController">
   <div ng-include = "'sample.html'"></div>
   <div ng-include = "'smple_2.html'"></div>
</div>
22 .
What is the difference between one-way binding and two-way binding ?
One way binding implies that the scope variable in the html will be set to the first value its model is bound to (i.e. assigned to)
Two way binding implies that the scope variable will change it’s value everytime its model is assigned to a different value.
23 .
How do you disable a button depending on a checkbox’s state ?
The developer can use the ng-disabled directive and bind its condition to the checkbox’s state.

<body ng-app>
  <label><input type="checkbox" ng-model="checked"/>Disable Button</label>
  <button ng-disabled="checked">Select Me</button>
</body>
24 .
What Is $Scope In AngularJS ?
It is an application object. And behaves as the owner of the apps variables and functions. Scope object has access to both View and controller. Thus it works as a medium of communication between both of them. This object contains both data and functions. We can use it to access model data of the controller.

Following are the key characteristics of the scope object.

It provides observers to watch for all the model changes.
Provides the ability to propagate model changes through the application as well as outside the system to other associated components.
Scopes can be nested in such a way that they can isolate functionality and model properties.
Provides an execution environment in which expressions are evaluated.
25 .
What Is “$RootScope” In AngularJS ?
Every AngularJS application has a “$rootScope” that is the topmost scope created on the DOM element. An app can have only one $rootScope which will be shared among all its components. It contains the ng-app directive. Every other scope is its child scope. It can watch expressions and propagate events. Using root scope we can set the value in one controller and read it from the other controller.

26 .
What are AngularJS Services ?
In AngularJS you can make your own service, or use one of the many built-in services. AngularJS services are JavaScript functions for specific tasks, which can be reused throughout the application.

AngularJS has about 30 built-in services.

$location service
$http Service
$timeout Service
$interval Service
and more..
27 .
Why we need Angular JS/ React / Any front end JS frameworks ?
Because it is loosely couped with the backend, so any type of backend rest services can be called out from the angular services, where as the spring MVCs tightly coupled compare to angular js where view also should be in JSP/JSF/ any Java supported technologies.
 
As this is a great single page application framework, it provides awesome next generation user experience.
 
As angular js is a widely used for mobile end application developments, it beats other frameworks and stay front for many reasons including this.