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, Jul 15 '14 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., Jul 15 '14 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, Jul 15 '14 at 18:32
These partial views are served with angularJS, I'm not sure how to do that in this case. — Forte L., Jul 15 '14 at 18:35
No, these partial views are served by your server (`/Scripts/app/views/search.html`) - your Angular app happens to use them. You've already discovered Angular caching, which you have disabled (I've done the same thing, probably for the same reasons as you). Now you're trying to get past browser caching (IE happens to do it a lot). The caching you need to disable has to be done from the server, by modifying response headers. Look into disabling cache with ASP.NET. But I'll see if I can find something (I don't actively use ASP.NET anymore, so I don't have a quick answer) — Ian, Jul 15 '14 at 18:52
I'd look at this: http://stackoverflow.com/questions/2195266/how-to-configure-static-content-cache-per-folder-and-extension-in-iis7 - you could target the `/Scripts/app/views` directory — Ian, Jul 15 '14 at 18:59

score 4 · Accepted Answer · answered Jul 15 '14 at 19:07

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 '14 at 19:07

Forte L.

2,772
16
25

1

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 – Ian Jul 15 '14 at 19:10
check out this [great link](http://stackoverflow.com/questions/5690269/disabling-chrome-cache-for-website-development?lq=1) on the same topic – harishr Jul 15 '14 at 19:19
@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 – Forte L. Jul 15 '14 at 19:22
Web.config solution should work for the client system as well – harishr Jul 16 '14 at 03:57

score -1 · Answer 2 · answered Jul 15 '14 at 18:47

-1

use below tag in web.config to disable caching

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

answered Jul 15 '14 at 18:47

harishr

17,807
9
78
125

which browser are you using?? there is disable-caching option in chrome, have you enabled that?? [check this](http://stackoverflow.com/questions/5690269/disabling-chrome-cache-for-website-development/15655936#15655936) – harishr Jul 15 '14 at 19:05
also.. have u added above to section?? also the solution you are saying doesnt work across browser's. – harishr Jul 15 '14 at 19:12
I tested in Firefox, Chrome, and IE. But IE is the only one that behaves different. – Forte L. Jul 15 '14 at 19:18
Exactly what Ian pointed out in his comment, plus some issues with i.e., but can't find relevant link, sorry for that. – harishr Jul 16 '14 at 03:58
@brabertaser1992 In web.config – harishr Jan 25 '15 at 13:24

Avoid angularJS partial views to be cached in IE

2 Answers2

Linked