将依赖项注入AngularJS服务

Question

在阅读有关AngularJS服务的文档时，我偶然发现了如下所示的示例服务：

myApp.service('fooGetter', ['$http', function($http) {
    this.getFoo = function() {
        // use $http to get some foo
    }
}]);

其中$http被注入服务包装器，因此可以从创建的服务实例中引用它。包含参数列表的数组语法的原因是什么，然后在函数参数中重复这些参数？我无法找到一个很好的解释目的，它的规则，以及为什么它是必要的。没有它的同样的服务，如：

myApp.service('fooGetter', function($http) {
    this.getFoo = function() {
        // use $http to get some foo
    }
});

似乎对该变量有一个非常好的自动引用。

Answer 1

如果使用不包含注入依赖项的数组的语法，则angular使用反射来读取函数的参数。这通常很好，但如果你想缩小你的代码，你的参数将改变名称，而角度将停止工作。使用数组语法表示法将允许angular继续查找正确的依赖项，即使您的参数名称发生更改。

此外，如果注入的服务具有非常长的名称，则可以使用数组语法注入它们，并在函数参数列表中为它们提供更简单的名称。

示例：

app.controller("MyCtrl", ["MyReallyLongUserServiceName", function(User) {
  User.doSomething();
}]);

Answer 2

如果您计划缩小JS代码，则必须使用此数组语法，以便注入仍然有效。实际上，minifier将更改匿名函数的参数名称，而angular使用此名称来知道要向函数注入的内容。这种替代语法通过将参数的名称定义为字符串来解决问题，这不会被缩小器触及。

请注意，官方文档page about dependency injection中对此进行了解释。