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

是的，服务是单身人士。以下代码只记录一个“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 3

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

        $orders = Order::where('orders.store_id', $store->id);
        $orders->join('order_product', 'orders.id', '=', 'order_product.order_id');
        $orders->join('products', 'products.id', '=', 'order_product.product_id');
        $orders->join('customers', 'order_product.order_id', '=', 'customers.order_id');
        $orders->join('addresses', 'customers.id', '=', 'addresses.customer_id');
        $orders->where('products.status', 1);
        $orders->where('orders.is_deleted', '0');

        if ($keyword) {
            $orders->where(function ($query) use ($keyword, $searchKeyword){
                $query->where('products.title', 'LIKE', $searchKeyword)
                      ->orWhere('orders.order_name', 'LIKE', $searchKeyword);

                if (strtolower($keyword) == 'enabled') {
                    $query->orWhere('orders.status', '=', 1);
                }elseif (strtolower($keyword) == 'disabled') {
                    $query->orWhere('orders.status', '=', 0);
                }

                return $query;
            });
        }

        $orders->groupby('orders.id');

        // Total orders
        $totalOrders = count($orders->get());

        $orders->orderBy($orderBy, $orderDirection)->skip($startFrom)->take($itemsPerPage);
        $orders = $orders->select([
            'orders.id',
            'orders.order_name',
            'products.title',
            'products.handle',
            'products.id as product_id',
            'orders.status'
        ])->get();

现在，如果我们转到通过myApp.controller('mainController', ['$scope', '$log', function($scope, $log) { $log.main = 'First Var'; $log.log($log); }]);控制器控制的页面，我们将在日志中看到：

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

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

mainController

因此，如果您点击受控制的第二页，您将看到：

现在回到第一页：

您对这3个步骤有何结论？

他们是一个注入应用程序的myApp.controller('secondController', ['$scope', '$log', '$routeParams', function($scope, $log, $routeParams) { $log.secondVar = 'Second Var'; $log.log($log); }]);对象。正如Tony Alicea所说：这是一个很大的记忆保存。

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

Answer 4

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

目前为止最好的学习资源：

AngularJS: Service vs provider vs factory

MiškoHevery有一个启发性的解释，以及factory，service和provider的实际例子。 强烈推荐。

Angularjs服务单身吗？

4 个答案: