10

This issue AngularJS disable partial caching on dev machine suggests using $templateCache.removeAll() to clear the cache templates. However what if you just want to fire this once upon each deployment cycle in order to get visitor browsers to refresh/update the template? Our problem was some browsers were not updating the template html files, we'd end up with new CSS mixed with old HTML. I do not want this function to fire all the time, that would defeat the point of cache templates to begin with (right?).

Per the title question, what's a recommended way to clear $templateCache "once", for example some ideas I've crunched:

  • Does Angular have an internal method of detecting if the template file has changed? And then if so "update" it.
  • Does Angular have an internal "version" or "date" we could compare and add a conditional to fire function removeAll()?
  • Does $templateCache ever itself know to refresh? What were the Angular creator's intentions in forcing templateCache on us if HTML files are bound to change overtime and served to multiple browsers.

I do not want to use grunt to add workflow overhead for something that happens periodically, nor to chop up the html file templates into variables. (Is this a good method for template cache busting in angular?)

The alternative I can see is simply adding and removing removeAll() code manually, that would be silly.

1
  • hi liquified, it would be great to hear if you managed to find a practical solution for this!
    – Rich
    Commented Dec 10, 2015 at 12:43

2 Answers 2

1

We decided to go with simply tacking on UNIX timestamp version to files which were changed like file.php?v=154325232. The reason being we weren't actually using Angular templateCache, in that we weren't storing the template data itself inside templateCache. I thought Angular automatically stores any async loaded directive template files into templateCache, thats not true, you have to explicitly use templateCache to get a file (Good tutorial on that https://thinkster.io/templatecache-tutorial).

So our solution is just boring old versioning, which is most understandable by browser headers and for non-mega-scaling websites, just fine.

$modifiedTs = filemtime($filename);
if ($modifiedTs != $lastModificationTs){
  echo "$filename?v=" . time();
}

How to check if a file has changed?

Lastly the way I read templateCache, its not intended to save data between browser sessions rather its a cache service during the session. It has nothing to do with the browser cache, rather Angular stores it internally. So its meant for websites that dynamically navigate and load URLs (ie: not a true page refresh but an AJAX trick) which is how most of Google websites are today.

0

The current popular method is to create a task using a node module that preprocesses Angular templates into a file in which you add into the js stack.

You could install gulp-ng-html2js and make it a gulp task. This would output a file say templates.js, which you then add to the head.
https://www.npmjs.com/package/gulp-ng-html2js

Then call it out in your app as a module dependency. app.module('myApp',['templates']);

So before each deployment, run this gulp task. And if needed add a cache breaker query string templates.js?v=123

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.