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

Question

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?

Answer 1

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.

Answer 2

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.