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> |