Angular 服务注入答案

【问题标题】：Angular Service InjectionAngular 服务注入
【发布时间】：2014-09-19 22:53:48
【问题描述】：

我正在处理一项琐碎的任务（我开始工作了），它向选项卡导航中的 dom 元素添加了一个 .active 类。简单的。关注https://stackoverflow.com/a/12306136/2068709 就可以了。

阅读提供的答案并将他们的控制器与 angular 网站上的示例控制器进行比较，我发现了一些我不太了解的有趣的东西。

在 AngularJS 网站上，$scope 和 $location（和其他服务）与定义控制器的匿名函数一起注入到控制器中。但就答案而言，服务不是注入，而是通过匿名函数传递。为什么这行得通？服务不应该一直注入吗？

举个例子：为什么会这样

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();
        };
    })

两者都有效？

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

【问题讨论】：

docs.angularjs.org/guide/di#dependency-annotation 可能对你有用。

标签： javascript angularjs

【解决方案1】：

实际上它们在两种情况下都被注入，这两种情况之间的区别在于您定义和命名依赖项的第一个场景，如果您缩小 js 代码并且这样您明确声明依赖项例如它可能很有用可能是：

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

这样 Angular 将知道在哪个参数上注入哪个依赖项，而无需查看每个参数的命名。

另一种情况，您需要明确并通过设置名称来声明您将注入的依赖项。

希望对你有帮助。

【讨论】：

【解决方案2】：

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

例如，如果你希望变量名是“s”和“l”，那么你可以这样写：

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

【讨论】：

【解决方案3】：

这就是 Angular 处理代码缩小的方式。通过保持字符串完整，它可以在重命名时保持映射变量。如果你看一下控制器的代码https://github.com/angular/angular.js/blob/master/src/ng/controller.js#L48 你会看到构造函数可以接受函数和数组。

【讨论】：