Question

我正在处理一项微不足道的任务（我开始工作），它为标签导航中的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();
        };
    })

都有效吗？

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

Answer 1

这两个例子是等价的 - 它们只是使用不同的语法。第一个示例使用他们称之为“内联数组注释”的内容（请参阅here）。此替代语法的目的是允许一种方便的方法使注入的变量名称与依赖项的名称不同。

例如，如果您希望变量名称为“s”和“l”，那么您可以写：

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

Answer 2

实际上它们是在两种情况下注入的，这两种情况之间的差异在你定义的第一个场景中，并且命名依赖项，如果你缩小你的js代码，这可能是有用的，并且那样你明确地声明了依赖关系，例如它可能是：

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

这样，angular将知道注入哪个参数的依赖关系而不查看每个参数的命名。

另一种情况是你需要明确并通过设置名称来声明你将注入哪个依赖。

我希望有所帮助。

Answer 3

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

角度服务注入

3 个答案: