Angularjs 依赖注入丑化

Question

有一段时间我使用这种方法在我的 angulur 应用程序中注入依赖项。

angular.controller('ctrlName', ['$scope', '$log', function($scope, $log) {

}]);

如您所见，我们通常会传递两次依赖项，

• 一次在数组中
• 第二次在函数参数中

所以，今天我在想我们为什么要这样做，所以我谷歌并阅读了 StackOverflow 上的一些答案，他们中的大多数人都说他们uglify对代码这样做了。

我知道我们可以做到这一点，在上面的例子中

angular.controller('ctrlName', ['$scope', '$log', function(scopeAlias, logAlias) {

}]);

但我不明白这是如何丑化代码的。所以，我想知道，

• 以上述方式注入依赖项如何帮助丑化代码？
• 为什么我要丑化我的 Angular 代码？
• 为什么在生产过程中首选这种方法？

Answer 1

angular JS 中有 3 种类型的依赖注释，您正在使用的一种被称为Inline Array Notation（如 angularJS 文档中所述的首选方式）。另外两个是$inject Property Annotation和Implicit Annotation。

一般来说，使用隐式注释被认为是不好的做法，因为它会破坏任何缩小/混淆工具，因为它们重命名参数的方式。

您可以参考此链接以了解有关角度依赖注入的更多信息。

内联数组注释？

someModule.controller('MyController', ['$scope', 'greeter', function($scope, greeter) {
  // ...
}]);

$inject 属性注解

var MyController = function($scope, greeter) {
   // ...
}

MyController.$inject = ['$scope', 'greeter'];
someModule.controller('MyController', MyController);

隐式注释

someModule.controller('MyController', function($scope, greeter) {
  // ...
});

要回答您的第一个问题，您的代码在使用内联数组表示法或 $inject 属性表示法进行丑化后不会中断。

对于您的第二和第三个问题，Uglification 实际上意味着使用 UglifyJS 缩小您的代码。缩小的好处是它实际上有助于减小文件大小，从而减少传输文件和带宽服务所需的时间。这实际上有助于增加使用体验（加载网页的时间更少）并节省成本（更少的带宽意味着更少的钱）。