Directives of AngularJS

To extend html, AngularJS directives are used. Now We will discuss following directives:

List of directives:

ng-app : Directives of AngularJS that defines and links an AngularJS application to HTML. It defines the root element.

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

ng-init : To initializes application data. It is used to define values to the variables which is to be used in the application.

<div ng-app="" ng-init="countries=[{id:'1',name:'Alaska'},
{id:'2',name:'Alabama'},
{id:'3',name:'Germany'}]">

...
</div>

ng-model : Directive that binds the values of AngularJS application data to HTML input controls. Here we’ve defined a model named “name”.

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

ng-repeat : Directive that repeats html elements for each iteration.

<div ng-app="">
...
<p>Country list:</p>
<ol>
<li ng-repeat="country in countries">
{{ 'ID: ' + country.id + ', Name: ' + country.name }}
</li>
</ol>
</div>