Question

我在AngularJS中看到了这两个不同的模式来定义控制器：

myApp.controller('myControllerName', function($scope) {
    // ... my controller code ...
});

和

myApp.controller('myControllerName', ['$scope', function($scope) {
    // ... my controller code ...
}]);

在依赖注入中，分别添加参数。

这两个编码程序有什么区别？对于JavaScript和AngularJS的低级方面，我都很喜欢详细解答。

Answer 1

第二种方法用于解决缩小问题。

因为Angular从名称中推断出控制器的依赖关系   控制器的构造函数的参数，如果你是   缩小PhoneListCtrl控制器的JavaScript代码，全部   函数参数也将被缩小，并且依赖性   注入器无法正确识别服务。

我们可以通过使用名称注释函数来克服这个问题   依赖关系，以字符串形式提供，不会缩小

A Note on Minification

Answer 2

两个例子都会产生同样的效果。使用第一个模式时，Angular通过将函数转换为字符串来解析参数名称。使用第二种模式时，名称显式提供为字符串。

第二种模式很有用，因为缩小生产代码是一种很好的做法。任何好的minifier都会重命名参数标识符，所以第一个例子最终会是这样的：

a.controller('myControllerName',function(a){});

在这种情况下，Angular将不再知道要注入哪个服务，因为它将解析参数名称，获取a并尝试注入a服务（可能存在也可能不存在，但绝对不是＃39; t你想要的东西。）

第二个例子将是这样的：

a.controller('myControllerName',['$scope',function(a){}]);

这次Angular将提供正确的服务。在控制器函数a内部是对提供的服务的引用，一切都将按预期工作。

Answer 3

两者都会做同样的事情，但是当我们缩小代码时，后者会很有用。

缩小代码将缩短函数中的局部变量和参数名称。例如，缩小后，您的代码段将更改为以下内容：

myApp.controller('myControllerName', function(a) {

});

和

myApp.controller('myControllerName', ['$scope', function(a) {
    // ... my controller code ...
}]);

作为基于参数名称的角度注入服务，它不会找到名为“a”的提供者，因此它会失败。

在AngularJS中定义控制器的两种方法？

3 个答案: