AngularJS 学习笔记---ngApp

发布时间：2020-12-17 10:08:39 所属栏目：安全来源：网络整理

导读：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 th

Use this directive toauto-bootstrapan AngularJS application. ThengAppdirective designates theroot elementof 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 usingngApp:

only one AngularJS application can be auto-bootstrapped per HTML document. The firstngAppfound 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.bootstrapinstead.
AngularJS applications cannot be nested within each other.
Do not use a directive that usestransclusionon the same element asngApp. This includes directives such asngIf,ngIncludeandngView. Doing this misplaces the app$rootElementand the app'sinjector,causing animations to stop working and making the injector inaccessible from outside the app.

You can specify anAngularJS moduleto be used as the root module for the application. This module will be loaded into the$injectorwhen the application is bootstrapped. It should contain the application code needed or have dependencies on other modules that will contain the code. Seeangular.modulefor more information.

In the example below if thengAppdirective were not placed on thehtmlelement then the document would not be compiled,theAppControllerwould not be instantiated and the{{a+b}}would not be resolved to3.

ngAppis the easiest,and most common way to bootstrap an application.

Edit in Plunker

index.htmlscript.js

<div ng-controller="ngAppDemoController">
  I can add: {{a}} + {{b}} =  {{ a+b }}
</div>

UsingngStrictDi,you would see something like this:

Edit in Plunker

index.htmlscript.jsstyle.css

<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>

Directive Info

This directive executes at priority level 0.

Usage

as element: (This directive can be used as custom element,but be aware ofIE 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 applicationmodulename 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 inthe Dependency Injection guide,and useful debugging info will assist in tracking down the root of these bugs.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!