ng-app | ng-app in angularjs

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.

ng-app example

Add ng-app or data-ng-app tag in body tag

<body ng-app>
</body>

<body data-ng-app>
</body>

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

Sum of two numbers in angular js

The sum of 20 and 30

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

		
		
		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 data-ng-app>
    <p>Name :- isha malhotra</p>
    <p>length is  </p> {{"isha".length }}
</body>

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

		
		
		Figure 3

Let’s take another example


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

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 learn module in later tutorial.