EVOLUTION-MANAGER
Edit File: ngApp.html
<a href='https://github.com/angular/angular.js/edit/v1.3.x/src/Angular.js?message=docs(ngApp)%3A%20describe%20your%20change...#L1145' class='improve-docs btn btn-primary'><i class="glyphicon glyphicon-edit"> </i>Improve this Doc</a> <a href='https://github.com/angular/angular.js/tree/v1.3.9/src/Angular.js#L1145' class='view-source pull-right btn btn-primary'> <i class="glyphicon glyphicon-zoom-in"> </i>View Source </a> <header class="api-profile-header"> <h1 class="api-profile-header-heading">ngApp</h1> <ol class="api-profile-header-structure naked-list step-list"> <li> - directive in module <a href="api/ng">ng</a> </li> </ol> </header> <div class="api-profile-description"> <p>Use this directive to <strong>auto-bootstrap</strong> an AngularJS application. The <code>ngApp</code> directive designates the <strong>root element</strong> of the application and is typically placed near the root element of the page - e.g. on the <code><body></code> or <code><html></code> tags.</p> <p>Only one AngularJS application can be auto-bootstrapped per HTML document. The first <code>ngApp</code> 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 using <a href="api/ng/function/angular.bootstrap"><code>angular.bootstrap</code></a> instead. AngularJS applications cannot be nested within each other.</p> <p>You can specify an <strong>AngularJS module</strong> to be used as the root module for the application. This module will be loaded into the <a href="api/auto/service/$injector"><code>$injector</code></a> when the application is bootstrapped. It should contain the application code needed or have dependencies on other modules that will contain the code. See <a href="api/ng/function/angular.module"><code>angular.module</code></a> for more information.</p> <p>In the example below if the <code>ngApp</code> directive were not placed on the <code>html</code> element then the document would not be compiled, the <code>AppController</code> would not be instantiated and the <code>{{ a+b }}</code> would not be resolved to <code>3</code>.</p> <p><code>ngApp</code> is the easiest, and most common way to bootstrap an application.</p> <p> <div> <a ng-click="openPlunkr('examples/example-example46')" class="btn pull-right"> <i class="glyphicon glyphicon-edit"> </i> Edit in Plunker</a> <div class="runnable-example" path="examples/example-example46" module="ngAppDemo"> <div class="runnable-example-file" name="index.html" language="html" type="html"> <pre><code><div ng-controller="ngAppDemoController"> I can add: {{a}} + {{b}} = {{ a+b }} </div></code></pre> </div> <div class="runnable-example-file" name="script.js" language="js" type="js"> <pre><code>angular.module('ngAppDemo', []).controller('ngAppDemoController', function($scope) { $scope.a = 1; $scope.b = 2; });</code></pre> </div> <iframe class="runnable-example-frame" src="examples/example-example46/index.html" name="example-example46"></iframe> </div> </div> </p> <p>Using <code>ngStrictDi</code>, you would see something like this:</p> <p> <div> <a ng-click="openPlunkr('examples/example-example47')" class="btn pull-right"> <i class="glyphicon glyphicon-edit"> </i> Edit in Plunker</a> <div class="runnable-example" path="examples/example-example47" ng-app-included="true"> <div class="runnable-example-file" name="index.html" language="html" type="html"> <pre><code><div ng-app="ngAppStrictDemo" ng-strict-di> <div ng-controller="GoodController1"> I can add: {{a}} + {{b}} = {{ a+b }} <p>This renders because the controller does not fail to instantiate, by using explicit annotation style (see script.js for details) </p> </div> <div ng-controller="GoodController2"> Name: <input ng-model="name"><br /> Hello, {{name}}! <p>This renders because the controller does not fail to instantiate, by using explicit annotation style (see script.js for details) </p> </div> <div ng-controller="BadController"> I can add: {{a}} + {{b}} = {{ a+b }} <p>The controller could not be instantiated, due to relying on automatic function annotations (which are disabled in strict mode). As such, the content of this section is not interpolated, and there should be an error in your web console. </p> </div> </div></code></pre> </div> <div class="runnable-example-file" name="script.js" language="js" type="js"> <pre><code>angular.module('ngAppStrictDemo', []) // BadController will fail to instantiate, due to relying on automatic function annotation, // rather than an explicit annotation .controller('BadController', function($scope) { $scope.a = 1; $scope.b = 2; }) // Unlike BadController, GoodController1 and GoodController2 will not fail to be instantiated, // due to using explicit annotations using the array style and $inject property, respectively. .controller('GoodController1', ['$scope', function($scope) { $scope.a = 1; $scope.b = 2; }]) .controller('GoodController2', GoodController2); function GoodController2($scope) { $scope.name = "World"; } GoodController2.$inject = ['$scope'];</code></pre> </div> <div class="runnable-example-file" name="style.css" language="css" type="css"> <pre><code>div[ng-controller] { margin-bottom: 1em; -webkit-border-radius: 4px; border-radius: 4px; border: 1px solid; padding: .5em; } div[ng-controller^=Good] { border-color: #d6e9c6; background-color: #dff0d8; color: #3c763d; } div[ng-controller^=Bad] { border-color: #ebccd1; background-color: #f2dede; color: #a94442; margin-bottom: 0; }</code></pre> </div> <iframe class="runnable-example-frame" src="examples/example-example47/index.html" name="example-example47"></iframe> </div> </div> </p> </div> <div> <h2>Directive Info</h2> <ul> <li>This directive executes at priority level 0.</li> </ul> <h2 id="usage">Usage</h2> <div class="usage"> <ul> <li>as attribute: <pre><code><ANY ng-app="" [ng-strict-di=""]> ... </ANY></code></pre> </li> </div> <section class="api-section"> <h3>Arguments</h3> <table class="variables-matrix input-arguments"> <thead> <tr> <th>Param</th> <th>Type</th> <th>Details</th> </tr> </thead> <tbody> <tr> <td> ngApp </td> <td> <a href="" class="label type-hint type-hint-angular">angular.Module</a> </td> <td> <p>an optional application <a href="api/ng/function/angular.module">module</a> name to load.</p> </td> </tr> <tr> <td> ngStrictDi <div><em>(optional)</em></div> </td> <td> <a href="" class="label type-hint type-hint-boolean">boolean</a> </td> <td> <p>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 <a href="guide/di">the Dependency Injection guide</a>, and useful debugging info will assist in tracking down the root of these bugs.</p> </td> </tr> </tbody> </table> </section> </div>