Please see my proof of concept: http://plnkr.co/edit/y3pzFv?p=preview.
How Do I configure Provider between 2 modules?
Brief: I am trying to generalize a service and configure multiple instances slightly differently.
Right now I have a bunch of Angular Services (factory) that I would like to generalize so they can be re-used. In my proof of concept I am trying to breakup an AngularJS 1.3 App into 2 modules 'bob' and 'joe'. Each module should share a Provider that should have a configurable variable called food. I am trying to define a re-usable service and create a separate instance for each module.
I have read the Angular documentation about Providers, and from what I understand providers allow you to extract the configurable part into the .config(). What am I doing wrong? I would expect Bob's Food to be Banana, but Joe's Food which is configured second is overwriting Bob's Food. This leads me to believe the Food provider is not creating a new instance for each of the 'bob' and 'joe' modules.
I'm on AngularJS v1.3.15
index.html
<div ng-controller="BobCtrl">Bob's Food: {{ providerInstance.get() }}</div>
<div ng-controller="JoeCtrl">Joe's Food: {{ providerInstance.get() }}</div>
app.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;
});
