CODEWITHSUNDEEP
javascriptangularjs
Andrea
Andrea

Reputation: 3440

Declare AngularJS service multiple times in the same module

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?

Upvotes: 9

Views: 811

Answers (4)

Satzz
Satzz

Reputation: 67

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.

Upvotes: 0

Bob Brinks
Bob Brinks

Reputation: 1392

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.

Upvotes: 0

Thalaivar
Thalaivar

Reputation: 23632

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.

Upvotes: 1

ram1993
ram1993

Reputation: 971

Here, you are overwriting definition of factory/service. factory/service is singleton i.e. 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).

Upvotes: 1

Related Questions