AngularJS advanced caching techniques

Question

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

There is a list of items of some kind (User, Article, etc). This list is pulled from server and cached into cache.
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
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
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 complication is how to handle for search when you have unlimited number of query combinations.

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.

Ben Lesh · Accepted Answer · 2012-10-22 18:06:51Z

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

you could make the service use angulars $interval directive allowing you to use $scope rather than hoping it gets picked up

Buck · Accepted Answer · 2015-01-27 20:26:30Z

0

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.com/learnist/angular-cache-proxy

answered Jan 27, 2015 at 20:26

Buck

1731 silver badge7 bronze badges

Collectives™ on Stack Overflow

AngularJS advanced caching techniques

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related