AngularJS Directives with demo and example

AngularJS Directives with demo and example

AngularJS Directives with demo and example, AngularJS directives are used to extend HTML. These are special attributes starting with ng and ng- prefix.

1- ng-app – This directive starts an AngularJS Application and define in a div.

2- ng-init – This directive initializes application data. This is inalization of data.

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

4- ng-repeat – This directive repeats html elements work like for and foreach loop,for each item in a collection.

AngularJs ng-app directive

ng-app directive start an AngularJS Application. It define the root element of app. It automatically initializes or bootstrap the application when web page containing AngularJS Application is loaded. It is also used to load various AngularJS modules in AngularJS Application. It extend all angularjs application propities.

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

AngularJs ng-model directive

ng-model directive defines the model/variable to be used in AngularJS Application. In following example, we’ve defined a model named “name”.

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

AngularJs ng-repeat directive

ng-repeat directive repeats html elements for each item in a collection. Its work like for and foreach loop.

    <div ng-app="">
    ...
       <p>List of States with locale:</p>
        <ol>
          <li ng-repeat="state in states">
             {{ 'State: ' + state.name + ', Locale: ' + state.locale }}
          </li>
        </ol>
</div>

AngularJs Example

Copy and run this example to get experince.

        <html>
        <title>AngularJS Directives Example</title>
        <body>
        <h1>Simple Application</h1>
        <div ng-app="" ng-init="states=[{locale:'en-US',name:'Rajasthan'},
                                        {locale:'en-GB',name:'Rajasthan 1 '},
                                        {locale:'en-FR',name:'Rajasthan 2'}]">
        <p>Enter  Name: <input type="text" ng-model="name"></p>
        <p>Enter  Email: <input type="text" ng-model="email"></p>
        <p>Name- <span ng-bind="name"></span>!</p> 
        <p>Email- <span ng-bind="email"></span>!</p>
        <p>List of Stats with locale:</p>
        <ol>
          <li ng-repeat="state in states">
             {{ 'State: ' + state.name + ', Locale: ' + state.locale }}
          </li>
        </ol>
        </div>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
        </body>
        </html>
AngularJSDirectives

AngularJSDirectives

Share Button

About admin

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Author: pramod kumar kumawat Mob: 9269727062
Free WordPress Themes - Download High-quality Templates