Avoid angularJS partial views to be cached in IE

Question

I'm working on an ASP.NET MVC application that also has some angularJS. I have a main page that has different tabs that when you click them they load an angular partial view. This is how the main page looks like:

{ ... }     
<div class="widget-div" ng-controller="mainController"> 
    <div class="widget-body">
        <div class="tabs-left">
            <ul id="demo-pill-nav" class="nav nav-tabs tabs-left" style="width: 160px">
                <li ng-class="getMenuClass('/search')">
                    <a href="javascript:void(0);" ng-click="selectPage('search')">Search</a>
                </li>
                <li ng-class="getMenuClass('/addressVerification')">
                    <a href="javascript:void(0);" ng-click="selectPage('addressVerification')">Address Verification</a>
                </li>
                <li ng-class="getMenuClass('/dashboard')">
                    <a href="javascript:void(0);" ng-click="selectPage('dashboard')">Dashboard</a>
                </li>
                <li ng-class="getMenuClass('/editProfile')">
                    <a href="javascript:void(0);" ng-click="selectPage('editProfile')">Update Profile</a>
                </li>               
            </ul>
            <div class="tab-content">
                <div class="active tab-pane">
                    <ng:view />
                </div>
            </div>
        </div>
    </div>  
</div>
{ ... }

In the main controller, the selectPage method looks like:

$scope.selectPage = function (page) {
    //not relevant code removed here
    $location.path("/" + page);
};

And of course I have defined the routes like:

$routeProvider.when("/search", {
    templateUrl: "/Scripts/app/views/search.html"
});

Now, what I need is these partial views to not get cached, at least while in development. For that I used the method provided here:

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

That worked perfect except in Internet Explorer, which always will load the cached version even when hitting Ctrl+F5.

Also, I tried setting the HTTP headers in the layout html, like this:

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />

But that didn't work.

So my question is if there is any way to avoid this behavior.

Those meta tags only set caching for the the layout.html file itself. You need to set the caching headers for the response from your server — Ian
– Ian, Commented Jul 15, 2014 at 18:25
But the _Layout.cshtml is the one that contains the html head, the other html files are just partial views. Where should I put those lines then? — Forte L.
– Forte L., Commented Jul 15, 2014 at 18:30
You won't be able to use meta tags for this. Meta tags will only be read on the original page served to the browser (which is completely separate from the views). You need to use ASP.NET to modify the response headers and set these values for the partials — Ian
– Ian, Commented Jul 15, 2014 at 18:32
These partial views are served with angularJS, I'm not sure how to do that in this case. — Forte L.
– Forte L., Commented Jul 15, 2014 at 18:35
I'd look at this: stackoverflow.com/questions/2195266/… - you could target the /Scripts/app/views directory — Ian
– Ian, Commented Jul 15, 2014 at 18:59

Forte L. · Accepted Answer · 2014-07-15 19:07:12Z

4

I found a workaround that is exactly what I need. Adding a version number to the route like this:

$routeProvider.when("/search", {
    templateUrl: "/Scripts/app/views/search.html" + version
});

where version is a string like: ?v1.0.0

That way any time I make a change I just change the version number and when hitting that page the partial view will be downloaded again.

answered Jul 15, 2014 at 19:07

Forte L.

2,81218 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ian Over a year ago

Note that this is supposed to disable caching completely. The HTTP spec says that a GET request with a querystring should disable caching. So technically, you're not caching a file for ?v1.0.0 and a separate one for ?v.1.1.0 - it should technically never cache as long as you have a querystring. Some browser honor this caching of versions, some honor the spec

harishr Over a year ago

check out this great link on the same topic

Forte L. Over a year ago

@HarishR, I know I can just disable the browser's cache for development and that's it. The thing is, there is a client that regularly checks the site and when I make updates he doesn't see the changes and I have to tell them to clear the browser's cache which is not ideal

harishr Over a year ago

Web.config solution should work for the client system as well

harishr · Accepted Answer · 2014-07-15 18:47:46Z

-1

use below tag in web.config to disable caching

   <staticContent>
       <clientCache cacheControlMode="DisableCache" />
    </staticContent>

answered Jul 15, 2014 at 18:47

harishr

18.1k9 gold badges84 silver badges131 bronze badges

5 Comments

harishr Over a year ago

which browser are you using?? there is disable-caching option in chrome, have you enabled that?? check this

harishr Over a year ago

also.. have u added above to <system.webServer> section?? also the solution you are saying doesnt work across browser's.

Forte L. Over a year ago

I tested in Firefox, Chrome, and IE. But IE is the only one that behaves different.

harishr Over a year ago

Exactly what Ian pointed out in his comment, plus some issues with i.e., but can't find relevant link, sorry for that.

harishr Over a year ago

@brabertaser1992 In web.config

Collectives™ on Stack Overflow

Avoid angularJS partial views to be cached in IE

2 Answers 2

4 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related