I'm making an AngularJs module. The thing is, this module is suppose to work with other module (its like a plugin). So I'll basically import this module from another module later on. However, there are some service in this module which I would like to override later on from the module which import this module. How would I do so? Would simply defining another service with the same name do it? If so, how would I get the original service?

I'm making an AngularJs module. The thing is, this module is suppose to work with other module (its like a plugin). So I'll basically import this module from another module later on. However, there are some service in this module which I would like to override later on from the module which import this module. How would I do so? Would simply defining another service with the same name do it? If so, how would I get the original service?

• javascript
• angularjs

Share Improve this question Follow asked Oct 20, 2014 at 11:15 asdacapasdacap 83822 gold badges1010 silver badges1616 bronze badges 2

• 3 Have you checked $provide.decorator? – Yoshi Commented Oct 20, 2014 at 11:18
• Ah! This will do. Thanks! – asdacap Commented Oct 20, 2014 at 11:36

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

The override will occur based on the order of instantiation of the modules. The last module created will have precedence over modules with duplicate services created before it.

SO link regarding Namespacing of services: "Namespacing" services in AngularJS

Plunker : http://plnkr.co/edit/P488AkNtGYGUXmo9gIAT?p=preview

  var dep1 = angular.module("dep1",[]);
  var dep2 = angular.module("dep2",[]);
  var app = angular.module("app",["dep2","dep1"]);

  dep1.factory("helloSrvc",function(){
    return {
      msg: "hello from dep1"
    }
  });

  dep2.factory("helloSrvc",function(){
    return {
      msg: "hello from dep2"
    }
  });

  app.controller("myCtrl", function(helloSrvc,$scope){
    $scope.msg = helloSrvc.msg;
  });

  angular.bootstrap(document,["app"]);