programing

Angularjs 서비스는 싱글톤입니까?

yellowcard 2023. 3. 31. 21:58
반응형

Angularjs 서비스는 싱글톤입니까?

참고 자료에서 다음과 같이 읽습니다.

마지막으로, 모든 Angular 서비스가 애플리케이션 싱글톤임을 인식하는 것이 중요합니다.즉, 인젝터당 특정 서비스의 인스턴스는 1개뿐입니다.

하지만 이 간단한 코드로는 싱글톤이 아닌 것 같습니다.

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

쾅! 싱글톤!

업데이트 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;
                });

그건 효과가 있다.

싱글톤으로, 물체는 하나뿐이지만, 여러 곳에 주입됩니다.(메서드를 참조함으로써 전달됨)

당신의 모든 것Animal는 같은 동물 객체를 참조하는 오브젝트 포인터이며, 이 경우 함수입니다.당신의.Cat그리고.Dog는 이 함수에 의해 생성된 객체입니다.

네, 서비스는 싱글톤입니다.다음 코드는 콘솔에 "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){});

jsbin으로 실행하다

AngularJS의 싱글톤에 대한 예를 들어보겠습니다.1페이지 어플리케이션의 다른 부분에서 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);

}]);

제어된 두 번째 페이지를 클릭하면 다음과 같이 표시됩니다.

여기에 이미지 설명 입력

이제 첫 페이지로 돌아갑니다.

여기에 이미지 설명 입력

이 세 가지 단계에 대해 어떤 결론을 내립니까?

그들은 하나다.$log오브젝트가 앱에 삽입됩니다.토니 앨리스가 말했듯이이것은 큰 메모리 절약입니다.

이 서비스는 1회라고 불리며 매번 같은 오브젝트에 새로운 변수와 파라미터를 추가하고 파라미터에 따라 다른 오브젝트를 추가하지 않습니다.

이 예에서는factory, 가 아닙니다.service주의해 주세요.provider게임의 일부이기도 합니다.

지금까지 최고의 학습 자원:

AngularJS: 서비스 vs 프로바이더 vs 팩토리

Mishko Hebery의 계몽적인 설명과 실제적인 예가 있습니다.factory,service그리고.provider. 강력추천합니다.

언급URL : https://stackoverflow.com/questions/21496331/are-angularjs-services-singleton

반응형