AngularJS：向主模塊或控制器注入依賴項嗎？

Question

我對某事感到困惑。 一些依賴項必須注入到主模塊中。 例如：

angular.module("app", ["ui.router", "ui.bootstrap", "toaster"]);

而其他一些依賴項可以直接注入到控制器中，而無需注入到主模塊中。 例如：

angular.module("app").controller("newCtrl", ["$q", newCtrl);

我很難理解為什么。 任何幫助都感激不盡。

Answer 1

根據文檔 ， $q是核心ng模塊內的服務。

ng模塊中的所有服務都將在加載和解析angular.js文件時進行引導和注冊。 這使您可以將它們注入到應用程序中的任何位置。

但是，上面列出的三個示例都是外部，模塊化依賴關系。 需要將它們顯式注冊到您的應用程序中，以便在$injector服務嘗試解析它們時可以使用其中的組件。

Answer 2

您將模塊注入其他模塊。

您可以將這些模塊中包含的提供程序，服務和工廠注入到特定控制器中。

Answer 3

在Angular中，您可以這樣定義一個模塊：

angular.module('MyModule1', []);

注意模塊函數如何接受兩個參數。 第二個參數是此模塊所依賴的其他模塊的數組。 此構造用於設置模塊。

定義模塊后，您可以將控制器，服務等附加到模塊。

angular
    .module('MyModule1')
    .service('MyService1');

注意，這一次只給模塊函數提供了一個參數。 這意味着您將獲得一個已經注冊的模塊。

假設您創建了另一個模塊MyModule2，但是MyModule2需要使用MyModule1定義的服務。

您只需將模塊MyModule2設置為MyModule1作為其依賴項即可。

angular.module('MyModule2', ['MyModule1']);

現在，您想在MyModule2中創建一個控制器（或指令或服務，無論如何），該控制器實際上利用了MyModule1中定義的服務MyService1。

這就是Angular的依賴注入（DI）的地方。您將服務名稱定義為控制器的函數參數，當Angular實例化控制器時，它確保已找到服務實例並將其提供給控制器。

angular
    .module('MyModule2')
    .controller('MyController2', function (myService1) {
        // Hey I can use myService1
        // Dependency Injection FTW!
    });