How to Prevent Caching in IE8 when using AngularJS Models

Question

My technology stack is -

1. AngularJS
2. Bootstrap
3. Spring MVC
4. Hibernate

What am I doing :

There is a list of Items on which I am doing CRUD (Create, Read, Update and Delete)

1. Posting form Data via Angular Controller to a Spring Controller.
2. Spring Controller -> DAO method -> DB is updated
3. Spring Controller Returns "Y" or "N"
4. Angular gets the Status Message and Reloads the Angular Model(A Json Array to populate the List of Items)
5. Same with Update and Delete

My objective is to achieve real-time data manipulation without page reload.

This works fine in Chrome. However, IE can not detect the Model Change. It keeps displaying the data prior to addition/updation/deletion (from its cache). Only after I clear the cache manually, am I actually able to see the changed Model.

Need help on how to resolve this problem with IE8 and above.

P.S. I have already tried setting the meta headers

Answer 1

You can set

"No-Cache headers to the response on server side"

var AppInfrastructure = angular.module('App.Infrastructure', []);

and in Angularjs you can write interceptor below is the sample code:

AppInfrastructure
    .config(function ($httpProvider) {
        $httpProvider.requestInterceptors.push('httpRequestInterceptorCacheBuster');
    })    
    .factory('httpRequestInterceptorCacheBuster', function () {
        return function (promise) {
            return promise.then(function (request) {
                if (request.method === 'GET') {
                    var sep = request.url.indexOf('?') === -1 ? '?' : '&';
                    request.url = request.url + sep + 'cacheSlayer=' + new Date().getTime();
                }

                return request;
            });
        };
    });   

Answer 2

same as what Jquery Guru mentioned above, but it is config in newer version of angular

.factory('noCacheInterceptor', function () {
        return {
            request: function (config) {
                console.log(config.method);
                console.log(config.url);
                if(config.method=='GET'){
                    var separator = config.url.indexOf('?') === -1 ? '?' : '&';
                    config.url = config.url+separator+'noCache=' + new Date().getTime();
                }
                console.log(config.method);
                console.log(config.url);
                return config;
           }
       };
});

you should remove console.logs after verifying

Answer 3

@Avinash seems you also only used the idea but not the exact solution, wasn't sure what you meant until i tried it, and had to do different implementation myself to make it work.

Anyways I decided to share my findings with the rest of the world so maybe to save someone else some time.

I tried to implement the above code 1 for 1... the first obvious issue I ran into is that the request parameter passed into the promise has an object structure inside that is different than what is shown above, to get the .method and .url i needed to first go into .config. So it was request.config.method.

But that wasn't the main problem, my problem was that even after implementing this the final url called did not have this cacheSlayer appended to it.

My solution :) when creating a $resource you pass in (url, additional settings, method). Inside the additional settings I passed in {'cacheSlayer':new Date().getTime()} and this way it did start adding this to my resource url's.

Hope this helps