AngularJS - browser caching JSON data

Question

I am creating an application using AngularJS framework.

The Problem:

When I jump out of my application to a different domain or a page and then when I use history back button to get back to my app, I get back only JSON. The same situation happens when I jump out of my app browsing back in history, and then when I use forward button to go to my app, again I get only JSON back. Back/forward works fine within my app, it happens only when I go to different domain.

Why is that? I think it is related to caching some how, because when I do back/forward to my app, no request is send to the server.

You can see what I'm talking about if you go to this url - http://test.deving.cz/admin/prihlasit/. Then go back and then forward.

My setup:

My app is configured to use HTML5 history API. For an url that starts mydomain.com/admin/ I always return an index.hmtl containing angular. Then for every other url in my app two requests are send out. One for the template and one for the data (the JSON).

Example:

$routeProvider.when('/admin/page/', {controller: 'PageListCtrl', templateUrl: '/templates/page/list/', resolve: 'PageListCtrl.resolve'})

PageListCtrl:

angular.module('page').controller('PageListCtrl', ['$scope', 'data', function($scope, data) {
    $scope.pages = data;
}]);

Resolve function:

resolve = {data: 
            function($http, $q){
                var delay = $q.defer();
                $http.get().success(function(data){
                    delay.resolve(data['data']);
                });
                return delay.promise;
            }
        }

How should I configure angular or my app to tell the browser not to cache the data and to always get the index.html and then let angular do the requests?

try adding datetime.now() to url templateUrl: '/partials/indexpage.html?id=' + new Date().getTime() — Ajay Singh Beniwal
– Ajay Singh Beniwal, Commented Jul 11, 2013 at 12:47
@Ajaybeniwal this will stop caching the templates, am I right? However, I need it to stop caching the data. The template caching functionality is desired in my app. — davekr
– davekr, Commented Jul 11, 2013 at 13:05
could you share controller code or resolve code where you are fetching the json . — Ajay Singh Beniwal
– Ajay Singh Beniwal, Commented Jul 11, 2013 at 13:07
You should do two things change $http.get() to $http.get({cache:false}) and on the server side set a negative date expires header so that browser does not cache the json — Ajay Singh Beniwal
– Ajay Singh Beniwal, Commented Jul 11, 2013 at 13:27
@Ajaybeniwal It doesn't work. I can set the expire header to whatever I want and it has no effect. However if I set it to some date or time in the future, I get the cached result everytime, not only when browsing in history (I need to use ctrl+f5 to get the index.html and normal behavior). — davekr
– davekr, Commented Jul 11, 2013 at 13:46

lazywei · Accepted Answer · 2013-07-25 10:02:16Z

4

I got the same problem. While I found a workaround to this problem, I think there must exist a better solution. So if you have any more better solution please let me know.

The server side framework I'm using is Rails. So I add the following code

  response.headers["Cache-Control"] = "no-cache, no-store, max-age=0, must-revalidate"
  response.headers["Pragma"] = "no-cache"
  response.headers["Expires"] = "Fri, 01 Jan 1990 00:00:00 GMT"

These lines will prevent browser to cache your request, and you can detect whether a request is a XHR to decide add the above lines or not.

answered Jul 25, 2013 at 10:02

lazywei

12.6k5 gold badges23 silver badges26 bronze badges

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

Comments

davekr · Accepted Answer · 2013-07-11 14:29:04Z

3

In the comments Ajay beniwal suggested that to stop browser from caching, the url should be dynamic:

 '/partials/indexpage.html?id=' + new Date().getTime()

So if I do something like this in my resolve function:

$http.get($location.path() + '?id=' + new Date().getTime())

the app and browsing in history works fine.

However I feel like monkey patching a serious problem. So if anyone has a better answer that actualy solves the cause to the problem feel free to answer.

answered Jul 11, 2013 at 14:29

davekr

2,2761 gold badge27 silver badges32 bronze badges

Collectives™ on Stack Overflow

AngularJS - browser caching JSON data

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related