ng-app directive

ng-app directive is the beginning directive of angularJS. It is used to auto bootstrap angularJS application. We generally use this directive at root level like inside html tag or in body tag.

When angularjs application loads it will first search for ng-app directives.

In other words, you can say that it is used to inform angularjs framework from where it has to initiate.

Example of ng-app

Add ng-app tag in body tag

		
<body ng-app>
</body>
		
		

In angularjs we use {{ }} for binding expression. For any kind of calculation and action, we can perform inside this binding expression

For example

		
		<!DOCTYPE html>
<html>
<head>
    <title>Tech Altum :- AngularJS Tutorial</title>
    <meta charset="UTF-8">
    <script src="angular.min.js"></script>
</head>
<body ng-app>

    <p>The sum of 20 and 30 is </p>  
<p>{{20+30}}</p>
    
</body>
</html>
		
		

now open tool in which you want to learn angularjs. For this tutorial I am using brackets which is an open source tool to work with html.

I am using following html file to work with angularjs.

		
		<!DOCTYPE html>
<html>
<head>
    <title>Tech Altum :- AngularJS Tutorial</title>
    <meta charset="UTF-8">
    <script src="angular.min.js"></script>
</head>
<body>

</body>
</html>

		
		

It will show the following output

		
		what is ng-app
		Figure 1
		
		

If we delete the ng-app from body tag, then it will only display text on screen. You can try it yourself.

Let’s take some another example which we can use in this binding expression

Take string and checks its length

		
		<body ng-app>
 <p>Name :- isha malhotra</p>
 <p>length is  </p> {{"isha".length }}
 </body>
		
		

Output

		
		ng-app string example output
		Figure 2
		
		

We can also create array inside this binding expression and can perform task

For example

		
		<p>Array first element is   {{[2,4,1,0,5][0]}}</p>

		
		

Output

		
		ng-app array example output
		Figure 3
		
		

Let’s take another example

		
		  <p>After sorting array is {{[2,4,1,0,5]. sort()}} </p>
		
		

Output

		
		ng-app array sort example output
		Figure 4
		
		

data-ng-app

We use data-ng-app directives to validate HTML5 because it will consider data-ng-app as custom attribute. If we will write only ng-app then html5 validator throw an exception.

Note:- we also pass module name in ng-app. we will leran module in later tutorial.