source

서비스 확장 방법

lovecheck 2023. 3. 8. 21:17
반응형

서비스 확장 방법

나는 이것에 대한 문서나 예시를 찾을 수 없고 꽤 새로운 것이다.제가 원하는 것은 기본 서비스를 확장하여 다른 서비스로부터 기본 서비스에 정의된 방식을 사용할 수 있도록 하는 것입니다.예를 들어 다음과 같은 기본적인 서비스가 있다고 합시다.

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확장 서비스에서 Basic Service에 정의된 메서드를 사용할 수 있습니다.예를 들어 다음과 같습니다.

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

보다 깔끔하고 필수적인 방법

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

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

당신의.ExtendedService를 주입해야 합니다.BasicService접속할 수 있도록 하기 위해서요.그 옆에BasicService는 오브젝트 리터럴이기 때문에 실제로는 함수라고 부를 수 없습니다(BasicService()).

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

내 생각에, 더 나은 방법은:

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

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

    return service;
});

적어도 상속된 서비스는 변경되지 않습니다.

여기에 글을 올리면 미안하지만 좋은 장소일 수도 있어요. 게시물을 참조합니다.

서비스/공장 연장에 주의하세요.싱글톤이기 때문에 서비스/공장을 한 번 확장할 수 있습니다.

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

그건 효과가 있다.

저는 Backbone의 확장을 사용하는 $120 프로바이더를 썼습니다.필요한 경우 프로토타입과 정적 속성을 모두 사용할 수 있습니다.또한 부모/자녀 컨스트럭터도 사용할 수 있습니다.요지 https://gist.github.com/asafebgi/5fabc708356ea4271f51를 참조해 주세요.

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(){

    }
}

이 기능은 그대로 유지하면서도 원래 서비스는 변경되지 않는다는 장점이 있습니다.Basic Service의 다른 3가지 메서드에 대해서는 Extended Service에서 자체 구현을 사용할 수도 있습니다.

언급URL : https://stackoverflow.com/questions/15293943/how-can-i-extend-a-service

반응형