Updating Cached Templates

Question

I am using templateUrl and it works great!

 app.directive('myDir', function() { return { templateUrl: 'partials/directives/template.html' }; }; 

However ... when I make changes to these templates, it is not updated. This is not a big problem in development, because I know what is being updated, and can just clear the cache manually.

But I can not clear the cache of all users. Is there any way to do this? How to use the CACHE-CONTROL meta tag or something like that?

Answer 1

As far as I can see, you have two options -

• use the $cacheFactory service to delete the old cache. After the template has been selected, Angular caches it in the default $ templateCache services

   // Please note that $cacheFactory creates a default key '$http' var cache = $cacheFactory.get('$http'); // The remove() function removes a key-value pair from the cache, // if it's found. If it's not found, then it just returns undefined. cache.remove(your url); 

• To use file versioning, rename the file with each change - i.e. if your first version of the file is template-1.0.1.html, when you make some code changes, rename it to template-1.0.2.html and so on. This way, a new file will be uploaded every time you make some changes.

Answer 2

A quick and dirty solution is to disable caching in $httpProvider

 app.config(function ($httpProvider) { $httpProvider.defaults.headers.get = { 'Cache-Control': 'no-cache' }; }); 

I would not recommend this. But it works.