AngularJS 中文手册
简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
目录 搜索
AngularJS API Reference auto auto/service auto/service/$injector auto/service/$provide ng ng/directive ng/directive/a ng/directive/form ng/directive/input ng/directive/input[checkbox] ng/directive/input[date] ng/directive/input[dateTimeLocal] ng/directive/input[email] ng/directive/input[month] ng/directive/input[number] ng/directive/input[radio] ng/directive/input[text] ng/directive/input[time] ng/directive/input[url] ng/directive/input[week] ng/directive/ngApp ng/directive/ngBind ng/directive/ngBindHtml ng/directive/ngBindTemplate ng/directive/ngBlur ng/directive/ngChange ng/directive/ngChecked ng/directive/ngClass ng/directive/ngClassEven ng/directive/ngClassOdd ng/directive/ngClick ng/directive/ngCloak ng/directive/ngController ng/directive/ngCopy ng/directive/ngCsp ng/directive/ngCut ng/directive/ngDblclick ng/directive/ngDisabled ng/directive/ngFocus ng/directive/ngForm ng/directive/ngHide ng/directive/ngHref ng/directive/ngIf ng/directive/ngInclude ng/directive/ngInit ng/directive/ngKeydown ng/directive/ngKeypress ng/directive/ngKeyup ng/directive/ngList ng/directive/ngModel ng/directive/ngModelOptions ng/directive/ngMousedown ng/directive/ngMouseenter ng/directive/ngMouseleave ng/directive/ngMousemove ng/directive/ngMouseover ng/directive/ngMouseup ng/directive/ngNonBindable ng/directive/ngOpen ng/directive/ngPaste ng/directive/ngPluralize ng/directive/ngReadonly ng/directive/ngRepeat ng/directive/ngSelected ng/directive/ngShow ng/directive/ngSrc ng/directive/ngSrcset ng/directive/ngStyle ng/directive/ngSubmit ng/directive/ngSwitch ng/directive/ngTransclude ng/directive/ngValue ng/directive/script ng/directive/select ng/directive/textarea ng/filter ng/filter/currency ng/filter/date ng/filter/filter ng/filter/json ng/filter/limitTo ng/filter/lowercase ng/filter/number ng/filter/orderBy ng/filter/uppercase ng/function ng/function/angular.bind ng/function/angular.bootstrap ng/function/angular.copy ng/function/angular.element ng/function/angular.equals ng/function/angular.extend ng/function/angular.forEach ng/function/angular.fromJson ng/function/angular.identity ng/function/angular.injector ng/function/angular.isArray ng/function/angular.isDate ng/function/angular.isDefined ng/function/angular.isElement ng/function/angular.isFunction ng/function/angular.isNumber ng/function/angular.isObject ng/function/angular.isString ng/function/angular.isUndefined ng/function/angular.lowercase ng/function/angular.module ng/function/angular.noop ng/function/angular.toJson ng/function/angular.uppercase ng/object ng/object/angular.version ng/provider ng/provider/$animateProvider ng/provider/$compileProvider ng/provider/$controllerProvider ng/provider/$filterProvider ng/provider/$httpProvider ng/provider/$interpolateProvider ng/provider/$locationProvider ng/provider/$logProvider ng/provider/$parseProvider ng/provider/$rootScopeProvider ng/provider/$sceDelegateProvider ng/provider/$sceProvider ng/service ng/service/$anchorScroll ng/service/$animate ng/service/$cacheFactory ng/service/$compile ng/service/$controller ng/service/$document ng/service/$exceptionHandler ng/service/$filter ng/service/$http ng/service/$httpBackend ng/service/$interpolate ng/service/$interval ng/service/$locale ng/service/$location ng/service/$log ng/service/$parse ng/service/$q ng/service/$rootElement ng/service/$rootScope ng/service/$sce ng/service/$sceDelegate ng/service/$templateCache ng/service/$timeout ng/service/$window ng/type ng/type/$cacheFactory.Cache ng/type/$compile.directive.Attributes ng/type/$rootScope.Scope ng/type/angular.Module ng/type/form.FormController ng/type/ngModel.NgModelController ngAnimate ngAnimate/provider ngAnimate/provider/$animateProvider ngAnimate/service ngAnimate/service/$animate ngCookies ngCookies/service ngCookies/service/$cookies ngCookies/service/$cookieStore ngMessages ngMessages/directive ngMessages/directive/ngMessage ngMessages/directive/ngMessages ngMock ngMock/function ngMock/function/angular.mock.dump ngMock/function/angular.mock.inject ngMock/function/angular.mock.module ngMock/object ngMock/object/angular.mock ngMock/provider ngMock/provider/$exceptionHandlerProvider ngMock/service ngMock/service/$exceptionHandler ngMock/service/$httpBackend ngMock/service/$interval ngMock/service/$log ngMock/service/$timeout ngMock/type ngMock/type/angular.mock.TzDate ngMockE2E ngMockE2E/service ngMockE2E/service/$httpBackend ngResource ngResource/service ngResource/service/$resource ngRoute ngRoute/directive ngRoute/directive/ngView ngRoute/provider ngRoute/provider/$routeProvider ngRoute/service ngRoute/service/$route ngRoute/service/$routeParams ngSanitize ngSanitize/filter ngSanitize/filter/linky ngSanitize/service ngSanitize/service/$sanitize ngTouch ngTouch/directive ngTouch/directive/ngClick ngTouch/directive/ngSwipeLeft ngTouch/directive/ngSwipeRight ngTouch/service ngTouch/service/$swipe

©
本文档使用 PHP中文网手册 发布

文字

AngularJS: API: ng/directive/ngApp

ngApp

  1. - directive in module ng

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

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

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

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

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

index.html
<div ng-controller="ngAppDemoController">
I can add: {{a}} + {{b}} =  {{ a+b }}
</div>
script.js
angular.module('ngAppDemo', []).controller('ngAppDemoController', Function($scope) {
$scope.a = 1;
$scope.b = 2;});
使用 ngStrictDi，你会看到这样的效果：

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

指令信息

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

用法

  • 作为属性使用: 
    <ANY
  ng-app=""
  [ng-strict-di=""]>
...
</ANY>

参数

参数 类型 详述
ngApp angular.Module

用于载入的可选的应用 module 名称。
ngStrictDi
(可选)
 boolean

如果在app元素上设置这个属性， 注入器将使用 "strict-di" 模式创建。意思是，应用将调用函数失败在没有使用明确的函数标注时 (并且因此不适合于JavaScript压缩), 在 依赖注入指南中，一些有用的调试信息将有助于追踪这些错误的根源。
上一篇： 下一篇：