Angularjs 服务是单例的吗？

Question

在reference我读到：

最后，重要的是要意识到所有 Angular 服务都是 应用程序单例。这意味着只有一个实例 每个注入器都有一个给定的服务。

但是用这个简单的代码似乎不是单例

'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;
                });

我有点困惑，你能解释一下这是怎么回事吗？

更新 1 也许我不是棚子里最锋利的工具 但是在@Khanh 回复之后会更好 参考文献中的解释不是很清楚。

更新 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;
                });

BOOM 这是一个单例！

更新 3

如果你喜欢

'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;
                });

有效

Answer 1

它是单例的，只有一个对象，但是被注入到很多地方。 （对象通过引用方法传递）

你所有的Animal 都是对象指针，指的是同一个动物对象，在你的情况下这是一个函数。 你的Cat 和Dog 是这个函数构造的对象。

Answer 2

您的示例使用factory，而不是service。请注意，provider 也是游戏的一部分。

迄今为止最好的学习资源：

AngularJS: Service vs provider vs factory

Miško Hevery 给出了一个启发性的解释，以及factory、service 和provider 的实际示例。 强烈推荐。

Answer 3

是的，服务是单例的。以下代码仅将一个“M”记录到控制台：

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 4

让我举一个关于 AngularJS 中的单例的例子。 假设我们在单页应用程序的不同部分使用了 2 个控制器：

myApp.controller('mainController', ['$scope', '$log', function($scope, $log) {

    $log.main = 'First Var';
    $log.log($log);

}]);

所以现在如果我们转到通过mainController 控制器控制的页面，我们将在日志中看到：

如您所见，日志对象现在包含我的第一个变量。

现在这是我的第二个控制器：

myApp.controller('secondController', ['$scope', '$log', '$routeParams', function($scope, $log, $routeParams) {

    $log.secondVar = 'Second Var';
    $log.log($log);

}]);

所以如果你点击被控制的第二个页面，你会看到：

现在回到第一页：

您对这 3 个步骤有何看法？

它们是注入到应用程序中的一个$log 对象。正如 Tony Alicea 所说：这是一个很大的内存节省。

所以这个服务，被调用一次，每次我们都在为同一个对象添加新的变量和参数，而不是为不同的参数添加不同的对象。