What is the role of ng-app directive?

Question

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 ?

https://docs.angularjs.org/api/ng/directive/ngApp I think the question is worthless... should be cancelled — thegio, Apr 19 '16 at 08:55
Possible duplicate of [Placement of the ng-app directive (html vs body)](http://stackoverflow.com/questions/15790432/placement-of-the-ng-app-directive-html-vs-body) — thegio, Apr 19 '16 at 08:58

byteC0de · Accepted Answer · 2016-04-19T09:23:07.973

The 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', []);

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

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.

score 0 · Answer 3 · answered Apr 19 '16 at 08:55

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.

What is the role of ng-app directive?

3 Answers3