How to disable template caching in AngularJs

Because of the characteristics of AngularJs (or the cache of the browser itself?), angular's default HTML template loading will be cached. As a result, every time you modify the template, you often need to clear the browser's cache to ensure that the browser obtains the latest HTML template. It's okay to test by yourself, but if the template content of the server is updated, not every user will cooperate with you. Clear your browser's cache. So this is really a big problem. In this article, we mainly introduce how to disable template caching in AngularJs.

app.config(function($routeProvider, $locationProvider) { 
 $routeProvider 
  .when('/Book/:bookId/ch/', { 
  templateUrl: 'chapter.html', 
  controller: 'ChapterController' 
 }); 
});

Method 1: Add a timestamp (or other random number) after the template file path to force AngularJs to load from the server every time New template

app.config(function($routeProvider, $locationProvider) { 
 $routeProvider 
  .when('/Book/:bookId/ch/', { 
  templateUrl: 'chapter.html' + '?datestamp=' + (new Date()).getTime(), 
  controller: 'ChapterController' 
 }); 
});

But this method is too unsightly. . . .

Method 2: Use $templateCache to clear the cache

// 禁止模板缓存 
app.run(function($rootScope, $templateCache) { 
  $rootScope.$on('$routeChangeStart', function(event, next, current) { 
    if (typeof(current) !== 'undefined'){ 
      $templateCache.remove(current.templateUrl); 
    } 
  }); 
});

After configuring the routing address, that is, in app.config Add this code later to prevent AngularJs from caching templateUrl.

Related recommendations:

How to clear browser cache in angularJs

Detailed introduction to the advanced usage of drop-down boxes in AngularJS

Summary of common knowledge for getting started with AngularJS

The above is the detailed content of How to disable template caching in AngularJs. For more information, please follow other related articles on the PHP Chinese website!