Prev Page
Next Page  
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.  Directive functions are used to define custom directives.  Angularjs has a set of built-in directives which provides functionality to your application.

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.

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>
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>
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>
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>
AngularJS Directives Example :
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Directives</title>
    <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
</head>
 
<body>
 
 
<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'}]">
 
         <label>Name :</label>
         <input type="text" ng-model="name" placeholder="Your Name">
         <h4>Hello i'm <span ng-bind="name"></span>.</h4>
          
           <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>   
</body>  
</html>
Output :
  Prev Page
Next Page