Post date: Apr 05, 2017 3:31:9 PM
My customer has been complaining about data not being saved in the Angular JS app over and over. I have tried troubleshooting in Chrome and everything appeared to be working perfectly fine until I started browsing my Angular app in Internet Explorer. I debugged through the javascript and since I am using Angular Resource, there is certain abstraction that I have to live with. However, the request has been submitted correctly on the server and the update is performed successfully in the database. The response resource is collected in the success promise but the screen only updates when I have IE toolbar open. At that point I started googling and found its the issue with IE cache.
The following code in the config fixed my cache problem:
window.app.config(function($httpProvider) {
$httpProvider.defaults.cache = false;
if (!$httpProvider.defaults.headers.get) {
$httpProvider.defaults.headers.get = {};
}
// disable IE ajax request caching
$httpProvider.defaults.headers.get['If-Modified-Since'] = '0';
}
The downside of this of course is No Caching, if the data is not rapidly changing on the site, its always pulling and fetching data from the database. I wonder if there is a means to provide the configuration for specific areas of the site pages. I believe that can be done writing your custom interceptor which will essentially append a unique value to the request url so that IE wouldn't recognize the URL and always pull from server.