Angular.js: $http disabling caching does not work

[mgcrea]

Using Angularjs-1.0.2 w/ Chrome 23.0 on OSX.

I can't get rid of a partial that has been cached by the $http.get method.

• Tried incognito mode & cleared chrome cache
• Tried $http.get(attr.bsPopover, {cache: false})
• Tried $templateCache.removeAll(); before performing the request.

It never works! Chrome always gives a Status Code:200 OK (from cache)

Workaround for now is to use random ints...

[jtymes]

Are you sure it's Angular that is caching the page and not Chrome? Load the page, clear Chrome's cache, then perform whatever action it is that loads the partial again and check if it's still being cached.

[mgcrea]

I did indeed cleared the chrome cache during my tests with no luck.

[jtymes]

Alright, look at this: http://plnkr.co/edit/MP2yZV?p=preview

It has caching set to true. Open your developer tools and watch the network tab before clicking on the load button. Once you click the load button, you'll see a request for getme.html. Click the button again and you don't see a new request.

Now, turn caching off in the controller and click the load button and you'll see a new request every time. I think the caching issue you're facing is from a server cache configuration, not Angular. If you have an example set up somewhere, I'd be glad to take a look.

[mgcrea]

Hum... In my chrome, there is no new requests with cache:true, only one is made (the success callback is correctly called though). With cache:false I do see multiple request. So it indeed does work.

Webserver I had the issue on was http-server (nodejs npm module). Maybe there is some options to disable server-side caching in it.

Thank you for your help.

[Energy1011]

Fast solution is add to the head request Cache-Control: 'no-cache' as following
$http.get( url , { headers: { 'Cache-Control' : 'no-cache' } } );

[midoalone]

You can send a random number with the request using Math.random(), this will ensure you have a new request every time.
NOTE: note the perfect solution, but it simply WORKS

[igorlino]

The right format for the fast solution is:

~~~~
var req = {
method: 'GET',
url: 'http://example.com',
headers: {
'Cache-Control' : 'no-cache'
}
}

$http(req).then(function(){...}, function(){...});
~~~~