Hello, Friends in this tutorial I am going to explain you about ng-app directive in Angular Js. This is a very useful tutorial for those who have just started learning Angular Js.

After completing this tutorial you will be able to understand:

  • What is ng-app directive in Angular Js?
  • The scope of the ng-app directive.

What is ng-app Directive in Angular js?

ng-app is the entry point for the application. It is used to initialize the Angular Js framework automatically. ng-app directive should be placed at the root of an HTML document example <html> or <body>. We can declare only one ng-app directive in our HTML document. If we have more than one ng-app directive in this scenario only first appeared directive will be used.

The syntax for declaring ng-app directive is given below:

<element ng-app="modulename"> 

... 

  content inside the ng-app root element can contain AngularJS code 

... 

</element>

Where:

Modulename specifies the name of the module to load with the application.

You can find Angular Js Library at this URL:

http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js

Let’s create a simple example of using the ng-app directive in Angular Js Application:

Write the following code in a Html file and run on the browser.

<!DOCTYPE html> 
<html> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<body> 
<div ng-app=""> 
<p>The calculated value is : {{ 20 + 6 * 8 / 2}}</p> 
</div> 
</body> 
 
</html>

run the application on the browser and see the output of the application.

ng-app

Let’s create another example to understand the scope of the application:

Create another Html file and write the following code:

<!DOCTYPE html>
<html>
<head>
 <title>ng-app Directive</title>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
</head>
<body>
 <div>
 {{6/2}}
 </div>
 <div id="myDiv" ng-app>
 {{6/2}}
 <div>
 {{12/2}}

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

Now run the application and check the output of the application:

ng-app

Now, look at the following snapshot.

ng-app

In the above snapshot the expressions that are outside the ng-app scope not executed. This means that ng-app is the entry point for the applications and any features related to angular will work only inside the ng-app directive.

Hope you loved this post.

Thank You.

 

Leave a Comment