2012-10-22 3 views
2

$ cacheFactory에 대해 읽었으며 $ http에 관해서는 URL로 모든 것을 캐시합니다. 지금, 나는 좀 더 복잡한 요구 사항이 : 어떤 종류의 (등 사용자 제)의 항목의 목록이 있습니다AngularJS 고급 캐싱 기법

  1. . 이 목록은 서버에서 가져와 캐시로 캐시됩니다.

    2.1 : 응용 프로그램이 단일 항목을 요청하면

  2. 그것은 캐시와 간다. 제공된 키가있는 항목이 있으면 캐시에서 가져옵니다.

    2.2. 캐시 목록에 항목이 없으면 서버로 이동하고 서버에서 응답을 받으면 다음에 캐시에서이 항목을 캐쉬 목록에 넣습니다.

  3. 항목이 데이터베이스에 저장되면 항목이 데이터베이스에 저장됩니다 (자 동 번호 또는 GUID) 및 서버가 응답을 해결할 때 :

    3.1. 항목보다 캐시에 항목이 이미있는 경우 서버 데이터와 병합/확장됩니다.

    3.2. 항목이 캐시에 없으면 목록에 추가됩니다.

  4. 목록에 새 항목/업데이트 된 항목/삭제 된 항목 (다른 사용자가 만든 항목)이 있는지 확인하고 새로 고쳐야합니다 (현재 사용자 작업에 큰 영향 없음)

이제 1-3은 쉽고 4는 수동으로 시작하거나 타이머를 넣어야합니다.

추가 복잡성은 쿼리 조합을 무제한으로 사용할 때 검색을 처리하는 방법입니다.

나는 이들 모두를 개발하는 방법에 대한 아이디어가 있지만 AngularJs 또는 일반적으로 javascript 및 ajax 호출에 대해 이미 입증 된 솔루션이 있는지 궁금합니다.

답변

9

아마도 자신의 서비스를 만들어야 할 것입니다.

(사이비 코드, 나는이 최대 중 하나를 백업하는 서버가 없기 때문에) 같은

뭔가 ...

app.factory('andrejsSuperAwesomeService', ['$cacheFactory', '$http', function($cacheFactory, $http) { 

    //get your cache ready. 
    var userCache = $cacheFactory('users'); 

    // start an interval to check for data. 
    // TODO: add a public function to turn this on and off. 
    setInterval(function(){ 
     //check for changes to the data. 
     $http.get('/Get/New/User/Changes') 
      .success(function(changes) { 
       if(!changes) return; 
       //we'll assume we get some collection of changes back, 
       // with some change type and the user data. 
       for(var i = 0; i < changes.length; i++) { 
         var change = changes[i]; 
         switch(change.changeType) { 
          case 'delete': 
          // okay just remove the deleted ones. 
          userCache.remove(change.user.id); 
          break; 
          case 'addUpdate': 
          // if it's added or updated, let's just 
          // remove and re-add it, because we can't know what 
          // we already have or don't have. 
          userCache.remove(change.user.id); 
          userCache.put(chnage.user.id, change.user); 
          break; 
         } 
       } 
      }); 
    }, 10000); // every 10 secs 
    return { 
     users: { 
      //a function to get a user. 
      get: function(userId, callback) { 
       var user = userCache.get(userId); 

       if(!user) { 
        //the user is not in the cache so let's get it. 
        $http.get('/Uri/To/Get/A/User?userId=' + userId) 
         .success(function(data) { 
          //great, put it in the cache and callback. 
          userCache.put(userId, data); 
          if(callback) callback(data); 
         }); 
       } else { 
        //we already have the user, callback. 
        if(callback) callback(data); 
       } 
      } 
     } 
    }; 
}); 

그런 다음 컨트롤러에 당신이 당신의 서비스를 주입하는 것 등처럼 사용 : 내가 볼 수 있기 때문에

andrejsSuperAwesomeService.users.get(12345, function(user) { 
     //do something with user here. 
     alert(user.name + ' is a naughty user!'); 
}); 
+0

이 서비스 사용을 만들 수는 당신이 그것을 집어됩니다 기대보다는 $ 범위를 사용할 수 있도록 $ 간격 지침을 angulars – DrogoNevets

0

멀리, 아무도 아직이 이루어지지했다, 그래서 나는 $ HTTP 및 Restangular의 표준을 따르는, 내 자신을 출시했다. 추가하려는 경우 확실히 포크 및 당겨 요청하십시오.

https://github.com/learnist/angular-cache-proxy