AngularJS: API: ng/directive/ngApp

ngApp

- directive in module ng

使用这个指令自动载入启动一个AngularJS应用。ngApp指令设计为应用的根元素，一般把它放在页面的根元素附近，例如或标签。

每个HTML文档只有一个AngularJS应用能被自动载入启动。文档中找到的第一个ngApp将被用于定义自动载入启动的应用的根元素。要在一个HTML文档中运行多个应用，你必须使用angular.bootstrap来手工启动。AngularJS应用间不能嵌套。

你能指定一个AngularJS module作为应用的根模块。当应用被启动后，这个模块将被载入到$injector，并且应包含所需要的应用代码或必须依赖的包含代码的其它模块。参考angular.modul获取更多信息。

在下面的例子中，如果ngApp指令没被放在html元素上，文档将不会被编译，AppController将不会被实例化，并且{{a+b}}将不会被解析为3。

使用ngApp是简单、通用的启动应用的途径。

index.html

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

script.js

angular.module('ngAppDemo',[]).controller('ngAppDemoController',Function($scope){$scope.a=1;$scope.b=2;});

使用 ngStrictDi，你会看到这样的效果：

index.html

ng-app="ngAppStrictDemo"ng-strict-di>ng-controller="GoodController1">I can add: {{a}} + {{b}} = {{ a+b }}This renders because the controller does not fail to instantiate, by using explicit annotation style (see script.js for details)

ng-controller="GoodController2">Name:ng-model="name">/>Hello, {{name}}!This renders because the controller does not fail to instantiate, by using explicit annotation style (see script.js for details)

ng-controller="BadController">I can add: {{a}} + {{b}} = {{ a+b }}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.

script.js

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);FunctionGoodController2($scope){$scope.name="World";}GoodController2.$inject=['$scope'];

style.css

div[ng-controller]{margin-bottom:1em;-webkit-border-radius:4px;border-radius:4px;border:1pxsolid;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;}

指令信息

这个指令执行优先级为0.

用法

作为属性使用:
```
ng-app=""[ng-strict-di=""]>...
```

参数

参数	类型	详述
ngApp	angular.Module	用于载入的可选的应用 module 名称。
ngStrictDi (可选)	boolean	如果在app元素上设置这个属性，注入器将使用 "strict-di" 模式创建。意思是，应用将调用函数失败在没有使用明确的函数标注时 (并且因此不适合于JavaScript压缩), 在依赖注入指南中，一些有用的调试信息将有助于追踪这些错误的根源。

Vorheriger Artikel： Nächster Artikel：