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

时间:2013-05-20 22:57:15

标签: javascript angularjs dependency-injection controller scope

只是学习依赖注入,我想我已经开始理解它了。

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

例如:这两个是等价的吗?

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

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

2 个答案:

答案 0 :(得分:12)

首先澄清一下:

对于依赖注入,无论是使用全局函数声明控制器还是使用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数组或内联注释明确指定依赖项,否则,任何版本都可以正常工作。

答案 1 :(得分:7)

如果您要使用module.controller方法,则与您的第一个示例相同:

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

请注意,这样我们就会将$inject字符串与函数一起传递,这样如果它稍后被最小化,它仍然可以工作。