Angular 1：$注入器在提供者內部注入提供者時找不到提供者依賴項

Question

我的用例是：我們有幾個助手類，A和B，它們是服務，A依賴於B，我想使他們的提供者可以在.config階段使用它們。

我跟着this SO answer在供應商內部加載供應商。

正如你可以在這裏看到，它的工作原理：

http://plnkr.co/edit/SIvujHt7bprFumhxwJqD?p=preview

var coreModule = angular.module('CoreModule', []); 
coreModule.provider('Car', function() { 
    //CarProvider.engine 
    this.engine = 'big engine'; 

    //Car 
    this.$get = function() { 
    return { 
     color: 'red' 
    }; 
    }; 
}); 
coreModule.provider('ParameterService', ['$injector', function($injector) { 
    try { 
    var CarProvider = $injector.get('CarProvider'); 
    this.deepEngine = CarProvider.engine; 
    console.log('deepEngine = ' + this.deepEngine); 
    } catch (e) { 
    console.log("nope!") 
    } 

    // ParameterService 
    this.$get = function() { 
    return {}; 
    }; 
}]); 
coreModule.config(function(CarProvider) { 
    console.log('configEngine = ' + CarProvider.engine); // big engine 
}); 

這工作，如果我在這個順序一個文件有Car和ParameterService。

然而，當我分裂Car和ParameterService到多個磁盤上的文件，或者我在同一個文件Car之前定義ParameterService，$injector.get('CarProvider')內ParameterService失敗。

我該如何解決這個問題？

我想爲每個文件提供一個提供程序/服務，但我不明白缺失的是什麼。

Answer 1

其中服務是指在運行階段，其中服務實例注入無關緊要的順序。但在服務提供商注入的配置階段，即在provider構造函數和config塊中，它確實很重要。

提供者和配置塊按其定義的順序執行。如果Car提供程序在ParameterService提供程序或config塊之後定義，則在執行這兩個程序時不存在CarProvider。

爲了避免潛在的競爭條件，應遵循每個文件模式一個模塊。這樣可以保持應用程序的高度模塊化（也有利於測試），並且從不在意文件的加載順序。例如。：

angular.module('app', ['app.carService', 'app.parameterService']).config(...); 

angular.module('app.carService', []).provider('Car', ...); 

angular.module('app.parameterService', []).provider('ParameterService', ...); 

模塊部件在其中模塊在angular.module陣列層次結構中定義，從小孩到父母的順序執行。

決定config塊是否需要自己的模塊取決於它的功能（主要是出於測試原因）。

Answer 2

有可能讓提供商在不同的文件中。您只需將它們附加到您創建的第一個模塊。

如果您的標記看起來是這樣的：

<script src="coreModule.js"></script> 
<script src="parameterService.js"></script> 

然後，在coreModule.js，定義模塊：

angular.module('CoreModule', []) 
    .provider('Car', function() { 
     ... 
    } 

記住，第二個參數（[]）告訴角度來創建一個新的模塊。

然後，聲明在不同的文件中您的其他提供商，並將其連接到現有「CoreModule」模塊：

angular.module('CoreModule') 
.provider('ParameterService', ['$injector', function($injector) { 
    ... 
} 

請注意，我們只是傳遞一個參數.module()。這告訴角度將您的提供者添加到現有的模塊。

Plunkr Demo