angularjs关于页面模板清除的使用方法

来源：懂视网责编：小采时间：2020-11-27 19:33:25

angularjs关于页面模板清除的使用方法

angularjs关于页面模板清除的使用方法:这篇文章给大家介绍的内容是关于angularjs关于页面模板清除的使用方法，有着一定的参考价值，有需要的朋友可以参考一下。前几天项目在上线过程中，出现了一些新问题。页面在切换时由于前一个页面的模板清理不及时，会造成页面的重叠。导致这个问题的原因是：

推荐度：

点击下载本文 文档为doc格式

导读angularjs关于页面模板清除的使用方法:这篇文章给大家介绍的内容是关于angularjs关于页面模板清除的使用方法，有着一定的参考价值，有需要的朋友可以参考一下。前几天项目在上线过程中，出现了一些新问题。页面在切换时由于前一个页面的模板清理不及时，会造成页面的重叠。导致这个问题的原因是：

这篇文章给大家介绍的内容是关于angularjs关于页面模板清除的使用方法，有着一定的参考价值，有需要的朋友可以参考一下。

前几天项目在上线过程中，出现了一些新问题。页面在切换时由于前一个页面的模板清理不及时，会造成页面的重叠。导致这个问题的原因是：页面模板缓存，即上一个页面退出时，浏览器没有及时清空上一个页面的模板，导致新页面加载时，旧页面模板依然存在，从而页面出现重叠。

模板缓存清除：

模板缓存的清除包括传统的 HTML标签设置清除缓存，以及angularJs的一些配置清除，和angularJs的路由切换清除

1、以下是传统的清除浏览器的方法

HTMLmeta标签设置清除缓存

<!-- 清除缓存 --><meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

清理form表单临时缓存

<body onLoad="javascript:document.formName.reset()">

2、angularJs配置清除缓存

1、清除路由缓存，在route路由配置中，注入$httpProvider服务，通过$httpProvider服务配置，清除路由缓存。

app.config(["$stateProvider","$urlRouterProvider",'$locationProvider','$httpProvider',function ($stateProvider, $urlRouterProvider,$locationProvider,$httpProvider) { 
if (!$httpProvider.defaults.headers.get) {
 $httpProvider.defaults.headers.get = {};
 }
 $httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';
 $httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache';
 $httpProvider.defaults.headers.get['Pragma'] = 'no-cache';}]);

2、用随机数，随机数也是一种很不错避免缓存的的方法，即在链接 URL 参数后加上随机数(一般加时间戳) 。用随机时间，和随机数一样。

3、在状态路由配置中，将cache配置项，配置为false。

.state("discountCoupon", {
 url: "/discountCoupon", templateUrl: "discountCoupon.html?" + new Date().getTime(),　　　　//随机数
 controller: 'discountCoupon', cache: false,　　　　//cache配置})
.state("customerPhone", {
 url: "/customerPhone", templateUrl: "customerPhone.html?" + new Date().getTime(),　　　　//随机数
 controller: 'customerPhone', cache: false,　　　　//cache配置})

3、angularJs的路由切换清除缓存

angularJs默认模板加载都会被缓存起来，使用的缓存服务是 $tempalteCache, 发送模板请求的服务是$templateRequest，所以可以在路由切换时将上一个页面的模板清除：

1.每次发送 $http 请求模板完成后，可以调用 $tempalteCache.remove(url) 或 $tempalteCache. removeAll 清除所有模板缓存。

$rootScope.$on('$stateChangeStart', //路由开始切换
 function (event, toState, toParams, fromState, fromParams) { 
 //路由开始切换，清除以前所有模板缓存
 if (fromState.templateUrl !== undefined) {
 $templateCache.remove(fromState.templateUrl); 
 // $templateCache.removeAll(); }
 });

$rootScope.$on('$stateChangeSuccess', 
//路由切换完成
 function (event, toState, toParams, fromState, fromParams) { 
 //路由切换成功，清除上一个页面模板缓存
 if (fromState.templateUrl !== undefined) {
 $templateCache.remove(fromState.templateUrl); 
 // $templateCache.removeAll(); }
});

2.使用 $provide.decorator 改写原生的 $templateRequest (angularJs 自带 $provide服务里 $templateRequest: $TemplateRequestProvider)服务。在 $TemplateRequestProvider 服务里面我们可以看到默认使用了 $tempalteCache (本质还是 angularJs 的 $cacheFactory 服务) 服务，

this.$get = ['$templateCache', '$http', '$q', '$sce', function($templateCache, $http, $q, $sce) { 
function handleRequestFn(tpl, ignoreRequestError) {
 handleRequestFn.totalPendingRequests++;

并在获取模板时，默认以 $templateCache 作为 cache使用，将获取到的模板数据，添加到 $templateCache内保存。

return $http.get(tpl, extend({ 
cache: $templateCache,
 transformResponse: transformResponse
}, httpOptions))
 ['finally'](function () {
 handleRequestFn.totalPendingRequests--;
})
 .then(function (response) { 
 $templateCache.put(tpl, response.data); 
 return response.data;
 }, handleError);

所以可以通过禁掉缓存，在 $templateRequest 的源码中将 $tempalteCache去掉，达到清除模板缓存的目的，不过这个一般不建议直接修改框架源代码！

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

angularjs关于页面模板清除的使用方法

推荐度：

点击下载本文 文档为doc格式

标签：清空清除的方法

热门焦点

angularjs关于页面模板清除的使用方法

angularjs关于页面模板清除的使用方法

模板缓存清除：

angularjs关于页面模板清除的使用方法

最新推荐

猜你喜欢

热门推荐