Angular1.x 缓存问题

Angular1.x 缓存问题

​ 模板加载后，AngularJS会将它默认缓存到 $templateCache 服务中。

在实际生产中，可以提前将模板缓存到一个定义模板的JavaScript文件中，这

样就不需要通过XHR来加载模板了$templateCache 服务允许 $http 服务缓存经过XHR的模板请求，

这样它们就只会被请求一次。当一个模板被取到了，它的内容就会存储在 $templateCache 中，用模板路径作键。

例如，当获取下面的实例指令时，它会请求 templateUrl 并且把模板的内容放在 $templateCache中：

angular.module('myApp').directive('notification', function($timeout) {
    return {
        restrict: 'A',
        scope: { ngModel: '=' },
        templateUrl: 'views/templates/notification.html',
    }
});

$templateCache 会 把 这 个 模 板 的 内 容 保 持 在$templateCache('views/templates/notification.html')中。

​ 如果已经预先在$templateCache中存放了测试所需的指令文件内容，就可以使用$templateCache来阻止在指令的单元测试中再产生请求。可以使用优秀的 karma-ng-html2js-preprocessor 包来把模板转换成可在测试中使用的Angular模块。利用 $templateCache

​ 在生产中部署应用时，我们都希望应用的加载尽可能快，以及尽可能做出响应。使用XHR加载模板可能会导致Web应用缓慢或者有卡顿的感觉。可以通过将模板包装为JavaScript文件，然后连同应用程序的其他部分一起传输的方式伪造模板缓存加载，而不是通过XHR提取模板。关于如何有效地包装模板的详细信息，请参考 $templateCache 工具： grunt-angular-templates 。默认情况下，Angular无法从本地 $tempalteCache 中找到模板时，会通过XHR提取模板。当XHR请求很慢，或者模板很大时，它可能会对应用的用户体验造成很大的负面影响。

​ 可以通过“伪造” $templateCache 已经被填充的方式来避免这一延迟，这样Angular就不必从远程加载模板。可以在JavaScript中手动实现这个技巧，就像这样：

angular.module('myApp',[])
    .run(function($templateCache) {
        $templateCache.put('home.html', 'This is the home template');
});

现在，当Angular需要提取名为home.html的模板时，它会在 $templateCahce 中找到它，而无需从服务器提取。

使用$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缓存起来。