2012-09-07 3 views
3

내 앱에 여러 개의보기가 있고 각보기에 컨트롤러가 있습니다.AngularJS 쿼리 리소스를 한 번 사용하고 앱 전체에 데이터 사용

표준 JSON 배열을 반환하는 여러 API 리소스가 있습니다.보기가 변경 될 때마다 리소스가 새로운 데이터에 대해 다시 쿼리됩니다. 이는 상당히 느립니다. 매번 다시 질의하지 않고 API 리소스를 컨트롤러에 제공하고 싶습니다.

가장 좋은 방법은 무엇입니까?

+1

서비스를 사용하는 IMO (http://docs.angularjs.org/guide/dev_guide.services)는 컨트롤러간에 리소스를 공유하는 표준 방법입니다. 기본적으로 주사 할 수있는 싱글 톤입니다. – Tosh

답변

2

내가 올바르게 이해한다면 이것은 무엇을위한 것입니다. 그것들은 컨트롤러가 데이터를 공유하는 것과 같은 종류입니다.

내가이 튜토리얼에 사용 된 코드에 대한 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 
    } 
) 
+0

이것은 거의 작동하지만 어쨌든 서비스 내부의 리소스를 쿼리 할 수 ​​있습니까? 내가 그들을 조작하려고하면 그냥 빈 배열을 얻을 것 - 비록 내가 쿼리() 내부 콜백을 사용합니다. – David

+0

어쨌든 답을 표시 하겠지만, 지금 당장 해결할 수있는 가장 쉬운 방법입니다. 비디오를 보내 주셔서 감사합니다. – David

+0

서비스 내에서 리소스를 사용하는 일부 코드를 추가했습니다. – Justen

0
  1. 장소 공유 자원 (이 거의 항상 당신이 컨트롤러간에 데이터를 공유하는 방법입니다).
  2. 비싼 쿼리를 한 번만 수행하면되므로 결과를 서비스 내에 캐시하십시오.

$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를 사용하고 있습니다. 아마도 이것도 포함될 것입니다.

관련 문제