Improve this Doc View Source ngApp
- directive in module ng
Use this directive to auto-bootstrap an AngularJS application. The ngApp
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.
There are a few things to keep in mind when using ngApp
:
- only one AngularJS application can be auto-bootstrapped per HTML document. The first
ngApp
found in the document will be used to define the root element to auto-bootstrap as an application. To run multiple applications in an HTML document you must manually bootstrap them usingangular.bootstrap
instead. - AngularJS applications cannot be nested within each other.
- Do not use a directive that uses transclusion on the same element as
ngApp
. This includes directives such asngIf
,ngInclude
andngView
. Doing this misplaces the app$rootElement
and the app's injector, causing animations to stop working and making the injector inaccessible from outside the app.
You can specify an AngularJS module to be used as the root module for the application. This module will be loaded into the $injector
when the application is bootstrapped. It should contain the application code needed or have dependencies on other modules that will contain the code. See angular.module
for more information.
In the example below if the ngApp
directive were not placed on the html
element then the document would not be compiled, the AppController
would not be instantiated and the {{ a+b }}
would not be resolved to 3
.
ngApp
is the easiest, and most common way to bootstrap an application.
Using ngStrictDi
, you would see something like this:
Directive Info
- This directive executes at priority level 0.
Usage
- as element: (This directive can be used as custom element, but be aware of IE restrictions).
<ng-app ng-app="angular.Module" [ng-strict-di="boolean"]> ... </ng-app>
- as attribute:
<ANY ng-app="angular.Module" [ng-strict-di="boolean"]> ... </ANY>
Arguments
Param | Type | Details |
---|---|---|
ngApp | angular.Module | an optional application module name to load. |
ngStrictDi (optional) | boolean | if this attribute is present on the app element, the injector will be created in "strict-di" mode. This means that the application will fail to invoke functions which do not use explicit function annotation (and are thus unsuitable for minification), as described in the Dependency Injection guide, and useful debugging info will assist in tracking down the root of these bugs. |
© 2010–2017 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://code.angularjs.org/1.5.11/docs/api/ng/directive/ngApp