javascript - Angular 服务注入(inject)

Question

我正在处理一项琐碎的任务(我开始工作了)，它向选项卡导航中的 dom 元素添加了一个 .active 类。简单的。通过关注 https://stackoverflow.com/a/12306136/2068709 使其正常工作.

阅读提供的答案并将他们的 Controller 与 angular 网站上的示例 Controller 进行比较，我发现了一些我不太理解的有趣内容。

在 AngularJS 网站上，$scope 和 $location(以及其他服务)与一个匿名函数一起注入(inject)到 Controller 中定义 Controller 。但根据答案，服务不是注入(inject)，而是通过匿名函数传递。为什么这行得通？服务不应该一直被注入(inject)吗？

举个例子:为什么会这样

angular.module('controllers', [])
    .controller('NavigationController', ['$scope', '$location', function($scope, $location) { 
        $scope.isActive = function(route) {
            return route === $location.path();
        };
    }])

和这个

angular.module('controllers', [])
    .controller('NavigationController', function($scope, $location) { 
        $scope.isActive = function(route) {
            return route === $location.path();
        };
    })

两者都有效？

这可能是微不足道的，但它让我的大脑陷入了一个我无法理解的循环。

Answer 1

这两个例子是等价的——它们只是使用了不同的语法。第一个示例使用他们所谓的“内联数组注释”(参见 here)。这种替代语法的目的只是为了提供一种方便的方法来使注入(inject)的变量名称不同于依赖项的名称。

因此，例如，如果您希望变量名称为“s”和“l”，那么您可以这样写:

angular.module('controllers', [])
    .controller('NavigationController', ['$scope', '$location', function(s, l) { 
        s.isActive = function(route) {
            return route === l.path();
        };
    }]);