Angularjs directives tutorial

Angularjs directives:

AngularJS directives are used to extend the functionality of HTML elements. AngularJS are the special attributes starting with ng- prefix.

Syntax:

ng-xxxx = ‘value/name’

Note: Some scenarios not need ‘value/name’, for these scenarios directive can be used as ‘ng-xxxx‘ or ng-xxxx=””.

Commonly used AngularJS directives:

ng-app – The ng-app directive initializes an AngularJS Application. ng-init – The ng-init directive initializes application data. ng-model – The ng-model directive defines the model or variable to be used in AngularJS. ng-bind – The ng-repeat directive binds the AngularJS application data to HTML tags or vice versa. ng-repeat – The ng-repeat 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 or automatically initialize the application containing AngularJS when a web page is loaded.

Example:

<div ng-app = "">
   ...
</div>

ng-init directive:

The ng-init dicrective is used to define the initial values for an AngularJS application.

Example:

<div ng-app = "" ng-init = "students=[
{name:'Prabhjot',country:'US'},
{name:'Nidhi',country:'Sweden'},
{name:'Kapil',country:'India'}]" >
   ...
</div>

Note: Normally controller or module is used instead of ng-init directive.

ng-model directive:

The ng-model directive is used to define the model or variable to be used in AngularJS.

Example:

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

ng-bind directive:

The ng-bind directive is used to binds the value of HTML elements like input, select, textarea etc. to application data.

Example:

<div ng-app = "">
   ...
   <p>Hello <span ng-bind = "name"></span>!</p>
 
</div>

ng-repeat directive:

The ng-repeat directive is used to repeats html elements for each item in a collection.

Example:

<div ng-app = "">
   ...
   <p>List of students with country name:</p>
 
   <ol>
      <li ng-repeat = "student in students">
         {{ Name: ' + student.name + ', Country: ' + student.country }}
      </li>
   </ol>
 
</div>

AngularJS Directives Example:

The ng-app directive initializes the application. We create a students object which is initialized by ng-init directive using JSON syntax. Then we define a variable “name” by ng-model directive. This “name” variable value is bind in the next line using ng-bind directive. When we enter a value in name input box, the corresponding value will automatically updated in next line. The ng-repeat directive will work as for-each loop and iterates over students object.

<html>   
   <head>
      <title>AngularJS Directives Example</title>
   </head>
   <script src = 
     "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
   </script>
   <body>
      <h1>AngularJS Directives Example.</h1>
 
      <div ng-app = "" 
           ng-init = "students=[{name:'Prabhjot',country:'US'},
                                {name:'Nidhi',country:'Sweden'},
                                {name:'Kapil',country:'India'}]"
                                > 
         <p>Enter Name: <input type = "text" ng-model = "name"></p>
         <p>Hello <span ng-bind = "name"></span>!</p>
         <p>List of students with country name:</p>
 
         <ol>
           <li ng-repeat = "student in students">
            {{ 'Name: ' + student.name + ', Country: ' + student.country}}
           </li>
        </ol>
      </div>      
   </body>
</html>

Try it:

AngularJS Directives Example on jsbin.com  

Please follow and like us:
Content Protection by DMCA.com