Data not updated as of version 9/10 in an application developed using angularjs

Question

I am developing a simple user management system using angularjs. It just adds, updates and removes the view of the application. I am using spring -mvc in the background to get a JSON response. Everything works fine in Firefox, Chrome and Safari, but IE .. !!!!

I have one page that lists all users. For the first time, it will work perfectly in IE9 / 10, but any update made for any user will not be displayed in the view (using IE).

I can not understand what is happening. I think IE9 / 10 will also cache json data, and each time a user list page is called, it associates this cached data with the page.

Is it possible to make IE9 / 10 forget the downloaded data?

Angular to access the web service:

angular.module("user.service", ["ngResource"]). factory('User', function($resource, $rootScope) { var User = $resource( $rootScope.apipath + 'users/:userId', {userId: '@id'}, {update: {method: 'PUT'}} ); User.prototype.isNew = function() { return (typeof(this.id) === 'undefined'); }; return User; }); 

UserList Controler:

 function UserListController($scope, User) { $scope.users = User.query(); } 

UserList Tamplate:

 <h2><msg key="users"></msg><a class="btn btn-primary pull-right" href="#/users/new"><i class="icon-plus-sign icon-white"></i><msg key="addnew"></msg></a></h2> <table class="table table-striped"> <tr> <th><msg key="username"></msg></th> <th><msg key="name"></msg></th> <th></th> </tr> <tr ng-repeat="user in users"> <td>{{user.userId}}</td> <td>{{user.contact.firstName}} {{user.contact.lastName}}</td> <td> <div class="pull-right"> <a class="btn btn-info" href="#/users/{{user.id}}"> <i class="icon-pencil icon-white"></i><msg key="edit"></msg> </a> </div> </td> </tr> </table> 

Answer 1

After searching on Google, I found a solution to this problem.

This situation arises due to json caching in IE 9/10. We need to say i.e. Do not cache JSON data.
As a solution, I created a java filter on the server that intercepts every incoming request for web services or, say, json data. And I added the following headers in response

1. Cache-Control: no cache
2. Pragma: no cache
3. Expires: -1

These headers in the response object will tell IE not to cache data received with this response.

The filter is as follows:

  public class NoCacheFilter implements Filter { /** * Place this filter into service. * * @param filterConfig the filter configuration object used by a servlet * container to pass information to a filter during initialization * @throws ServletException to inform the container to not place the filter * into service */ public void init(FilterConfig filterConfig) throws ServletException { } /** * Set cache header directives. * * @param servletRequest provides data including parameter name and values, * attributes, and an input stream * @param servletResponse assists a servlet in sending a response to the * client * @param filterChain gives a view into the invocation chain of a filtered * request */ public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException { HttpServletResponse httpServletResponse = (HttpServletResponse) servletResponse; HttpServletRequest httpServletRequest = (HttpServletRequest) servletRequest; String requestUrl = httpServletRequest.getRequestURL().toString(); // set cache headers httpServletResponse.setHeader("Cache-Control", "no-cache"); httpServletResponse.setHeader("Pragma", "no-cache"); httpServletResponse.setDateHeader("Expires", -1); filterChain.doFilter(servletRequest, servletResponse); } /** * Take this filter out of service. */ public void destroy() { } } 

Answer 2

We are developing a large AngularJs application and also run into caching issues in IE. The final solution was to add a cache control header to the api response messages.

 Cache-Control: no-store 

Another option is to create an HTTP interceptor that adds a unique timestamp, so each request is different and not cached.

See this Jef Claes article on how to create an http interceptor .

sample code from message

 var AppInfrastructure = angular.module('App.Infrastructure', []); 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; }); }; });