Declare AngularJS service multiple times in the same module

Question

I am working with AngularJS 1.x and I can define the same service multiple times in the same module. In the following snippet of code, I am defining the service nameService 2 times in module myApp :

(function() {
  'use strict';

  angular
    .module('myApp', [])
    .controller('MainController', MainController)
    .factory('nameService', nameService1)
    .factory('nameService', nameService2);

  MainController.$inject = ['nameService'];

  function MainController(nameService) {
    var vm = this;

    vm.message = nameService.getName();
  }

  function nameService1() {
    return {
      getName: getName
    };

    function getName() {
      return 'First Definition';
    }
  }

  function nameService2() {
    return {
      getName: getName
    };

    function getName() {
      return 'Second Definition';
    }
  }
})();

At runtime, AngularJS will use the value returned by the second implementation of the service: "Second Definition". Please check the this Plunker example .

So, empirically, AngularJS seems to use always the latest definition of a service, ignoring the previous ones.

My question is: is there any official documentation describing this behavior?

Answer 1

Here, you are overwriting definition of factory/service. factory/service is singleton ie there will be only one instance of it.

factory('name', constructing_function)

Your case,

factory('nameService', nameService1)//Here object { getName: getName } will be assigned to nameService instance.

factory('nameService', nameService2)//Here object { getName: getName } (#2nd definition) will be assigned to nameService instance. i.e. nameservice instance referring to (#2nd definition).

Answer 2

That's the way how JavaScript works:

function Vinoth(){console.log("Printing first")}

function Something(){console.log("Printing Something")}

function Vinoth(){console.log("Printing Second")}

When you do a console.log(Vinoth()); , it would always print the Second one. Over to your second part:

  angular
    .module('myApp', [])
    .controller('MainController', MainController)
    .factory('nameService', nameService1)
    .factory('nameService', nameService2);

AngularJS services are singleton by nature, so its going to be one instance across your application life cycle. Your nameService1 and nameService2 are pointing to same nameService instance . Technically it nameService holds nameService2 as it precedes according to hoisting.

Answer 3

No there is no official documentation for this function.

If you would like there to be you can ask the maintainers of angularjs to add documentation for this feature.

Answer 4

Don't need to define the service (Inject) two times. Better solution is , you define the service one time. And use like,

angular.module('myApp', []).controller('MainController', MainController) .factory('nameService', nameService1)

Inside this , we can use that service like,

var nameService2 = angular.copy(nameService);

This is for best practice.