How to reload resources (HTML/CSS/JS) on version c

Question

I have a Web Application using AngularJS, oclazyload, ui-router, bootstrap and so on and I'll have updates coming out in the future, and I need to make sure that the browsers won't keep showing the cached resources, even when an updated version is available.

For this I have configured my Gruntfile (using grunt-replace, grunt-prompt and grunt-bump) to append the version number to every URL in my index.html every time I create a new build.

This works fine, but since I use ui-router and oclazyload, I have lots of resources loading lazily and only on demand, so I tried to implement an Angular Http Interceptor to append the version number to every XHR URL. This however messes up template scripts (like <script type="text/ng-template" id="menu-item.html"></script>). I did add conditions to avoid this, but it feels very hacky and prone to error.

Is there any fool-proof solution / best-practice for this in Angular, vanilla JS, Grunt or any other way?

Thanks in advance!

Answer 1

You can lazyload assets without cache: just set the cache parameter to false.

You can also set the cache property for an array or a single file.

There are two ways to define config options for the load function. You can use a second optional parameter that will define configs for all the modules that you will load, or you can define optional parameters to each module. For example, these are equivalent (except that the first two files won't be cached in the first example):

$ocLazyLoad.load([{
  files: ['testModule.js', 'bower_components/bootstrap/dist/js/bootstrap.js'],
  cache: false
},{
  files: ['anotherModule.js'],
  cache: true
}]);

and

$ocLazyLoad.load(
  ['testModule.js', 'bower_components/bootstrap/dist/js/bootstrap.js', 'anotherModule.js'],
  {cache: false}
);