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

这两种在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);

最佳答案

两种方法都是用于最小化安全依赖项注入(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)依赖项的函数具有

函数

Angular检查此函数是否具有$inject属性，如果存在，则生成要注入(inject)的服务数组。

数组

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

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

因此，您可以看到差异很小。