角度服務注入

Question

我正在開展一項簡單的任務（我開始工作），它將一個.active類添加到選項卡導航中的dom元素。 簡單。 通過以下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

這兩個例子是等價的 - 它們只是使用不同的語法。 第一個例子使用他們所謂的“內聯數組注釋”（見這里 ）。 此替代語法的目的是允許一種方便的方法使注入的變量名稱與依賴項的名稱不同。

因此，例如，如果您希望變量名稱為“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，你會發現構造函數可以接受函數和陣列。