javascript - AngularJS advanced caching techniques - Stack Overflow

admin管理员组

文章数量:1304960

I have read about $cacheFactory and when it es to $http it caches everything by url. Now, I have some more plex needs:

1. There is a list of items of some kind (User, Article, etc). This list is pulled from server and cached into cache.

2. When app requests single item it goes to cache and:

   2.1. If item with provided key exists it pulls from cache

   2.2. If item doesn't exist in cache list it goes to server and when get response from server puts this item to the cache list so next time it is pulled from the cache

3. When item is saved to database it gets some key (autonumber or guid) and when server resolves response :

   3.1. If item already exist in cache than item is merged/extended with server data

   3.2. If item doesn't exist in cache it is just simply added to the list

4. Application should check (every 10 seconds) if there is some new/updated/deleted items in list (created by other users) and refresh it (without significant impact to the current user work)

Now, 1-3 is easy and 4 should be initiated manually or put in some timer.

Additional plication is how to handle for search when you have unlimited number of query binations.

I have idea of how to develop all of these but I am wondering if there is already proven solution for AngularJs or generally for javascript and ajax calls.

I have read about $cacheFactory and when it es to $http it caches everything by url. Now, I have some more plex needs:

1. There is a list of items of some kind (User, Article, etc). This list is pulled from server and cached into cache.

2. When app requests single item it goes to cache and:

   2.1. If item with provided key exists it pulls from cache

   2.2. If item doesn't exist in cache list it goes to server and when get response from server puts this item to the cache list so next time it is pulled from the cache

3. When item is saved to database it gets some key (autonumber or guid) and when server resolves response :

   3.1. If item already exist in cache than item is merged/extended with server data

   3.2. If item doesn't exist in cache it is just simply added to the list

4. Application should check (every 10 seconds) if there is some new/updated/deleted items in list (created by other users) and refresh it (without significant impact to the current user work)

Now, 1-3 is easy and 4 should be initiated manually or put in some timer.

Additional plication is how to handle for search when you have unlimited number of query binations.

I have idea of how to develop all of these but I am wondering if there is already proven solution for AngularJs or generally for javascript and ajax calls.

• javascript
• caching
• angularjs

Share Improve this question Follow edited Oct 22, 2012 at 18:06 Andrej Kaurin asked Oct 22, 2012 at 13:11 Andrej KaurinAndrej Kaurin 11.6k1313 gold badges4747 silver badges5555 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

Probably need to create your own service to do that.

Something like (psuedo code, because I don't have a server to back any of this up)...

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);
               }
           }
      }
   };
});

Then in your controller you'd inject your service and use it like so:

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

Far as I could see, no one had made this yet, so I rolled my own, following standard use of $http and Restangular. Definitely fork and pull request if you'd like to add to it.

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

本文标签： javascriptAngularJS advanced caching techniquesStack Overflow