How to bypass template cache in angularjs?

Question

When I made changes in any template (html) in my code and refresh from browser then the changes does not occur in application.

I want to bypass template cache when I made changes in any template i.e I want when I make any changes in template and refresh from browser then the code should be updated code not from $templateCache.

And how could I know that there is any changes in template programmatically?

I have tried this code too from Stackoverflow reference.

app.run(function($rootScope, $templateCache) {
   $rootScope.$on('$viewContentLoaded', function($event) {
       console.log($event);
       alert("abc");
      //$templateCache.removeAll();
        $templateCache("templates").removeAll();
   });
});

Is it possible that the browser does caching? – Reut Sharabani Sep 09 '15 at 06:37 — Reut Sharabani, Sep 09 '15 at 06:37
Yes, browser does, most of the time. Especially IE. – Arghya C Sep 09 '15 at 06:45 — Arghya C, Sep 09 '15 at 06:45

score 1 · Answer 1 · answered Sep 09 '15 at 06:40

1

I assume this is due to you actively working on the webpage and want to see your changes immediately, and not something you actually need for production? If so, then you could just turn off the cache in your browser. In chrome you do this by going to developer tools -> Settings -> General and tick 'Disable cache (while DevTools is open)

answered Sep 09 '15 at 06:40

JonasR

140
1
9

I don't want to disable cache since a lot of thing is dependent on cache and performance issue too. And we can't say to client to use ctrl+f5 / ctrl+shift+R to refresh the application. – Sunil Madan Sep 09 '15 at 07:03

Reut Sharabani · Answer 2 · 2015-09-09T07:00:09.200

0

It's possible that the browser does some caching regardless of your logic.

Try sending the header: Cache-Control: no-cache (section 14.9) if you never want a request cached.

no-cache:

If the no-cache directive does not specify a field-name, then a cache MUST NOT use the response to satisfy a subsequent request without successful revalidation with the origin server. This allows an origin server to prevent caching even by caches that have been configured to return stale responses to client requests.

For development you can also disable the cache in the browser, or use ctrl+f5/ctrl+shift+R or the key combination for your browser/os which will forcefully reload the page bypassing the cache.

edited Sep 09 '15 at 07:00

answered Sep 09 '15 at 06:55

Reut Sharabani

30,449
6
70
88

I don't want to disable cache since a lot of thing is dependent on cache and performance issue too. And we can't say to client to use ctrl+f5 / ctrl+shift+R to refresh the application. – Sunil Madan Sep 09 '15 at 07:00
If all you want is to refresh the browser's cache entry it should be a simple key combination. – Reut Sharabani Sep 09 '15 at 07:00
Can I remove the cache of the all templates or the template in which I made changes...? – Sunil Madan Sep 09 '15 at 07:03
If you're on a specific page you can refresh the requests from this page, which should effectively refresh only what is relevant in this page (including the specific request that generated the content). – Reut Sharabani Sep 09 '15 at 07:04
I think you can use a request interceptor and add parameter to over come browser caching, checkout [this question](http://stackoverflow.com/questions/18123462/how-to-prevent-caching-in-ie8-when-using-angularjs-models) – Technoshaft Oct 28 '15 at 09:54

How to bypass template cache in angularjs?

2 Answers2