내 앱에 여러 개의보기가 있고 각보기에 컨트롤러가 있습니다.AngularJS 쿼리 리소스를 한 번 사용하고 앱 전체에 데이터 사용
표준 JSON 배열을 반환하는 여러 API 리소스가 있습니다.보기가 변경 될 때마다 리소스가 새로운 데이터에 대해 다시 쿼리됩니다. 이는 상당히 느립니다. 매번 다시 질의하지 않고 API 리소스를 컨트롤러에 제공하고 싶습니다.
가장 좋은 방법은 무엇입니까?
내 앱에 여러 개의보기가 있고 각보기에 컨트롤러가 있습니다.AngularJS 쿼리 리소스를 한 번 사용하고 앱 전체에 데이터 사용
표준 JSON 배열을 반환하는 여러 API 리소스가 있습니다.보기가 변경 될 때마다 리소스가 새로운 데이터에 대해 다시 쿼리됩니다. 이는 상당히 느립니다. 매번 다시 질의하지 않고 API 리소스를 컨트롤러에 제공하고 싶습니다.
가장 좋은 방법은 무엇입니까?
내가 올바르게 이해한다면 이것은 무엇을위한 것입니다. 그것들은 컨트롤러가 데이터를 공유하는 것과 같은 종류입니다.
내가이 튜토리얼에 사용 된 코드에 대한 jsfiddle을 통해 보았다 :http://onehungrymind.com/angularjs-communicating-between-controllers/
var myModule = angular.module('myModule', []);
myModule.factory('mySharedService', function($rootScope) {
var sharedService = {};
sharedService.message = '';
sharedService.prepForBroadcast = function(msg) {
this.message = msg;
this.broadcastItem();
};
sharedService.broadcastItem = function() {
$rootScope.$broadcast('handleBroadcast');
};
return sharedService;
});
function ControllerZero($scope, sharedService) {
$scope.handleClick = function(msg) {
sharedService.prepForBroadcast(msg);
};
$scope.$on('handleBroadcast', function() {
$scope.message = sharedService.message;
});
}
function ControllerOne($scope, sharedService) {
$scope.$on('handleBroadcast', function() {
$scope.message = 'ONE: ' + sharedService.message;
});
}
function ControllerTwo($scope, sharedService) {
$scope.$on('handleBroadcast', function() {
$scope.message = 'TWO: ' + sharedService.message;
});
}
ControllerZero.$inject = ['$scope', 'mySharedService'];
ControllerOne.$inject = ['$scope', 'mySharedService'];
ControllerTwo.$inject = ['$scope', 'mySharedService'];
편집
자원 전화를 들어, 지금은 그 서비스가 이런 식으로 사용합니다. 유감 서비스로는 커피 스크립트에
.factory('EventService', (SubEvent, User) ->
subevents = {}
return {
getSubevent: (subevent_id) ->
SubEvent.get {subevent_id: subevent_id}, (subevent) ->
participants = (participant.user for participant in subevent.participants)
User.query {participants: participants}, (users) ->
for user,i in users
subevent.participants[i].user = user
subevents[subevent_id] = subevent
}
)
$http
과 $resource
은 모두 캐싱을 지원하므로 사용자가 직접 캐싱을 작성할 필요가 없습니다. 기본 캐싱 동작을 조정하려면 $cacheFactory
을 확인하십시오.
var app = angular.module('app', ['ngResource']);
app
.factory('Worklogs', function($resource) {
return $resource('/tempo/worklogs', {}, {
'query': {method:'GET', isArray:true, cache: true}
});
})
.controller('FirstCtrl', function($scope, Worklogs, $log, $filter){
$scope.search = SearchParameters;
$scope.worklogs = Worklogs.query({dateFrom: $scope.search.dateFrom, dateTo: $scope.search.dateTo});
})
.controller('SecondCtrl', function($scope, Worklogs, $log, $filter){
$scope.search = SearchParameters;
$scope.worklogs = Worklogs.query({dateFrom: $scope.search.dateFrom, dateTo: $scope.search.dateTo});
})
컨트롤러로드 때마다 새로운 매개 변수가 query()
에 전달되는 처음의 Worklogs 서비스가 HTTP 요청을한다 :
는 여기에 내가 일하고 있어요 응용 프로그램에서 예입니다. 컨트롤러가 변경되고 이전 쿼리가 반복 될 때마다 작업 로그가 캐시에서로드되고 HTTP 요청이 이루어지지 않습니다.
1.0.x 분기에 멋진 것들이 누락되어 있기 때문에 AngularJS 1.1.5를 사용하고 있습니다. 아마도 이것도 포함될 것입니다.
서비스를 사용하는 IMO (http://docs.angularjs.org/guide/dev_guide.services)는 컨트롤러간에 리소스를 공유하는 표준 방법입니다. 기본적으로 주사 할 수있는 싱글 톤입니다. – Tosh