유틸리티 함수가있는 경우 선언 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 객체에 추가 한 모든 기능에 즉시 액세스 할 수 있습니다.
이것은 약간의 해결 방법이며 도움이 될지 확실하지 않지만 많은 기능을 가지고있어 각 페이지에 모든 기능을 추가하는 데 어려움이있었습니다.
답변
