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/