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.
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.
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
Following is the example of ng-app
directive in the application.
<!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
Following is the output of angularjs ngapp directive example
If you observe the above output only tag inside ng-app directive got changed outside of that div tag that value not assigned
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.
<!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
Following is the result of using ng-app directive in angularjs applications.
This is how we can use the ng-app directive in angularjs application.