我该如何扩展服务

时间:2013-03-08 12:24:19

标签: javascript angularjs

我是angularjs的新手,我无法找到任何文档或示例。我要做的是扩展基本服务,以便我可以使用其他服务的基本服务定义的方法。例如,假设我有一项基本服务如下。

angular.module('myServices', []).

    factory('BasicService', function($http){
        var some_arg = 'abcd'
        var BasicService = {
            method_one: function(arg=some_arg){ /*code for method one*/},
            method_two: function(arg=some_arg){ /*code for method two*/},
            method_three: function(arg=some_arg){ /*code for method three*/},
        });
        return BasicService;
    }   
);

现在我想定义一个从上面BasicService扩展的扩展服务,以便我可以使用扩展服务中BasicService下定义的方法。也许是这样的:

    factory('ExtendedService', function($http){
        var ExtendedService = BasicService();
        ExtendedService['method_four'] = function(){/* code for method four */}
        return ExtendedService;
    }

6 个答案:

答案 0 :(得分:68)

更清洁和势在必行的方式

.factory('ExtendedService', function($http, BasicService){

    var extended = angular.extend(BasicService, {})
    extended.method = function() {
        // ...
    }
    return extended;
}

答案 1 :(得分:21)

您的ExtendedService应该注入BasicService以便能够访问它。除了BasicService是一个对象文字,所以你实际上不能将它称为函数(BasicService())。

.factory('ExtendedService', function($http, BasicService){
  BasicService['method_four'] = function(){};
  return BasicService;
}

答案 2 :(得分:18)

在我看来,更好的方法:

.factory('ExtendedService', function($http, BasicService){
    var service = angular.copy(BasicService);

    service.methodFour = function(){
        //code for method four
    };

    return service;
});

这里至少不会改变继承的服务。

答案 3 :(得分:3)

很抱歉,如果我在这里发帖,但可能是一个好地方。 我引用了这个post

注意扩展服务/工厂因为是单身人士 所以你可以延长服务/工厂一次。

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

但如果你喜欢

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

它有效

答案 4 :(得分:1)

我编写了一个$ extend扩展提供程序,它使用Backbone的扩展 - 所以你可以获得原型和静态属性,以备你需要时使用它们 - 另外你得到父/子构造函数 - 请参阅gist @ {{3} }

答案 5 :(得分:-1)

要扩展Stewie的答案,您还可以执行以下操作:

.factory('ExtendedService', function($http, BasicService){
    var service = {
        method_one: BasicService.method_one,
        method_two: BasicService.method_two,
        method_three: BasicService.method_three,
        method_four: method_four
    });

    return service ;

    function method_four(){

    }
}

这样做的好处是原始服务不会被改变,同时保持其功能。您还可以选择在ExtendedService中为BasicService中的其他3个方法使用您自己的实现。