CODEWITHSUNDEEP
angularjstemplatescachingangularjs-ng-include
William Neely
William Neely

Reputation: 2092

How can I de-cache AngularJS templates when they change on the server?

We have an Angular project where the templates have changed numerous times thanks to our "Agile" environment. Browsers seem to strongly cache the templates because of the html file type. This means that when business goes to our dev site after an update, they occasionally see the old templates. How can we make sure that when changes are made to the templates, the user downloads the new template instead of loading from the cache?

Upvotes: 3

Views: 518

Answers (2)

kensplanet
kensplanet

Reputation: 494

Use tools like grunt-filerev (https://github.com/yeoman/grunt-filerev) for static revisioning. They basically add a file content hash, so that caching becomes impossible.

Upvotes: 1

William Neely
William Neely

Reputation: 2092

We use Jade and to prevent caching, we have a variable based on the time that gets appended to the end of our JS/CSS includes (style.css?v=2012881). Since we already have an 'appVersion' via this variable, I chose to expose that variable using an angular module and constant:

script.
      angular.module('appVersion',[]).constant('appVersion',#{curDate});

In my main Angular module I have:

.config(['$httpProvider','appVersion',function($httpProvider,appVersion){
  $httpProvider.interceptors.push(function() {
      return {
       'request': function(config) {
           if(!config.cached && config.url.indexOf('.html') > -1){
            if(config.url.indexOf("?") > -1){
              config.url = config.url.replace("?","?v="+appVersion+"&");
            }
            else{
              config.url += "?v="+appVersion;
            }
           }
           return config;
        }
      };
    });
}])

Since the templates are loaded using $http.get, I added an interceptor that detects if a request is a request for a template and appends the appVersion to the request if it is. That way we have the same versioning for the CSS, JS, and HTML.

Upvotes: 1

Related Questions