这篇文章主要介绍了Angularjs如何实现页面模板清除的方法，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
1、js属于一种解释性脚本语言；2、在绝大多数浏览器的支持下，js可以在多种平台下运行，拥有着跨平台特性；3、js属于一种弱类型脚本语言，对使用的数据类型未做出严格的要求，能够进行类型转换，简单又容易上手；4、js语言安全性高，只能通过浏览器实现信息浏览或动态交互，从而有效地防止数据的丢失；5、基于对象的脚本语言，js不仅可以创建对象，也能使用现有的对象。
模板缓存清除：
模板缓存的清除包括传统的 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去掉，达到清除模板缓存的目的，不过这个一般不建议直接修改框架源代码！
感谢你能够认真阅读完这篇文章，希望小编分享的“Angularjs如何实现页面模板清除的方法”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
