8

I was trying to use angular-cache module into my project but not sure it is working properly or not. Below is the code –

angular.module('TrackerApp').factory('TrackerFactory', function ($resource, CacheFactory) {
    if (!CacheFactory.get('CenterCache')) {
        console.log('cache does not exists');
        CacheFactory.createCache('CenterCache', {
            maxAge: 5 * 60 * 1000,
            deleteOnExpire: 'aggressive'
        });
    }
    var centerCache = CacheFactory.get('CenterCache');
    var CenterClass = $resource(_ServiceBaseURL + 'api/Center/:id',{},{
        query: {
            method: 'GET',
            cache: centerCache,
            isArray:true
        }
    });
    CenterClass.GetMultipleAsObject = function () { return this.query(); };
    return {
        CenterClass: CenterClass
    };
});

On loading of app, it does print message in console that “cache does not exists” and it does create cache in local storage. It created below key in local storage-

“angular-cache.caches.CenterCache.keys” = [http://localhost/Services/Tracker/api/Center]

Another key is created

“angular-cache.caches.CenterCache.data.http:// localhost/Services/Tracker/api/Center” = mystoredvalue

Issues –

  1. On page refresh (f5), I do see the console message printed again and in http calls, I can see “Center” information is getting download, it is not picked from cache.
  2. On navigating from one page to another, I don’t see the console message getting printed. But I do see the "Center” api getting called. and data being downloaded in network tab. It should have picked from cache.

I feel it is not picking data from cache. Am I missing something?

Community
  • 1
  • 1
sunder
  • 1,803
  • 4
  • 29
  • 50
  • 1
    for Issue 2: This is not an issue, this is how it is supposed to work. Services/factories are singletons and only get created once. So after it got created the first page you navigated to (and that message is logged), you won't see the message again, unless you reload the page. – CShark Aug 13 '17 at 23:05
  • 1
    based on the code you posted, for Issue 1, this is expected behavior because the cache you declared is in-memory, so if you refresh the page, then the cache will be cleared. So when you make a request, the result will not be found in the cache the first time. See [this working example](https://plnkr.co/edit/44OboEGNjEYymQWQVwPd?p=info). Does this match what you are trying to do, or if not, can you be more clear on what isn't working? – CShark Aug 13 '17 at 23:41
  • Look, it is working only when you make multiple calls for same api on same page. It is not working (mean not picking data from cache and calling api), when you navigate from one page to another. On refresh of page, it again download the data. Actually it should pick data from cache and say, "From Cache" like gmail. Or it could be my mistakes in implementations. – sunder Aug 14 '17 at 04:24
  • Issue 2. If data is cached in local storage, but on navigation from one page to another, if you app keep downloading it again and again then what is the use of caching. **Below is from official documentation Note: angular-cache does not automatically load meta data about previously created caches from the defined storage system. This means that on a page refresh this function will return undefined. To 'reload' an existing cache simply re-create the cache with the same name every time your app loads, and the cache will possibly load any data that was previously saved under that cache's name.** – sunder Aug 14 '17 at 04:35
  • It's not gonna print anything, or say anything when it's getting from cache. You just won't see a request sent in the network tab, because it didn't need to. If you're talking about when you've seen From Cache in the network tab, thats because it is getting that data from the built-in browser cache. This package is separate from that. – CShark Aug 14 '17 at 22:00
  • 1
    Can you post an example of where it is not being cached just navigating page to page, because I can't reproduce that. – CShark Aug 14 '17 at 22:21

1 Answers1

1

Maybe you choose to use this structure;

angular.module('cacheApp', []).
controller('CacheCtrl', ['$scope', '$cacheFactory', function($scope, $cacheFactory) {
  $scope.keys = [];
  // get cacheFactory
  $scope.cache = $cacheFactory('CenterCache');
  // Custom put
  // call function key and value
  $scope.put = function(key, value) {

  // Control cache
    if (angular.isUndefined($scope.cache.get(key))) {
      $scope.keys.push(key);
    }

   // Fill cache
    $scope.cache.put(key, angular.isUndefined(value) ? null : value);
  };
}]);

if you want to use cookieStore

angular.module('cookieStoreExample', ['ngCookies'])
.controller('ExampleController', ['$cookieStore', function($cookieStore) {

  // Fill cookie
  $cookieStore.put('CenterCache', yourObject );


  // Get cookie
  var favoriteCookie = $cookieStore.get('CenterCache');

  //If you want
  // Removing a cookie
  $cookieStore.remove('CenterCache');
}]);
Kamboçyalı
  • 21
  • 3