AngularJS를 사용하여 $ http $ cache를 프라임하는 방법

Question

사용자가 내 사이트의 메인 페이지에 로그인하면 일반적으로 홈페이지에 꽤 많은 데이터가로드됩니다. 그들이 페이지의 특정 URL에 올 때보 다 훨씬 더. 그들이 ome 페이지를 조회 할 때 실제로 특정 페이지를 조회 할 때 개별적으로 수집하는 많은 데이터의 데이터 요청을 채 웁니다.

저는 $ http 모듈이 $ cache와 어떻게 작동하는지 알고 싶습니다. 개인 홈페이지에서 알 수있는 통화 캐시를 채우기 위해 홈 페이지의 히트 정보를 사용하고 싶습니다.

예를 들어, 내 홈 페이지는/rest/client/101을 호출하는 동안 모든 클라이언트를 반환하는/rest/clients를 호출합니다. 내가 원하는 것은/rest/clients가 먼저 호출 된 다음/rest/client/101이 새로운 신선한 xhr 호출이 호출 될 필요가 없지만 캐시로부터 데이터를 얻을 수 있도록하는 것이다./rest/client/101이 이미 호출 된 경우.

전 데코레이터를 한 적이 없지만 $ http 서비스의 데코레이터라고 생각하고 있습니까? $ http 코드를 살펴 봤는데 캐시가 실제 http 호출의 클로저에 저장되어있는 것처럼 보였고 다음 Get을 제외하고는 노출되지 않았습니다.

누구든지 이와 유사합니까? 나는 그것을 발견 할 수 없었다. 특정 의사 코딩 제안은 매우 환영받을 것입니다.

.factory('myOwnEntity', ['$filter', 
     function ($filter) { 
      var myOwnList = []; 
      return { 
       set : function (data) { 
        myOwnList = data; 
       }, 
       get : function() { 
        return myOwnList; 
       }, 
       find : function (id) { 
        return $filter('filter')(myOwnList, { itemId : id }).pop(); 
       } 
      } 
     } 
    ]) 

나는 웹 서비스에 청원을 할 때, 나는 다음과 같은 정보를 저장 :이 코드를

: 나는 당신을 잘 이해한다면

Answer 1

데이터 서비스에는 getAll 및 getOne이라는 두 가지 메소드가 있습니다.

서비스에서 getAll results promise에 대한 참조를 정의하십시오.

그런 다음 getOne 서비스에서 해당 약속이 존재하는지 확인하고 getOne 필요를 충족시키는 데 필요한 항목 하나를 필터링하는 데 사용하는지 확인하십시오.

module.service('dataService', function($http){ 
    var getAllPromise = null; 

    this.getAll = function(){ 
    if (getAllPromise !== null){ 
     getAllPromise; 
    } 

    getAllPromise = $http.get('clients'); 
    return getAllPromise 
    }; 

    this.getOne = function(id){ 
    if (getAllPromise !== null){ 
     return getAllPromise 
     .then(function(allData){ 
      //logic here to find the one in the full result set 
      return theFoundItem; 
     }; 
    } 

    return $http.get('clients/' + id); 
    }; 
}); 

Answer 2

, 나는 비슷한 짓을

$http.get(url, { 
    cache : true 
}) 
.success(function (data) { 
    myOwnEntity.set(data); 
    defer.resolve(data); 
}); 
return defer.promise; 

이제 다음에 정보가 필요하면 find 메서드로 내 개체를 쿼리합니다. 희망이 당신이 찾고있는 것입니다.

Answer 3

나는 해결책을 찾았지 만 구현하고 테스트 할 수있게 만드는 것은 내 기술을 넘어서는 것으로 증명됩니다. @brocco 해결책으로 갈 것이지만 영구 기록을 위해 나는 내가 묻고있는 것에 실제적인 대답을 남기고있다. @brocco 솔루션이 내 실제 문제에 더 좋기 때문에 이것을 올바른 해결책으로 표시하지 않습니다. 그래서 도움을 청합니다.

아래에서 볼 수있는 것은 기본적으로 $ cacheFactory를 사용하여 $ 캐시를 만드는 것입니다. 그런 다음 새 캐시 개체의 .put 메서드를 사용하여 캐시를 준비합니다. 그런 다음 client/1 url에 대한 후속 호출은 실제 라이브에서 cache/1을 호출 할 필요없이 cache'd 레코드를 가져옵니다. 캐시는 첫 번째 큰 호출에서 for 루프로로드됩니다.

감사합니다.

var myApp = angular.module('myApp', []); 

    myApp.factory('speakersCache', function($cacheFactory) { 
     return $cacheFactory('speakersCacheData'); 
    }); 


    myApp.controller('personController', ['$scope','$http','speakersCache', function ($scope,$http,speakersCache) { 

     $scope.getAllSpeakers = function() { 

      $http.get('speakers.json',{cache: speakersCache}). 
       success(function (data, status, headers, config) { 

        debugger; 
        var i; 
        for(i=0;i<data.length;i++) { 
         var url = 'speaker/' + i; 
         speakersCache.put(url, data[i]); 
        } 
       }). 
       error(function (data, status, headers, config) { 
        // called asynchronously if an error occurs 
        // or server returns response with an error status. 
       }); 
     }; 

     $scope.getAllSessions = function() { 

      $http.get('sessions.json',{cache: speakersCache}). 
       success(function (data, status, headers, config) { 
        debugger; 

       }). 
       error(function (data, status, headers, config) { 
        // called asynchronously if an error occurs 
        // or server returns response with an error status. 
       }); 
     }; 

     $scope.getOneSpeaker = function() { 
      $http.get('speaker/1',{cache: speakersCache}). 
       success(function (data, status, headers, config) { 
        debugger; 

       }). 
       error(function (data, status, headers, config) { 
        debugger; 
       }); 
     } 

     $scope.checkit = function() { 

      var x = speakersCache; 
      debugger; 

     }; 




    }]);