ngApp

最新推荐文章于 2019-03-19 23:46:12 发布

lj2tj

最新推荐文章于 2019-03-19 23:46:12 发布

阅读量2.3k

点赞数

分类专栏： AngularJS

AngularJS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

原文：https://docs.angularjs.org/api/ng/directive/ngApp

ngApp指令可以用于自动引导AngularJs应用程序。ngApp指令指定了应用程序的根节点位置，通常放在页面的根节点附近，例如在<body>或者<html>节点上。

当使用ngApp的时候要注意一下几点：

1. 每个html文档只能自动加载一个AngularJS应用程序。文档中的第一个ngApp将被用来作为根节点自动加载应用程序。如果想在一个页面里面执行多个应用程序，那么必须使用angular.bootstrap命令手动加载。

2.AngularJS应用程序之间不能互相嵌套。

3.不要在ngApp上使用任何引用了transclusion的指令，这些命令包括：ngIf，ngInclude，ngView。如果这样错误的编写代码，应用程序的$rootElement和应用程序的injector将变得混乱不堪，导致动画停止播放、应用程序外部无法访问injector。

你可以指定一个AngularJs module作为应用程序的根模块。在应用程序被自动引导的时候，这个模块将会被加载到injector。它应该包括应用程序代码需要的或者其它模块依赖的代码。请在angular.module了解更多信息。

ngApp是最简单、最常用的方式用来引导一个应用程序。

ng-strict-di属性：

例：

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

angular.module('ngAppStrictDemo', [])
// BadController不能被实例化, 因为实例化过程依赖于自动的方法注释而不是显示的注释
.controller('BadController',<span style="color:#ff6666;"><strong> function($scope)</strong></span> {
  $scope.a = 1;
  $scope.b = 2;
})
// 不像BadController, GoodController1 和 GoodController2 可以被成功地实例化,因为它们分别使用数组和$inject的形式进行了显示的代码注释
.controller('GoodController1', <strong><span style="color:#ff6666;">['$scope', function($scope) {
  $scope.a = 1;
  $scope.b = 2;
}]</span></strong>)
.controller('GoodController2', GoodController2);
function GoodController2($scope) {
  $scope.name = 'World';
}
<span style="color:#ff6666;"><strong>GoodController2.$inject = ['$scope'];</strong></span>

对 ng-strict-di属性做进一步解释：AngularJs基于你注入的对象的名字进行隐士的依赖注入。所以如果你指定一个参数名是“$scope”，那么AngularJS就回去查找$scope对象。除非你做了修改，这样的工作方式都能满足你的需要。当你缩短了你的代码（比如为了减小Javascript的体积，对JS文件进行压缩），比如将变量缩短为一个字母'd'，当injoctor执行这个被压缩了的JS脚本的时候就不会去查找$scope对象了，而是去查找对象d。而这个对象d并不存在，所以相关的依赖注入就会失败。

两种解决方案：

1. 显示的拼写依赖

'use strict';

(function (app) {
    var listProductsController = function ($location, listProductsService) {
        var that = this;

        listProductsService.getProducts().then(function (response) {
            that.products = response.data;
        }).catch(function (data) {
            that.products = [];
        })['finally'](function () {

        });

        this.createNewProduct = function () {
            $location.url('/app/products/add');
        };

    };

    app.controller('listProductsController', ['$location','listProductsService', listProductsController]);
}(angular.module('productsApp')));

2. 使用$inject

'use strict';

(function (app) {
    var listProductsController = function ($location, listProductsService) {
        var that = this;

        listProductsService.getProducts().then(function (response) {
            that.products = response.data;
        }).catch(function (data) {
            that.products = [];
        })['finally'](function () {

        });

        this.createNewProduct = function () {
            $location.url('/app/products/add');
        };

    };
    
    listProductsController.$inject= ['$location', 'listProductsService'];

    app.controller('listProductsController', listProductsController);
}(angular.module('productsApp')));

lj2tj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ngApp

原文：https://docs.angularjs.org/api/ng/directive/ngAppngApp指令可以用于自动引导AngularJs应用程序。ngApp指令指定了应用程序的根节点位置，通常放在页面的根节点附近，例如在或者节点上。当使用ngApp的时候要注意一下几点：1. 每个html文档只能自动加载一个AngularJS应用程序。文档中的第一个ngApp将被用来
复制链接

扫一扫