The AngularJs directive are helps/used to extend the html.To extended HTML attributes in AngularJs directives with prefix ng-.
The ng-app directive used for initializes an AngularJS application.
The ng-init directive used for initializes application data.
The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.
The ng-repeat used for repeating html elements.
ng-app directive
AngularJs application starts with ng-app directive.It defines the root element and automatically initializes or bootstraps the application the AngularJs application is loaded in web page.It is also helps to load various AngularJS modules in AngularJS Application.The ng-app directive also tells AngularJS that the <div> element. Following example, defined a default AngularJS application using ng-app attribute of a div element.
<div ng-app=””>
…
</div>
ng-init directive
Initializes an AngularJS Application data using ng-init directive.In following example, initialize an array of countries,using JSON syntax to define array of countries.
<div ng-app=”” ng-init=”countries=[{locale:’en-US’,name:’United States’},
{locale:’en-GB’,name:’United Kingdom’},
{locale:’en-FR’,name:’France’}]”>
…
</div>
ng-model directive
For defines the model/variable to be used in AngularJS Application using ng-model directive. The following example, we’ve defined a model named “name”.
<div ng-app=””>
…
7lt;p>Enter your Name: <input type=”text” ng-model=”name”<>/p>
</div>
ng-repeat directive
Repeats html elements for each item in a collection using ng-repeat directive.. The following example, we’ve iterated over array of countries.
<div ng-app=””>
…
<p>List of Countries with locale:</p>
<ol>
<li ng-repeat=”country in countries”>
{{ ‘Country: ‘ + country.name + ‘, Locale: ‘ + country.locale }}
</li>
</ol>
</div>
AngularJs Example
AngularJS Directives Sample Application
Enter your Name:
Hello !
List of Countries with locale:
- {{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
OUTPUT
