Prevent caching in angular js application

Question

I'm working on angular js app, it's a single page app and we are using routing to switch views. All the files (stylesheets and javascripts) gets loaded only once when index page gets hit for the first time and suppose I update in one of the style sheets or javascript files then it takes older version of the file and not the updated one.

I want to force the client browser to take the latest file whenever there is an update in the server files without taking it from cache without refreshing the page (index.html) itself.

Any help would be appreciated.

Google for cache busting, also see this http://stackoverflow.com/questions/9692665/cache-busting-via-params — Tim Ogilvy, Mar 23 '16 at 06:49

score 2 · Answer 1 · answered Mar 23 '16 at 09:08

You can prevent caching of files in angular js by using cache: false parameter in the page where you have defined your states of different url.

$stateProvider.state('login', {
        url: '/yourState',
        cache: false,
        templateUrl: 'yourTemplate.html',
        controller: 'yourController as yourCtrlObj'
    });

on setting cache to false in state parameters, all the files in the corresponding page will be reloaded once the page get loaded. Here i have given an example using controllerAs syntax in angular js

What if you need to add a new state to this? How would you make sure this specific js file is non-cached? — Ε Г И І И О, Oct 02 '20 at 07:35

score 1 · Answer 2 · edited May 23 '17 at 10:28

If your goal is to achieve caching and proper resource revalidation, then I would suggest you to use following headers:

Cache-Control: max-age=0, must-revalidate
ETag: 'some generated value based on the content'

In that case browser will always send request to check ETag value, and if ETag has changed then server will sent new content, if not then will respond with Status Code:304 Not Modified

If you already have deployed your site on production, and need now invalidate existing cache in your users browsers, then read what Tim suggested: link

Prevent caching in angular js application

2 Answers2