I am new to angularJS. Now I am trying to write a simple angular application. But I am wondering the role of the ng-app directive.
<html ng-app>
And is it possible to add ng-app in a div tag instead of html tag? If possible, is there any differences between <html ng-app> and <div ng-app>, for example, the operating efficiency ?
I am new to angularJS. Now I am trying to write a simple angular application. But I am wondering the role of the ng-app directive.
<html ng-app>
And is it possible to add ng-app in a div tag instead of html tag? If possible, is there any differences between <html ng-app> and <div ng-app>, for example, the operating efficiency ?
- 2 docs.angularjs/api/ng/directive/ngApp I think the question is worthless... should be cancelled – thegio Commented Apr 19, 2016 at 8:55
- Possible duplicate of Placement of the ng-app directive (html vs body) – thegio Commented Apr 19, 2016 at 8:58
3 Answers
Reset to default 7The ng-app directive designates the root element of the application and is typically placed near the root element of the page - e.g. on the <body> or <html> tags.You can only have one ng-app directive in your HTML document.It is also used to load various AngularJS modules in AngularJS Application. The AngularJS framework will only process the DOM elements and its child elements where the ng-app directive is applied
Usage
<div ng-app="" ng-controller="myCtrl">
</div>
OR
<div ng-app="myApp" ng-controller="myCtrl">
</div>
var app = angular.module('myApp', []);
The ng-app directive is for bootstrapping your application.
The element with ng-app is the root element: it wraps the other directives of your application.
<div ng-app="myApp">
<div controller="ctrl"></div> <!-- working -->
</div>
<div controller="myOtherCtrl"></div> <!-- not working -->
According to the documentation:
Directive Usage
as attribute:
<ANY ng-app="angular.Module" [ng-strict-di="boolean"]> ... </ANY>
So you can add ng-app on a div or any other element.
The ng-app attribute represents an Angular directive named ngApp (Angular uses spinal-case for its custom attributes and camelCase for the corresponding directives which implement them). This directive is used to flag the html element that Angular should consider to be the root element of our application. This gives application developers the freedom to tell Angular if the entire html page or only a portion of it should be treated as the Angular application.
Thus, you can add ng-app in the div tag.