Question

请阅读关于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？

Answer 1

如果要缩小js文件，则使用数组是最佳方法。例如，这是两个样本。

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

缩小后，这将成为

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

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

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

使用时

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

缩小后，它将成为

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

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

Answer 2

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

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

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

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

您可以详细了解依赖注入和缩小here。

Answer 3

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

使用数组语法，所有依赖项首先列为字符串，并且因为它们代表数组数据，所以它们不受代码缩小工具的影响。

另请查看documentation以获取更多详细信息（依赖关系注释部分）。

FWIW，一种对缩小也有抵抗力的数组语法的另一种方法是使用$inject属性。来自文档的示例：

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

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

3 个答案: