开发过程中遇到了 Angular 模板存在缓存的情况,异步拉取 html 模板文件的时候,有缓存。

目录速览

  1. 前言
  2. 解决方法
  3. 参考链接

前言

Angular的模板缓存问题严重,如果修改了模板文件,上传到服务器,Angular不会去主动拉取新的模板文件,造成不能及时显示更新的部分。

解决方法

1
2
3
4
5
6
7
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/Book/:bookId/ch/', {
templateUrl: 'chapter.html',
controller: 'ChapterController'
});
});

angular的模板缓存问题比较严重,由于绝大部分是模板片段,没有header,不能设置禁止缓存头,而且又是通过ajax来请求的;后来想到的解决方案是给html模板打版本号,但是使用gulp插件对html模板片段进行版本号处理并且在js中修改模板名,并不容易做到;后来寻找到两份解决方案:(个人推荐两种方案联合使用,但第一个也足够使用了)

  1. 在模板文件路径后加时间戳(or 其他随机数),强制AngularJs每次从服务器加载新的模板

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    app.config(function($routeProvider, $locationProvider) {
    var getTimestamp = function(){
    var t = (new Date()).getTime();
    return Math.floor(t/100);
    };
    $routeProvider
    .when('/Book/:bookId/ch/', {
    templateUrl: 'chapter.html?t=' + getTimestamp(),
    controller: 'ChapterController'
    });
    });
  2. 使用$templateCache清除缓存

    1
    2
    3
    4
    5
    6
    7
    8
    // 禁止模板缓存
    app.run(function($rootScope, $templateCache) {
    $rootScope.$on('$routeChangeStart', function(event, next, current) {
    if (typeof(current) !== 'undefined'){ // Attetion
    $templateCache.remove(current.templateUrl);
    }
    });
    });

该方法有一个弊端,那就是必须在单页内进行跳转的时候才会移除掉模板缓存,而在多页情况下连续跳转并不能起作用,所以,还是第一种方法靠谱;

参考链接

AngularJs 禁止模板缓存