AngularJS how to configure Provider between 2 modules?

568 views Asked by At

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;
});
1

There are 1 answers

0
pranay kumar On

Because All types of Angular providers are singleton objects. The latest state of the provider object will be used when you try to refer them.