0

I noticed if I use ngRoute and make a single page application (SPA) using AngularJS, and then load 2 subpages: main.html and second.html, then inside of Google Chrome's debug console, I will see that when I first load the SPA page, it will load main.html, and when clicked on a different link on the SPA, it will load second.html from the network , but will stop loading main.html or second.html afterwards.

In the HTTP response header, I do not see an expiration value and the HTTP request header actually has a pragma: no-cache.

Update: in the comment, @sdfacre suggested it is due to $templateCache caching the pages, so what if it is Best Buy, closing down the site and 1 hour later, refresh its contents for a Christmas sale, or a Target Store website, refreshes its design in a monthly website overhaul, then how can the SPA forces a re-load of subpages or all pages, if some users actually might have the page open a few hours ago and still have the old version of the SPA in the browser?

nonopolarity
  • 146,324
  • 131
  • 460
  • 740
  • 1
    It stores templates in $templateCache. User has to refresh the whole page if there is any template changes. – sdfacre Jan 28 '16 at 01:53

1 Answers1

0

You can clear angular's template cache with

app.run(['$templateCache', function ( $templateCache ) {
    $templateCache.removeAll(); }]);

See here

Community
  • 1
  • 1
Todd Smith
  • 17,084
  • 11
  • 59
  • 78
  • I added the code to the mainController code, but for some reason, I still don't see the pages reloading. And how do you trigger it, say, if Best Buy foresee a major website overhaul on March 12, and then delay it to March 19, or if Target may have a release every Monday or Tuesday of the week at 3am, then there can be code that says, when it is past that time and now the calculated (timestamp / whateverNumber) = 126, and it should be 127 if it is past that Tuesday 3am UNIX timestamp, then now reload all pages... or maybe get a version number from the server and if different, clear all cache – nonopolarity Jan 29 '16 at 00:24
  • The above solution is equivalent to "no cache" and will always get the latest copy from the server. If you want selective caching then you need to create dynamic template names which is typically done by appending a version onto the end of the template name / url. – Todd Smith Jan 29 '16 at 15:50