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:

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 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.

Answer 1

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