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

Two ways to define controllers in AngularJS?

本文关键字：两种 方法 控制器 定义 AngularJS      更新时间：2023-09-26

我在AngularJS:中看到了定义控制器的两种不同模式

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

和

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

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

这两个编码例程之间有什么区别？我很想得到关于JavaScript和AngularJS底层方面的详细答案。

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

由于Angular从控制器构造函数的参数，如果要缩小PhoneListCtrl控制器的JavaScript代码函数参数也将缩小，并且依赖项注入器将无法正确识别服务。

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

关于小型化的一个注记

这两个示例将具有相同的效果。当使用第一种模式时，Angular通过将函数转换为字符串来解析参数名称。当使用第二种模式时，名称被显式地提供为字符串。

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

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

在这种情况下，Angular将不再知道要注入哪个服务，因为它将解析参数名称，获取a并尝试注入a服务(可能存在也可能不存在，但肯定不是您想要的(。

第二个例子是这样的：

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

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

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

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

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

和

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

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

相关文章：