angularjs not caching resource data . ( even after using cacheFactory )

Question

I am trying to cache the response with angularjs but its not happening .

code #1

var app = angular.module("jsonService", ["ngResource"]);

app.factory("JsonFactory", function($resource,$cacheFactory) {
    var cache = $cacheFactory('JsonFactory');

    var url = "myurl?domain=:tabUrl";

    var data = cache.get(url);

    if (data==undefined) {
    var retObj = $resource(url, {}, {
        list: {
            method: "GET",
            cache: true
        }
    });
    data = retObj;
    cache.put(url, data);
    };
    return cache.get(url);
});

code #2

var app = angular.module("jsonService", ["ngResource"]);

app.factory("JsonFactory", function($resource) {

    var url = "myurl?domain=:tabUrl";
    console.log(url);

    var retObj = $resource(url, {}, {
        list: {
            method: "GET",
            cache: true
        }
    });
    return retObj;
});

after both the code i wrote . when looking in to dev tools there always goes a XHR request in Network tab.

obviously : date does not changes . ( that's the whole point of caching )

I would start using 1.2.4 and check if the problem still exists. Google CDN: developers.google.com/speed/libraries/devguide — rjm226
– rjm226, Commented Dec 13, 2013 at 17:07
@rjm226 using 1.2.4 breaks the app , with AngularJS v1.2.4 . i am getting many Error: [$interpolate:interr] . — Ratan Kumar
– Ratan Kumar, Commented Dec 14, 2013 at 9:31
I've updated my answer for using html5 localStorage to cache response and maintain its expiration. Hope this could be helpful. — Chickenrice
– Chickenrice, Commented Dec 20, 2013 at 4:23

Noishe · Accepted Answer · 2013-12-17 00:36:41Z

2

After reading some of your responses, I think that what you are asking, is why does the network tab show a 200 response from your server, while using angular caching.

There are two caches. The first cache is angular's cache. If you see an xhr request in the network tab at all, then that means angular has decided that the url does not exist in its cache, and has asked the browser for a copy of the resource. Furthermore, the browser has looked in it's own cache, and decided that the file in its cache does not exist, or is too old.

Angular's cache is not an offline cache. Every time you refresh the browser page, angular's caching mechanism is reset to empty.

Once you see a request in the network tab, angular has no say in the server response at all. If you're looking for a 304 response from the server, and the server is not providing one, then the problem exists within the server and browser communication, not the client javascript framework.

A 304 response means that the browser has found an old file in its cache and would like the server to validate it. The browser has provided a date, or an etag, and the server has validated the information provided as still valid.

A 200 response means that either the client did not provide any information for the server to validate, or that the information provided has failed validation.

Also, if you use the refresh button in the browser, the browser will send information to the server that is guaranteed to fail (max-age=0), so you will always get a 200 response on a page refresh.

answered Dec 17, 2013 at 0:36

Noishe

1,42111 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ratan Kumar Over a year ago

What i did for the time being is to store the JSON response in local storage of Chrome . now i am searching , how to fix a expire date for a enrty in localstorage

Noishe · Accepted Answer · 2013-12-16 00:14:46Z

0

According to the documentation for the version of angular that you are using, ngResource does not support caching yet.

http://code.angularjs.org/1.0.8/docs/api/ngResource.$resource

If you are unable to upgrade your angular version, you may have luck configuring the http service manually before you use $resource.

I'm not exactly sure of syntax, but something like this:

yourModule.run(function($http)
{
    $http.cache=true;
});

edited Dec 16, 2013 at 0:14

answered Dec 14, 2013 at 5:00

Noishe

1,42111 silver badges14 bronze badges

3 Comments

Ratan Kumar Over a year ago

ncaught Error: Unknown provider: $http from "myapp"

Noishe Over a year ago

Ah yes, my bad. Can't do it in a config block. It will have to be setup in a run block, as edited, or setup in a controller.

Ratan Kumar Over a year ago

Doesn't works .. all the resources are still reloaded with 200 OK. not 302.

Chickenrice · Accepted Answer · 2013-12-20 04:29:11Z

$cacheFactory can help you cache the response. Try to implement the "JsonFactory" this way:

app.factory("JsonFactory",function($resource,$cacheFactory){
    $cacheFactory("JsonFactory");
    var url="myurl?domain=:tabUrl";

    return{
      getResponse:function(tabUrl){
        var retObj=$resource(url,{},{list:{method:"GET",cache:true}});
        var response=cache.get(tabUrl);
        //if response is not cached
        if(!response){
          //send GET request to fetch response
          response=retObj.list({tabUrl:tabUrl});
          //add response to cache
          cache.put(tabUrl,response);
        }
        return cache.get(tabUrl);
      }  
    };
});

And use this service in controller:

app.controller("myCtrl",function($scope,$location,JsonFactory){
  $scope.clickCount=0;
  $scope.jsonpTest = function(){    
    $scope.result = JsonFactory.getResponse("myTab");
    $scope.clickCount++;
}
});

HTML:

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular-resource.js"></script>
<script src="js/ngResource.js"></script>
<body ng-app="app">
<div ng-controller="myCtrl">
    <div>Clicked: {{clickCount}}</div>
    <div>Response: {{result}}</div>
    <input type="button" ng-click="jsonpTest()" value="JSONP"/>
</div>
</body>

Screenshot:

enter image description here

[EDIT] for html5 localStorage solution

JSBin Demo

.factory("JsonFactory",function($resource){
  var url="ur/URL/:tabUrl";
  var liveTime=60*1000;  //1 min
  var response = "";

  return{
    getResponse:function(tabUrl){
      var retObj=$resource(url,{},{list:{method:"GET",cache:true}});
      if(('localStorage' in window) && window.localStorage !== null){

      //no cached data
      if(!localStorage[tabUrl] || new Date().getTime()>localStorage[tabUrl+"_expires"])                  {
        console.log("no cache");
        //send GET request to fetch response
        response=retObj.list({tabUrl:tabUrl});

        //add response to cache
        localStorage[tabUrl] = response;
        localStorage[tabUrl+"_expires"] = new Date().getTime()+liveTime;
      }
      //console.log(localStorage.tabUrl.expires+"..."+new Date().getTime());
      return localStorage[tabUrl];
      }
      //client doesn't support local cache, send request to fetch response
      response=retObj.list({tabUrl:tabUrl});

      return response;
    }  
  };
});

Hope this is helpful for you.

Error in response to tabs.getSelected: TypeError: Object #<Object> has no method 'list'
list is a custom method I defined in angular resource module. It seems like your resource object doesn't have list method.

Collectives™ on Stack Overflow

angularjs not caching resource data . ( even after using cacheFactory )

3 Answers 3

1 Comment

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related