了解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字符串与函数一起传递,因此如果它稍后被最小化,它仍然可以工作.