• Angular JS Directive

    Posted on December 14, 2015 by Hamidul Islam in Angular JS.

    angular js directives


    aim

    AngularJS directives are used to extend HTML. Angular JS Directives starts with prefix ng-. In this article we will try to understand the use of below Angular JS Directives

    ng-app: It represents Angular JS Application

    ng-init: Its used for initializing application data

    ng-model : Binding data between elements data and application data

    ng-repeat: Its used for repeating element


    Directive ng-app: 

    Lets see the below example

    <!DOCTYPE html>
    <html lang="en-US">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

    <body>
    <div>
    {{2+2}}
    </div>
    </body>
    </html>

    The above code display simply {{2+2}} but actually it should display 4. In angular JS an expression starts with { { and ends with } }. In the above code the expression is ignored by angular JS because the code is not associated with any Angular JS Application. Here is the modified version of the above code.

    <!DOCTYPE html>
    <html lang="en-US">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

    <body>
    <div ng-app="">
    {{2+2}}
    </div>
    </body>
    </html>

    Now the output of the above code is 4. In the above code div element is associated with Angular JS application and that's the reason the angular js expression is evaluated. In angular JS {{}} is called expression.

    ng-app directive

    ng-app directive starts an AngularJS Application. It automatically initializes or bootstraps the application when web page containing AngularJS Application is loaded. It is also used to load various AngularJS modules in AngularJS Application.In general its used as an attribute of html and body element. 

    There are many other interesting thing about this directive. We will discuss those details in some other article.

    Directive ng-init:

    Lets see the below example where age is initialized to 25.

    <!DOCTYPE html>
    <html lang="en-US">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

    <body>
    <div ng-app="" ng-init="age='25'">
    <p>Your age: {{ age}}</p>

    </div>
    </body>
    </html>

    Output:

    Your age: 25

    Directive ng-model:

    ng-model directive binds data between html elements and application data. Look at the bellow example. In this example we are binding data between input box and the application. As soon as you type something in the input box the data will be binned to myData variable which will be displayed in each key press.

    <!DOCTYPE html>
    <html lang="en-US">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

    <body>
    <div ng-app="" >

    Enter something: <input name="anyName" ng-model="myData">
    <br/>
    <br/>
    You have entered: {{ myData}}

    </div>

    </div>
    </body>
    </html>

    Directive ng-repeat:

    This directive is used for repeating element. Its used on array of objects. In the below example fruits is an array. In the iteration logic eachFruit is just temporary variable which holds fruit name in each iteration. So for each fruit the li element will be repeated.

    <!DOCTYPE html>
    <html lang="en-US">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

    <body>
    <div ng-app="" ng-init="fruits=['Apple','Mango','Orange']">
    <ul>
    <li ng-repeat="eachFruit in fruits">
    {{ eachFruit }}
    </li>
    </ul>
    </div>
    </body>
    </html>

    Output:

    • Apple
    • Mango
    • Orange
    Post Tagged with ,

Leave a Reply

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

Are you human? * Time limit is exhausted. Please reload CAPTCHA.

Top
%d bloggers like this:

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close