CODEWITHSUNDEEP
javascriptangularjscaching
Yair Cohen
Yair Cohen

Reputation: 507

Disable caching on the client side in Angularjs

I have an issue with the way that I deploy my angularjs application.

Every time that I am deploying my app, my users are experiencing cache issues. Their browsers save the old version of my application and the result it's a lot of errors.

I saw one possible solution for this problem, just to add version number after each css and js files. something like this:

<script src="bower_components/angular/angular.js?version=2.3"></script>

and replacing the version every deploy.

I don't want to do that for every file that I am adding.

Does someone have a better solution?

Thank you.

Upvotes: 1

Views: 3980

Answers (2)

Itsik Mauyhas
Itsik Mauyhas

Reputation: 3984

You should not add a version to your bower src, bower should mange it for you, exmaple:

under bower_components/angular/.bower.json:

{
  "name": "angular",
  "version": "1.5.11",
  "license": "MIT",
  "main": "./angular.js",
  "ignore": [],
  "dependencies": {},
  "homepage": "https://github.com/angular/bower-angular",
  "_release": "1.5.11",
  "_resolution": {
    "type": "version",
    "tag": "v1.5.11",
    "commit": "0f57428c3ffe2f486264ab7fbee3968dccc7b720"
  },
  "_source": "https://github.com/angular/bower-angular.git",
  "_target": "~1.5.1",
  "_originalSource": "angular"
}

And in the index just 

<script src="../bower_components/angular/angular.js"></script>

Complete example - bower-angular.

If you just want to disable cache :

myModule.config(['$httpProvider', function($httpProvider) {
    //initialize get if not there
    if (!$httpProvider.defaults.headers.get) {
        $httpProvider.defaults.headers.get = {};    
    }    

    // Answer edited to include suggestions from comments
    // because previous version of code introduced browser-related errors

    //disable IE ajax request caching
    $httpProvider.defaults.headers.get['If-Modified-Since'] = 'Mon, 26 Jul 1997 05:00:00 GMT';
    // extra
    $httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache';
    $httpProvider.defaults.headers.get['Pragma'] = 'no-cache';
}]);

Upvotes: 1

Victor P
Victor P

Reputation: 1612

I don't know what your server stack is but I use ASP.NET. I use the assembly's build string as the querystring. So it looks something like this

<script src="bower_components/angular/[email protected]"></script>

where AppVersion is a string that looks like this: '1.0.0.12645'.

Upvotes: 0

Related Questions