[angularjs] 모든 컨트롤러에서 기능을 각도로 사용할 수 있습니까?

Program / 글쓴이

유틸리티 함수가있는 경우 선언 foo내 어디에서나 호출 할 수 있습니다 ng-app. 어쨌든 모듈 설정에서 전역 적으로 액세스 할 수 있습니까? 아니면 모든 컨트롤러의 범위에 추가해야합니까?

답변

기본적으로 서비스로 정의하거나 루트 범위에 배치하는 두 가지 옵션이 있습니다. 루트 범위를 오염시키지 않도록 서비스를 제공하는 것이 좋습니다. 서비스를 작성하고 다음과 같이 컨트롤러에서 사용 가능하게하십시오.

<!doctype html>
<html ng-app="myApp">
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.angularjs.org/1.1.2/angular.min.js"></script>
    <script type="text/javascript">
    var myApp = angular.module('myApp', []);

    myApp.factory('myService', function() {
        return {
            foo: function() {
                alert("I'm foo!");
            }
        };
    });

    myApp.controller('MainCtrl', ['$scope', 'myService', function($scope, myService) {
        $scope.callFoo = function() {
            myService.foo();
        }
    }]);
    </script>
</head>
<body ng-controller="MainCtrl">
    <button ng-click="callFoo()">Call foo</button>
</body>
</html>

이것이 옵션이 아닌 경우 다음과 같이 루트 범위에 추가 할 수 있습니다.

<!doctype html>
<html ng-app="myApp">
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.angularjs.org/1.1.2/angular.min.js"></script>
    <script type="text/javascript">
    var myApp = angular.module('myApp', []);

    myApp.run(function($rootScope) {
        $rootScope.globalFoo = function() {
            alert("I'm global foo!");
        };
    });

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

    }]);
    </script>
</head>
<body ng-controller="MainCtrl">
    <button ng-click="globalFoo()">Call global foo</button>
</body>
</html>

이렇게하면 모든 globalFoo()템플릿을 컨트롤러에서 템플릿으로 전달하지 않고도 호출 할 수 있습니다 .

답변

당신은 또한 내가 생각하는 그들을 결합 할 수 있습니다 :

<!doctype html>
<html ng-app="myApp">
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.angularjs.org/1.1.2/angular.min.js"></script>
    <script type="text/javascript">
        var myApp = angular.module('myApp', []);

        myApp.factory('myService', function() {
            return {
                foo: function() {
                    alert("I'm foo!");
                }
            };
        });

        myApp.run(function($rootScope, myService) {
            $rootScope.appData = myService;
        });

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

        }]);

    </script>
</head>
<body ng-controller="MainCtrl">
    <button ng-click="appData.foo()">Call foo</button>
</body>
</html>

답변

첫 번째 접근법은 ‘각도 같은’접근법으로 옹호되지만 이것이 오버 헤드를 추가한다고 생각합니다.

이 myservice.foo 함수를 10 개의 다른 컨트롤러에서 사용하고 싶은지 고려하십시오. 이 ‘myService’종속성을 지정한 다음 열 범위에서 $ scope.callFoo 범위 속성을 지정해야합니다. 이것은 단순히 반복이며 어떻게 든 DRY 원칙을 위반합니다.

반면 $ rootScope 접근 방식을 사용하면이 전역 함수 gobalFoo를 한 번만 지정하면 아무리 많은 미래 컨트롤러에서도 사용할 수 있습니다.

답변

AngularJS와는 “이 서비스 “와 ” 공장 글로벌 뭔가가하는 데 사용되는 단지 yours.These 같은 문제를” 컨트롤러, 지침, 기타 서비스 또는 기타 AngularJS와 구성 요소 사이의 ..You 함수를 정의 할 수 있습니다, 데이터를 저장, 메이크업의 계산 기능 또는 당신이 무엇을 내부 서비스를 원 하고 AngularJs 구성 요소에서 전역으로 사용하십시오 .

angular.module('MyModule', [...])
  .service('MyService', ['$http', function($http){
    return {
       users: [...],
       getUserFriends: function(userId){
          return $http({
            method: 'GET',
            url: '/api/user/friends/' + userId
          });
       }
       ....
    }
  }])

더 필요한 경우

왜 AngularJs 서비스 및 팩토리가 필요한지 더 자세히 알아보십시오

답변

나는 Angular에 대해 조금 더 새로운 것이지만 내가하는 유용한 (그리고 매우 간단한) 것은 전역 스크립트를 로컬 스크립트보다 먼저 모든 페이지에서 액세스 해야하는 전역 변수로 내 페이지에로드하는 전역 스크립트를 만든 것입니다. 이 스크립트에서 “globalFunctions”라는 객체를 만들고 전역 적으로 속성으로 액세스해야하는 함수를 추가했습니다. 예 globalFunctions.foo = myFunc();. 그런 다음 각 로컬 스크립트에서 작성 $scope.globalFunctions = globalFunctions;하고 전역 스크립트의 globalFunctions 객체에 추가 한 모든 기능에 즉시 액세스 할 수 있습니다.

이것은 약간의 해결 방법이며 도움이 될지 확실하지 않지만 많은 기능을 가지고있어 각 페이지에 모든 기능을 추가하는 데 어려움이있었습니다.

답변