각도로 모든 컨트롤러에서 기능을 사용할 수 있습니까?
유틸리티 기능이 있는 경우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>
첫 번째 접근법은 '각선 같은' 접근법으로 주장되지만, 나는 이것이 오버헤드를 증가시킨다고 생각한다.
이 서비스를 사용할지 여부를 고려합니다.10개의 다른 컨트롤러에서 foo 기능을 수행합니다.이 'myService' 의존관계를 지정한 후 $scope.callFoo 스코프 속성을 10개 모두 지정해야 합니다.이는 단순히 반복일 뿐이며 DRY 원칙을 위반하는 것입니다.
한편 $rootScope 접근방식을 사용하는 경우 이 글로벌함수 gobalFoo를 1회만 지정하면 수에 관계없이 향후 모든 컨트롤러에서 사용할 수 있습니다.
AngularJs에는 고객님의 문제만을 위한 "서비스"와 "팩토리"가 있습니다.컨트롤러, Directives, Other Services 또는 기타 angularjs 컴포넌트 간에 글로벌한 정보를 제공하기 위해 사용됩니다.함수를 정의하거나 데이터를 저장하거나 서비스 내에서 함수를 계산하거나 원하는 모든 기능을 만들어 AngularJs 구성 요소에서 Global로 사용할 수 있습니다.맘에 들다
angular.module('MyModule', [...])
.service('MyService', ['$http', function($http){
return {
users: [...],
getUserFriends: function(userId){
return $http({
method: 'GET',
url: '/api/user/friends/' + userId
});
}
....
}
}])
더 필요하시면
AngularJS 서비스 및 공장이 필요한 이유 상세보기
저는 Angular에 대해 조금 처음이지만 도움이 되는 것은 글로벌스크립트를 작성해서 로컬스크립트 앞에 로드하고 모든 페이지에서 액세스해야 하는 글로벌 변수를 포함한 글로벌스크립트를 작성했습니다.이 스크립트에서 "global Functions"라는 개체를 만들고 글로벌하게 액세스해야 하는 기능을 속성으로 추가했습니다.globalFunctions.foo = myFunc(); 각 '아,아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아!$scope.globalFunctions = globalFunctions;글로벌 스크립트의 globalFunctions 객체에 추가한 기능에 즉시 액세스할 수 있습니다.
이것은 조금 회피책으로 도움이 될지는 모르겠지만, 저는 많은 기능을 가지고 있고 각 페이지에 모든 기능을 추가하는 것이 힘들었기 때문에 확실히 도움이 되었습니다.
언급URL : https://stackoverflow.com/questions/15025979/can-i-make-a-function-available-in-every-controller-in-angular
'codememo' 카테고리의 다른 글
| 각도의 ng클릭 이벤트 위임 (0) | 2023.03.19 |
|---|---|
| Angular 전개 방법JS 앱과 Spring Restful API 서비스가 동일한 도메인/서버에 있습니까? (0) | 2023.03.19 |
| 레일 link_to: (0) | 2023.03.19 |
| WP_Query('orderby=post_date')가 워드프레스와 함께 작동하지 않습니다. (0) | 2023.03.19 |
| 오류 'babel-core' 모듈을 찾을 수 없습니다.react.displays, webpack 및 express 서버 사용 (0) | 2023.03.19 |