AngularJS Directives

The directives in AngularJS are basically new attributes which are used to extend HTML. AngularJS has a set of built-in directives that offer functionality to your applications; moreover, it lets you define your own directives as well. These special attributes start with the -ng prefix. In this tutorial we will be discussing about some of the common directives like.

  • ng-app - This is used for the initialization of the AngularJS application.
  • ng-init- This is used for the initialization of application data.
  • ng-model-This binds the value of HTML controls like input, select, text area to the data in the application.
  • ng-repeat- This is used for repeating HTML for each and every item in a collection.

Now let us look at each and every one of them in detail one by one.

ng-app directive

This directive starts an AngularJS application by defining the root element. It initializes or bootstraps the AngularJS application automatically when the webpage which contains the application is loaded. Moreover, various AngularJS modules can also be loaded using this directive. The following example shows how to define a default AngularJS application using the ng-app directive in the div element.

 <div ng-app="" ng-init="firstName='Mithilesh'">

 <p>Name:  <input type="text" ng-model="firstName"> </p>
 <p>You wrote: {{ firstName }} </p>

 </div>

ng-init directive

This directive is crucial in the initialization of AngularJS application data. It is used to assign values to the different variables to be used in the application. The following example shows how to initialize an array of countries using the JSON syntax.

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

ng-model directive

This directive defines the model/variable that will be used in the AngularJS application. Moreover, it binds the values of various HTML controls to application data. It can also-

  • Type validate application data (number, email).
  • Provide status for application data (e.g. invalid, error).
  • Give CSS classes for HTML elements
  • Bind HTML elements to HTML forms.

The following example shows how to define a model named "name".

							
 < div ng-app = "">
   ...
    <p>Enter your Name:  <input type = "text" ng-model = "name"> </p>
 </div>

ng-repeat directive

This directive creates clones of HTML elements for each and every item in the collection. The following example shows how to repeat an array of countries.

Example Code

The following example shows a code where all the above mentioned directives have been used.

 <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 = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </script>
      
    </body>
 </html>