AngularJS ng-include caching

Question

i like to include templates with the ng-include attribute. I like to know if the templates getting cached while using the the same url multiple times.

<div ng-include src="'./Views/temp.html'"></div> //get request temp.html
<div ng-include src="'./Views/temp.html'"></div> //load from cache

Answer 1

Caching is typically used - but its not on the part of angular but instead on the part of the browser. You can see this by running Fiddler and seeing what happens when your page loads. If you get a 304 result code back from the server it means that the page hasn't changed - so it will be pulled from cache.

Force Reload

The only good way to consistently force a reload is to add query string as follows (you can replace "i" with any variable you would like and the numbers just need to be random - not previously used numbers):

<div ng-include src="'./Views/temp.html?i=1000'"></div> // get request temp.html
<div ng-include src="'./Views/temp.html?i=1001'"></div> // force the page to load!

Hope that helps!

Answer 2

In my case, I opened the "Incognito Window" still it was showing me the cached version. I inspected the same and found the .html pages were having 200 status.

One easy way to overcome this problem is to use "Clear Browser cache" in the "Network" tab.

Hope this helps!