请参阅我的概念证明:http ://plnkr.co/edit/y3pzFv?p=preview 。
如何在 2 个模块之间配置 Provider?
简介:我试图概括一个服务并稍微不同地配置多个实例。
现在我有一堆我想概括的 Angular 服务(工厂),以便它们可以被重用。在我的概念证明中,我试图将 AngularJS 1.3 应用程序分解为 2 个模块“bob”和“joe”。每个模块都应该共享一个 Provider,该 Provider 应该有一个名为 food 的可配置变量。我正在尝试定义一个可重用的服务并为每个模块创建一个单独的实例。
我已阅读有关提供程序的 Angular 文档,据我了解,提供程序允许您将可配置部分提取到 .config() 中。我究竟做错了什么?我希望鲍勃的食物是香蕉,但是第二个配置的乔的食物会覆盖鲍勃的食物。这让我相信 Food 提供者并没有为每个“bob”和“joe”模块创建一个新实例。
我在 AngularJS v1.3.15
索引.html
<div ng-controller="BobCtrl">Bob's Food: {{ providerInstance.get() }}</div>
<div ng-controller="JoeCtrl">Joe's Food: {{ providerInstance.get() }}</div>
应用程序.js
angular.module('shared').provider('Food', function() {
var _food = 'Default';
this.set = function(food) { _food = food; }
this.$get = function() {
return {
get: function() {
return _food;
}
}
};
});
angular.module('bob').config(function(FoodProvider) {
FoodProvider.set('Banana');
});
angular.module('bob').controller('BobCtrl', function($scope, Food) {
$scope.providerInstance = Food;
});
angular.module('joe').config(function(FoodProvider) {
FoodProvider.set('Apple');
});
angular.module('joe').controller('JoeCtrl', function($scope, Food) {
$scope.providerInstance = Food;
});