Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
AngularJS β ng-app Directive
The ng-app Directive in AngularJS is used for auto-bootstraping of an AngularJS application. This directive gives the root element of the application and is generally placed near the root element of the page like on the <html> or <body> tags. This directive declares the root context from where the application will be started.
Points to note while using the ngApp Directive −
- Only one application can be bootstrapped per the HTML element. If you declare multiple ngApp components, the first ngApp appearing element will be considered as the root element for auto-bootstrap. For running multiple applications in the HTML, one should use the angular.bootstrap method.
- Do not nest AngularJS applications with each other.
- Transclusions directive should not be used on the same element as ngApp. Some transclusions directives are ngIf, ngInclude, ngView, etc.
Syntax
<element ng-app="">..Content..</element>
Example − ngApp Directive
Create a file "ngApp.html" in your Angular project directory and copy-paste the following code snippet.
<!DOCTYPE html>
<html>
<head>
<title>ngApp Directive</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body style="text-align: center;">
<h1 style="color: green;">
Welcome to Tutorials Point
</h1>
<h2>
AngularJS | ngApp Directive
</h2>
<div ng-app="" ng-init="course='AngularJS'">
<p>Start Learning the latest <b>{{course}}</b> features now...</p>
</div>
</body>
</html>Output
To run the above code, just go to your file and run it as a normal HTML file. You will see the following output on the browser window.
.png)
Example 2
Create a file "ngApp.html" in your Angular project directory and copy-paste the following code snippet.
<!DOCTYPE html>
<html>
<head>
<title>ngApp Directive</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body ng-App="" style="text-align: center;">
<h1 style="color: green;">
Welcome to Tutorials Point
</h1>
<h2>
AngularJS | ngApp Directive
</h2>
<div>
<p>Enter the Course: <input type="text" ng-model="course" /></p>
<p>Course: <span ng-bind="course"></span></p>
</div>
</body>
</html>Output
To run the above code, just go to your file and run it as a normal HTML file. You will see the following output on the browser window.
.png)
224 Views
