Overriding AngularJs Service

Question

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?

Have you checked [`$provide.decorator`](https://docs.angularjs.org/api/auto/service/$provide#decorator)? — Yoshi, Oct 20 '14 at 11:18

score 6 · Answer 1 · edited May 23 '17 at 10:28

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"]);

Overriding AngularJs Service

1 Answers1