AngularJS ng-app Directive Example

Here we will learn what is ng-app directive in angularjs with example, use of angularjs ng-app directive and how to use ng-app directive with name and without name in angularjs with examples.

AngularJS ng-app Directive

Generally ng-app directive in angularjs is used to define the starting point of application and it will act as the root element for application. The ng-app in angularjs will identify which part of HTML needs to use for angularjs app. Generally once angularjs framework initialized it will check if HTML contains ng-app directive or not in case if it found it will compile that respective HTML template.

 

If we define ng-app in root element either <html> or <body> of html document then it will control complete html dom elements.

Syntax of Angularjs ng-app Directive

Following is the syntax of angularjs ng-app directive

 

<div ng-app="">

---your code---

</div>

We will learn how to use the ng-app directive in angularjs application with a simple example

Example of AngularJS ng-app Directive

Following is the example of ng-app directive in the application.

 

Live Preview

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>

AngularJs ng-app Directive Example

</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

</head>

<body>

Outside Name: {{name}}

<div ng-app="" ng-init="name='Tutlane'">

<p>Your Nmae: {{name}}</p>

</div>

Outside Name: {{name}}

</body>

</html>

If you observe above code we defined ng-app directive specific to one div tag so when we start running application angularjs will compile only that div and child elements it will not consider elements outside of that div. Now run application we will get output like as shown below 

Output of AngularJS ng-app

Following is the output of angularjs ngapp directive example

 

Angularjs ngapp directive example output or result

If you observe the above output only tag inside ng-app directive got changed outside of that div tag that value not assigned

AngularJS ng-app Directive with Name

We can define the ng-app directive in application with a name. In case, if we give a name to ng-app directive then we need to create a separate module with the same name and that module will have separate controllers, filters, etc. We will learn how to define ng-app directive with name in angularjs with example.

 

Live Preview

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>

AngularJs ng-app Directive with module name example

</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<script type="text/javascript">

var app = angular.module('angularsample', []);

</script>

</head>

<body>

OutSide Name: {{name}}

<div ng-app="angularsample" ng-init="name='Tutlane'">

<p>Your Nmae: {{name}}</p>

</div>

OutSide Name: {{name}}

</body>

</html>

If you observe the above code, we given name for ng-app directive like ng-app="angularsample" with same "angularsample" name we created module using angular.module() function in <script>. Now if we run above code we will get output like as shown below

Output of AngularJS ng-app with Name

Following is the result of using ng-app directive in angularjs applications.

 

Angularjs ngapp directive with module name example output or result

 

This is how we can use the ng-app directive in angularjs application.