How to clear browser cache between routes AngularJS

Question

I have tried several things to clear browser cache while routing between pages.like cache: false , index.html?x=1 , target="_self" , disableCache: true, in $routeProvider as well .but any of this didn't worked for me.finaly $window.location.reload(); worked.but i do not want reload the page every time when routing.is there any perfect solution for route cache in AngulerJs?

scenario

In my header.html have ng-if="currentPath ==='/store'" .it's check current path and display some styles regarding to store in header.html

header.html

<div class="container" ng-if="currentPath ==='/store'">
    <div class="col-xs-8 buttons" >
      <a class="brand" href="#" target="_self"><img src="img/logo.png" /></a>
      <a class="btns" href="#Store" target="_self">Store</a>
    </div>

<ul class="col-xs-4 icons">
      <li ><a href="#/profile" class="display_name"><i class="fa"></i>{{user.email}}</a></li>
      <li><a href="#/cart"> <span ng-show="cart_size > 0" class="count">{{cart_size}}</span></a></li>
 </ul>
<--some styles for store.......-->
</div>
<div class="container" ng-if="currentPath !=='/store'">
    <div class="col-xs-8 buttons" >
      <a class="brand" href="#" target="_self"><img src="img/logo.png" /></a>
      <a class="btns" href="#Store" target="_self">Store</a>
    </div>

  </div>

current issue

when i go into store page i have to refresh browser to display store styles in header. after that go into another page,store styles still display in header.then i have to refresh again. how to solve this issue?

Answer 1

You may try

angular.element('html[manifest=saveappoffline.appcache]').attr('content', '');

where you want to disable cache.

The manifest attribute specifies the location of the document's cache manifest.

As per w3schools.com

HTML5 introduces application cache, which means that a web application is cached, and accessible without an internet connection.

Application cache gives an application three advantages:

1. Offline browsing - users can use the application when they're offline Speed - cached resources load faster

2. Reduced server load - the browser will only download updated/changed resources from the server

The manifest attribute should be included on every page of your web application that you want cached.

The manifest file is a simple text file that lists the resources the browser should cache for offline access.

To learn more about how to create the manifest file, please read our HTML5 Application Cache chapter.

Another solution that you can try is add following snippet on your angular apps header so that your page will never be cached.

<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>