AngularJS Interview Questions
1 .
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.
2 .
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>
3 .
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>

4 .
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>
5 .
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>  
6 .
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>
7 .
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>
8 .
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
9 .
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>

10 .
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>