AngularJs Directives

Hi everyone in this article I’m explaining about Angularjs Directives.

Details:

AngularJS directives are used to extend HTML. These are special attributes starting with ng- prefix. We're going to discuss following directives:

1. ng-app -This directive starts an AngularJS Application.

2. ng-init - This directive initializes application data.

3. ng-model - This directive defines the model that is variable to be used in AngularJS.

4. ng-repeat - This directive repeats html elements for each item in a collection.

Ng-app Directive:

ng-app directive starts an AngularJs Application. It defines the root element. It automatically initializes the application when web page containing Angularjs Application is loaded. It is also used to load various Angularjs modules in angularjs application. In following example we defined a default AngularJs application using ng-app attribute of a div element.

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

Ng-init directive:

Ng-init directive initializes an AngularJs Application data. It is used to put values to the variables to be used in the application. In following example we’ll initialize an array of countries we are using JSON syntax to define array of countries.

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

Ng-model directive defines the model/variable to be used in Angularjs Application. In following example we defined a model named “username”

<divng-app="">
...
<p>Enter your Name: <inputtype="text"ng-model="username"></p>
</div>

Ng-repeat directive:

Ng-repeat directive repeats html elements for each time in a collection in following example we iterated over array of countries.

<divng-app="">
...
   <p>List of Countries with locale:</p>
   <ol>
      <ling-repeat="country in countries">
         {{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
      </li>
   </ol>
</div>

Example:

Following example will showcase all the above mentioned directives.

testAngularJS.htm

<html>
<title>AngularJS Directives</title>
<body>
    <h1>Sample Application</h1>
    <divng-app=""ng-init="countries=[{locale:'en-IN',name:'India'},
                                    {locale:'en-GB',name:'United Kingdom'},
                                    {locale:'en-FR',name:'France'}]">
        <p>Enter your Name:<inputtype="text" ng-model="username"></p>
        <p>Welcome<spanng-bind="username"></span>!</p>
        <p>List of Countries with locale:</p>
        <ol>
            <ling-repeat="country in countries">{{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
            </li>
        </ol>
    </div>
    <scriptsrc="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</body>
</html>

Output:

Open textAngularJS.htm in a web browser. Enter your name and see the result.

articles

AngularJs Directives

Details:

Ng-app Directive:

Ng-init directive:

Ng-model directive:

Ng-repeat directive:

Example:

testAngularJS.htm

Output:

Anonymous User

Leave Comment

Comments

Liked By