AngularJS ng-app Directive Example

  Total Views : 1061
  Comments : 0
 
  Keywords : What is ng-app directive in angularjs, Use of ng-app directive in angularjs, The ng-app directive in angularjs, Angular directive ng-app example, ngapp directive in angularjs with 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 starting point of application and it will act as 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 ng-app directive in angularjs application with simple example

Example of AngularJS ng-app Directive

Following is the example of ngapp directive in 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 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 ng-app directive in application with name. In case if we give name to ng-app directive we need to create separate module with same name then that module will separate controllers, filters, etc specific to that module. 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 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 ng-app directive in angularjs application.

 Comments (0)

Be the first to give your valuable feedback

Leave a comment

  • Default Tutlane User