CODEWITHSUNDEEP
javascripthtmlangularjscsscaching
ronak barbhaya
ronak barbhaya

Reputation: 73

Prevent caching in angular js application

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.

Upvotes: 3

Views: 4338

Answers (2)

Nitheesh
Nitheesh

Reputation: 19986

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

Upvotes: 2

Vitaly Kulikov
Vitaly Kulikov

Reputation: 723

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

Upvotes: 1

Related Questions