Are Angularjs singleton services?

Question

In the link, I read:

Finally, it is important to understand that all services are Angular applications. This means that there is only one example of a given service per injector.

but with this simple code, it seems not single

'use strict'; angular.module('animal', []) .factory('Animal',function(){ return function(vocalization){ return { vocalization:vocalization, vocalize : function () { console.log('vocalize: ' + this.vocalization); } } } }); angular.module('app', ['animal']) .factory('Dog', function (Animal) { return Animal('bark bark!'); }) .factory('Cat', function (Animal) { return Animal('meeeooooow'); }) .controller('MainCtrl',function($scope,Cat,Dog){ $scope.cat = Cat; $scope.dog = Dog; console.log($scope.cat); console.log($scope.dog); //$scope.cat = Cat; }); 

I'm a little confused, could you please explain to me what is the matter?

UPDATE 1 Maybe I'm not the sharpest tool in the barn but give @Khanh to answer, the explanation in the link would be better not very clear.

UPDATE 2

 'use strict'; angular.module('animal', []) .factory('Animal',function(){ return { vocalization:'', vocalize : function () { console.log('vocalize: ' + this.vocalization); } } }); angular.module('dog', ['animal']) .factory('Dog', function (Animal) { Animal.vocalization = 'bark bark!'; Animal.color = 'red'; return Animal; }); angular.module('cat', ['animal']) .factory('Cat', function (Animal) { Animal.vocalization = 'meowwww'; Animal.color = 'white'; return Animal; }); angular.module('app', ['dog','cat']) .controller('MainCtrl',function($scope,Cat,Dog){ $scope.cat = Cat; $scope.dog = Dog; console.log($scope.cat); console.log($scope.dog); //$scope.cat = Cat; }); 

AUXILIARY!

UPDATE 3

But if you like

 'use strict'; angular.module('animal', []) .factory('Animal',function(){ return function(vocalization){ return { vocalization:vocalization, vocalize : function () { console.log('vocalize: ' + this.vocalization); } } } }); angular.module('app', ['animal']) .factory('Dog', function (Animal) { function ngDog(){ this.prop = 'my prop 1'; this.myMethod = function(){ console.log('test 1'); } } return angular.extend(Animal('bark bark!'), new ngDog()); }) .factory('Cat', function (Animal) { function ngCat(){ this.prop = 'my prop 2'; this.myMethod = function(){ console.log('test 2'); } } return angular.extend(Animal('meooow'), new ngCat()); }) .controller('MainCtrl',function($scope,Cat,Dog){ $scope.cat = Cat; $scope.dog = Dog; console.log($scope.cat); console.log($scope.dog); //$scope.cat = Cat; }); 

works

Answer 1

This is a singleton, there is only one object, but it is introduced in many places. (objects are passed by reference to the method)

All of your Animal are object pointers that reference the same animal object that is a function in your case. Your Cat and Dog are objects created by this function.

Answer 2

Yes, the service is single point. The following code registers only one “M” for the console:

 function M() { console.log('M'); } function M1(m) { console.log(1); } function M2(m) { console.log(2); } angular.module('app', []) .service('M', M) .service('M1', ['M', M1]) .service('M2', ['M', M2]) .controller('MainCtrl',function(M1, M2){}); 

run it in jsbin

Answer 3

Let me give an example on single points in AngularJS. Suppose we have two controllers used in different parts of our one-page application:

 myApp.controller('mainController', ['$scope', '$log', function($scope, $log) { $log.main = 'First Var'; $log.log($log); }]); 

So now, if we go to a page controlled by the mainController , we will see this in the log:

As you can see, the log object now contains my first variable.

Now here is my second controller:

 myApp.controller('secondController', ['$scope', '$log', '$routeParams', function($scope, $log, $routeParams) { $log.secondVar = 'Second Var'; $log.log($log); }]); 

So, if you click on the second controlled page, you will see the following:

Return to the first page:

What do you do with these three steps?

They are one $log object entered into the application. And as Tony Alice said: "This is a big memory savings."

Thus, this service is called one-time, and each time we add new variables and parameters to the same object and do not add different objects for different parameters.

Answer 4

Your example uses factory , not service . Please note that provider also part of the game.

Best learning resource:

AngularJS: service vs provider vs factory

There is an explanatory explanation of Mishko Hevery and a practical example of a factory , service and provider . I highly recommend it .