How to disable template caching in AngularJs

This article mainly introduces the method of disabling template caching in AngularJs. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor and take a look.

This article introduces the method of disabling template caching in AngularJs. Share it with everyone and leave a note for yourself. It has the following characteristics:

Because of the characteristics of AngularJs (or The browser's own cache?), 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.

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 a new template from the server every time

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, adding this code after app.config, you can prevent AngularJs from caching templateUrl.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to read the full text in vue

How to get dom elements in vue

How to convert timestamp format in js

Deploy vue project on nginx (detailed tutorial)

In How to implement element scroll bar loop to append content in JavaScript

How to implement side-sliding menu effect in vue swiper

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!