Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

angular-cache not working as expected

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?

like image 676
sunder Avatar asked Aug 09 '17 05:08

sunder


People also ask

How do I change the path of the cache in angular?

For more information, see environment in cache options. The Angular CLI checks for the presence and value of the CI environment variable to determine in which environment it is running. By default, .angular/cache is used as a base directory to store cache results. To change this path to .cache/ng, run the following command:

How do I disable persistent disk cache in angular?

By default, .angular/cache is used as a base directory to store cache results. To change this path to .cache/ng, run the following command: Shows a help message for this command in the console. Deletes persistent disk cache from disk. Disables persistent disk cache for all projects in the workspace.

How to reduce build time with angular CLI?

Configure persistent disk cache and retrieve cache statistics. Angular CLI saves a number of cachable operations on disk by default. When you re-run the same build, the build system restores the state of the previous build and re-uses previously performed operations, which decreases the time taken to build and test your applications and libraries.

Why does my angular app crash when I try to use JavaScript?

The most common reason, is, that the browser has not finished creating it and has not yet added it to the DOM. If you try to use it before it has been added, it will not work and crash your app. If you are familiar with JavaScript in general, you have probably stumbled across that problem, as it is not specific to angular.


1 Answers

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');
}]);
like image 156
Kamboçyalı Avatar answered Oct 19 '22 20:10

Kamboçyalı