CodesJava

Easy learning with example program codes

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
 



Industrial Training

We offers Placement Oriented Training on Java, Spring, JSF, Hibernate, PHP, AngularJS, Angular 4, PLSQL, Oracle BI Publisher etc. We also provides Online training, please mail us at hr@codesjava.com.

Development

We also provides the Development services for Website Development , Java Development, PHP Development, Android App Development etc. You can contact us on hr@codesjava.com.

Copyright © 2019 CodesJava DMCA.com Protection Status SiteMap Reference: Java Wiki