How to prevent caching of AngularJs views in Office Task Pane App

Question

I am building an Office Web App in AngularJs, and my views are being cached, I'm am trying to work out how to prevent caching of my AngularJS views.

Changes the Index.html file and as *.js are reflected in the tab pane, but any changes in the view are not. Here are some things that have not worked:

Adding these to the header of index.html:

<meta http-equiv="cache-control" content="no-store">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="expires" content="-1">

Adding this to application.js:

app.run(function ($rootScope, $templateCache) {
    $templateCache.removeAll();

    $rootScope.$on('$viewContentLoaded', function () {
        $templateCache.removeAll();
    });
 });

Adding this to web.config:

  <system.webServer>
    <staticContent>
      <clientCache cacheControlMode="DisableCache" />
    </staticContent>
  </system.webServer>

The only thing that has worked has been to rename the view.

The caching does not occur in Chrome, Firefox, or even IE when used independently.

could you also try this `$templateCache.removeAll();` on route changes too — Pankaj Parkar, Apr 27 '15 at 13:50
@pankajparkar do you me on('$routeChangeStart') ? Done that too — Paul T Davies, Apr 27 '15 at 13:52

score 1 · Answer 1 · edited May 23 '17 at 11:43

This can be solved with a simple query string in your ng-include tag, as noted in this explanation of html caching with query strings in general (but also applied to Angular in this case).

So, in my Office Task Pane App I had an ng-include="'partials/allhtml.html'" and changed it to ng-include="'partials/allhtml.html?v=1.0.1'" and solved my caching problem.

As noted in the link, you do not need to change the value of ?v every time; as long as you have a query string then the http get will not be cached!

How to prevent caching of AngularJs views in Office Task Pane App

1 Answers1