[email protected]      beta
Donate

AngularJs ng-app directives

Overview: Understanding ng-app directive, What is ng-app in angularjs, Use of AngularJS ng-app directives with an example, ng-app directive designates the root element of the angularjs application.

What is ng-app directives?

In angularjs, the primary directive is the ng-app which tells AngularJs that this part of the web page is AngularJS Application. Its the starting point of AngularJs Application. The ng-app directive designates the root element of the application and is placed on the <body> or <html> tag.

If we want we can also place ng-app on particular div of our HTML document. But make sure only one ng-app should be added on your web page. If more than one ng-app appears, then the element which appeared first will be used.

All AngularJS applications must have a root element .i.e ng-app is a must and this auto-bootstrap an AngularJS application.

Usage:

<div ng-app ng-controller="myCtrl">
   // element here
</div>

or

<div ng-app="myApp" ng-controller="myCtrl">
// element here
</div>

Note: The angularjs framework will only process that dom element where ng-app directives is applied.


Use of AngularJS ng-app directives with an example

Understanding ng-app directive with simple infographic

AngularJS ng-app directive Explanation


Example: Here in this example, we have two divs having ids as parentDiv and another as childDiv. We applied ng-app directives on our childDiv, and now this will become the root element for AngularJs.

Everything inside this element will act as AngularJS Application. This means we get the result of 10 - 8 as 2 i.e here numeric expression will work properly.

We also added some expression on parent div, which will not return any result it just displays it as text and don’t do any calculation.

As we applied ng-app on childDiv and not on parentDiv, this is not the root element of Angularjs.

<div id="parentDiv">
    <span> Sum of 2 + 5  = </span>  {{ 2 + 5}}
     <br/>
        <div ng-app id="childDiv">
            <span> Answer of  10 - 8  = </span>  {{ 10 - 8 }}
        </div>
</div>

Try is yourself


  Popular Tag
  Recent Posts
  Follow Us
If you find these tutorials helpful then please donate. It will lead me to do more tutorials.
Donate