Angular js - cache a rootScope param and it's value

Question

Hey how do i cache for x time this simple object that i set via $http ( $rootScope.config.app_genres)?

 $http.get($rootScope.config.app_ws+'get/genres',{},{cache:true}).success(function(response) {
    $rootScope.config.app_genres =  response;
  });

i just would like to cache it to not repeat everytime the http request

Answer 1

As stated in $http documentation, you can provide your own cache object instance through the cache configuration option.

Here's a $cacheFactory where I override the put method so that the cache gets cleared after TIMEOUT. Note that this only works for one URL. I'll leave making this timer cache object generic as an exercise for you.

function Ctrl($scope, $http, $cacheFactory, $timeout) {
  var timedCache = $cacheFactory('myCache'),
      TIMEOUT = 5000,
      cacheTimer = null;

  timedCache._put = timedCache.put;
  timedCache.put = function (key, val) {
    console.log('caching', key);

    $timeout.cancel(cacheTimer);
    cacheTimer = $timeout(function () {
      console.log('clearing cache for', key);
      timedCache.remove(key);
    }, TIMEOUT, false);

    timedCache._put(key, val);
  };

  $scope.request = function () {
    $http.get('/echo/json', {
      cache: timedCache
    })
    .success(function (data) {
      console.log('received', data);
    });
  };
}

Here's the fiddle with this working: http://jsfiddle.net/sirhc/jvLPX/

Answer 2

H i , ( hoping Angular has something built in, that others may add but )

I guess we could assign it to a new variable

$rootScope.dataCache = $rootScope.data;

$rootScope.cacheTimer = 50000; 

Your websites application always reading from $rootScope.dataCache and a routine to check and/or auto update when CacheTimer had elapsed, to recall the server side and re assign.

?

Answer 3

I use this code to cache templates

$http.get(/*URL*/, {cache: $templateCache})
    .success(function () { ... })
    .error(function () { ... });

but maybe this one will be more of what you want to do https://coderwall.com/p/40axlq

Answer 4

You could use cache busting for your requirement. Lets say if you want to cache only for x seconds. The you add a cache busting query parameter with value

Math.floor(new Date().getTime() / (x * 1000))

The request would look like

$http.get(url,{cacheBuster: Math.floor(new Date().getTime() / (x * 1000))},{cache:true})