AngularJS的依赖注入中“.config（[...]）”中的方括号是什么意思答案

【问题标题】：What is the meaning of the square brackets in ".config([...])" in dependency injection of AngularJSAngularJS的依赖注入中“.config（[...]）”中的方括号是什么意思
【发布时间】：2015-08-12 13:29:32
【问题描述】：

只需阅读有关dependency injection 的AngularJS 文档和开发指南的依赖注入。语法和我之前读到的很不一样。

我对 工厂方法 和 模块方法（依赖注入文档的最开始）感到困惑。

显示了我从文档中阅读的示例：

angular.module('myModule', [])
.config(['depProvider', function(depProvider) {
  // ...
}])
.run(['depService', function(depService) {
  // ...
}])

由于没有详细的实现，语法理解起来有些困难，尤其是我之前读到的.config的例子在声明时没有方括号。

我想知道.factory、.directive、.config中方括号的含义以及整个语法的含义。这与我之前读到的example 完全不同（下面以.config 为例）

//define a module
var mainApp = angular.module("mainApp", []);
...
//create a service using provider 
//which defines a method square to return square of a number.
mainApp.config(function($provide) {
   $provide.provider('MathService', function() {
      this.$get = function() {
         var factory = {};  
         factory.multiply = function(a, b) {
            return a * b; 
         }
         return factory;
      };
   });
});

是不是因为这两个例子来自不同版本的AngularJS？

【问题讨论】：

标签： javascript angularjs dependency-injection

【解决方案1】：

如果要缩小 js 文件，最好使用数组。例如这里有两个示例。

mainApp.config(function($provide){});

缩小后会变成

mainApp.config(function(a){});

由于没有任何名为 a 的 Angular 依赖，Angular 会在此处抛出错误。

解决这个问题的方法是别名。使用数组表示法，以字符串格式定义依赖项，并将该依赖项与任何名称用作方法中的变量。

当你使用它时

mainApp.config(['$provide', function($provide){}]);

缩小后会变成

mainApp.config(['$provide', function(a){}]);

由于在缩小过程中无法缩小字符串，因此依赖名称保持不变。并且您的应用程序在 js 文件缩小后也可以工作。

【讨论】：

【解决方案2】：

你可以写两种不同的方式，区别在于文件的缩小。

mainApp.config(function($provide){});

当你缩小一个文件时，你给它一个引用，在函数之前引用的值，所以在缩小之后可以引用依赖关系。

mainApp.config(['$provide', function($provide){}]);

您可以了解更多关于依赖注入和缩小here。

【讨论】：

【解决方案3】：

这是一种防止在生产环境中缩小脚本时可能出现的问题的方法。 Angular 依靠参数名称来查找并注入正确的依赖项到您的控制器、服务等中，但是如果这些参数被重命名，Angular 将无法再找到依赖项。

使用数组语法，所有依赖项首先以字符串的形式列出，并且因为它们代表数组数据，所以它们不会被代码压缩工具所触及。

还可以查看documentation 了解更多详细信息（Dependency Annotation 部分）。

FWIW 是数组语法的一种替代方法，它也可以抵抗缩小，它是使用$inject 属性。文档中的示例：

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

【讨论】：