javascript - Angular 两种模块注入(inject)方式的区别

Question

AngularJS 中这两种加载模块的方式有什么区别:

var app = angular.module('app', ['ngRoute']);

// VERSION 1

app.controller('HomeCtrl', ['$scope', '$dep1', '$dep2', function($scope, $dep1, $dep2) {
    // controller code
}];

// VERSION 2

function HomeCtrl($scope, $dep1, $dep2){
    // controller code
}
HomeCtrl.$inject=['$scope', '$dep1', '$dep2'];
return HomeCtrl;

// Then load in the controller into the app module
app.controller('HomeCtrl', HomeCtrl);

Answer 1

这两种方式都是为了缩小安全依赖注入(inject)。这是源代码的摘要，injector.js file :

if (typeof fn === 'function') {
    if (!($inject = fn.$inject)) {
        $inject = [];

        // convert function to string, parse arguments

        fn.$inject = $inject;
    }
} else if (isArray(fn)) {
    last = fn.length - 1;
    assertArgFn(fn[last], 'fn');
    $inject = fn.slice(0, last);
} else {
    assertArgFn(fn, 'fn', true);
}
return $inject;

上面的代码很好地解释了如果你要注入(inject)依赖项的函数的类型是

1. 函数

Angular 检查这个函数是否有属性 $inject ，如果有，这里是要注入(inject)的服务数组。

1. 数组

Angular 从这个数组中获取值，忽略最后一个元素，这应该是一个实际的函数来注入(inject)值。

请注意我用注释表示的部分 //将函数转换为字符串，解析参数。如果没有 $inject 属性被配置并提供 Controller /服务/等。实际上是函数类型，那么 Angular 将采用函数的字符串表示形式并解析它接受的按字面定义的参数。然后获取的参数数组将作为服务注入(inject)。

如您所见，差异非常小。