了解 AngularJS 控制器中的依赖注入

Question

刚学依赖注入，我想我开始明白了。

如果我在正确的轨道上，请告诉我......

例如：这两个是等价的吗？

/* injection method */
function <controller_name>($scope) {}
<controller_name>.$inject = ['$scope'];

/* other method */
var app = angular.module('myApp');
app.controller(<controller_name>, function($scope) {});

Answer 1

首先澄清一点：

对于依赖注入，无论是使用全局函数还是作为module.controller(...) 方法的参数声明控制器都没有关系。依赖注入器只关心函数本身。所以你实际上要问的是这两者的等价性：

// First

function MyController($scope) {}

MyController.$inject = [ '$scope '];

// Second

function($scope) {}

而且由于控制器函数是否匿名对于注入器也无关紧要，所以上面两个也可以是：

// First

function MyController($scope) {}

MyController.$inject = [ '$scope '];

// Second

function MyController($scope) {}

现在很明显，您的两个控制器之间的唯一区别是其中一个控制器中存在$inject 属性。

以下是您问题的实际答案：

这两个控制器几乎相同。两者都将接收$scope 作为参数并且功能相同。但是，如果您决定稍后缩小代码，则只有设置了 $inject 数组的版本才能正常工作。这是因为如果您不指定 $inject 数组或使用内联注释方法 (http://docs.angularjs.org/guide/di#inlineannotation)，注入器找出您感兴趣的依赖项的唯一方法是检查函数参数的名称（将它们视为服务 ID）。但是缩小会随机命名这些参数，从而消除以这种方式识别依赖关系的机会。

因此，如果您要缩小代码，则必须使用 $inject 数组或内联注释显式指定依赖项，否则，任何版本都可以正常工作。

Answer 2

如果您要使用module.controller 方法，则相当于您的第一个示例：

var app = angular.module('myApp');
app.controller(<controller_name>, ['$scope', function($scope) {}]);

请注意，通过这种方式，我们将$inject 字符串与函数一起传递，因此如果稍后将其最小化，它仍然可以工作。