AngularJS - Directives

AngularJS directives are used to extend HTML. They are special attributes starting with ng-prefix. Let us discuss the following directives −
ng-app − This directive starts an AngularJS Application.
ng-app − This directive starts an AngularJS Application.
ng-init − This directive initializes application data.
ng-init − This directive initializes application data.
ng-model − This directive defines the model that is variable to be used in AngularJS.
ng-model − This directive defines the model that is variable to be used in AngularJS.
ng-repeat − This directive repeats HTML elements for each item in a collection.
ng-repeat − This directive repeats HTML elements for each item in a collection.
The ng-app directive starts an AngularJS Application. It defines the root element. It automatically initializes or bootstraps the application when the web page containing AngularJS Application is loaded. It is also used to load various AngularJS modules in AngularJS Application. In the following example, we define a default AngularJS application using ng-app attribute of a <div> element.
<div ng-app = "">
   ...
</div>

The ng-init directive initializes an AngularJS Application data. It is used to assign values to the variables. In the following example, we initialize an array of countries. We use JSON syntax to define the array of countries.
<div ng-app = "" ng-init = "countries = [{locale:'en-US',name:'United States'}, 
   {locale:'en-GB',name:'United Kingdom'}, {locale:'en-FR',name:'France'}]">
   ...
</div>

The ng-model directive defines the model/variable to be used in AngularJS Application. In the following example, we define a model named name.
<div ng-app = "">
   ...
   <p>Enter your Name: <input type = "text" ng-model = "name"></p>
</div>

The ng-repeat directive repeats HTML elements for each item in a collection. In the following example, we iterate over the array of countries.
<div ng-app = "">
   ...
   <p>List of Countries with locale:</p>
   
   <ol>
      <li ng-repeat = "country in countries">
         {{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
      </li>
   </ol>
</div>
The following example shows the use of all the above-mentioned directives.
<html>
   <head>
      <title>AngularJS Directives</title>
   </head>
   
   <body>
      <h1>Sample Application</h1>
      
      <div ng-app = "" ng-init = "countries = [{locale:'en-US',name:'United States'}, 
         {locale:'en-GB',name:'United Kingdom'}, {locale:'en-FR',name:'France'}]"> 
         <p>Enter your Name: <input type = "text" ng-model = "name"></p>
         <p>Hello <span ng-bind = "name"></span>!</p>
         <p>List of Countries with locale:</p>
      
         <ol>
            <li ng-repeat = "country in countries">
               {{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
            </li>
         </ol>
      </div>
      
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
      </script>
      
   </body>
</html>
Open the file testAngularJS.htm in a web browser. Enter your name and see the result.
Enter your Name: 
Hello !
List of Countries with locale:


         {{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
      


         {{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
      

    16 Lectures 
     1.5 hours 

 Anadi Sharma

    40 Lectures 
     2.5 hours 

 Skillbakerystudios
 Print
 Add Notes
 Bookmark this page