AngularJs 禁止模板缓存

最新推荐文章于 2021-08-05 18:58:31 发布

原创最新推荐文章于 2021-08-05 18:58:31 发布 · 1.2w 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#angular #模板 #缓存 #angularjs

AngularJS的HTML模板加载默认会被缓存，导致修改模板后需要清除浏览器缓存才能看到更新。为解决这个问题，可以不使用浏览器缓存或者在路由配置后使用$templateCache来禁止AngularJS的模板缓存，确保用户始终获取最新模板。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因为AngularJs的特性（or 浏览器本身的缓存？），angular默认的HTML模板加载都会被缓存起来。导致每次修改完模板之后都得经常需要清除浏览器的缓存来保证浏览器去获得最新的html模板，自己测试还好，但如果更新了服务器的模板内容，用户可不会每个都配合你去清除浏览器的缓存。故这还真是个大问题。

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

方法一：在模板文件路径后加时间戳（or 其他随机数），强制AngularJs每次从服务器加载新的模板

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

不过这种方法太不美观了。。。。

方法二：使用$templateCache清除缓存

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

在配置路由地址后，即在app.config之后添加这段代码，可禁止AngularJs将templateUrl缓存起来。