Angularjs实现页面模板清除的方法

更新时间：2018年07月20日 07:35:32 作者：西岭千秋雪

这篇文章主要介绍了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去掉，达到清除模板缓存的目的，不过这个一般不建议直接修改框架源代码！

总结

以上所述是小编给大家介绍的Angularjs实现页面模板清除的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

Angular 2父子组件数据传递之@Input和@Output详解(下)
这篇文章主要给大家介绍了关于Angular 2父子组件数据传递之@Input和@Output的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
2017-07-07
一篇文章快速了解Angular和Ionic生命周期和钩子函数
Ionic以AngularJS和ApacheCordova为基础,使用Node.js进行模块管理，使用Html5、Css(SASS)和Javascript技术进行APP开发,这篇文章主要给大家介绍了如何通过一篇文章快速了解Angular和Ionic生命周期和钩子函数的相关资料,需要的朋友可以参考下
2021-07-07
自学实现angularjs依赖注入
这篇文章主要为大家详细介绍了angularjs依赖注入的自己成果，如何实现angularjs依赖注入，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
Angularjs上传图片实例详解
上传图片需要引入插件ngFileUpload，使用bower安装方法，下面通过本文给大家介绍Angularjs上传图片实例详解，希望对大家有所帮助
2017-08-08
Angular动态绑定样式及改变UI框架样式的方法小结
AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。这篇文章主要介绍了Angular动态绑定样式及改变UI框架样式的方法小结,需要的朋友可以参考下
2018-09-09
AngularJS表单提交实例详解
这篇文章主要介绍了AngularJS表单提交的方法,结合完整实例形式分析了AngularJS表单提交过程中的数据绑定、模块、控制器等相关操作技巧,需要的朋友可以参考下
2017-02-02
angularjs获取到My97DatePicker选中的值方法
今天小编就为大家分享一篇angularjs获取到My97DatePicker选中的值方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-10-10
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
Angular用户都想知道数据绑定是怎么实现的。你可能会看到各种各样的词汇：$watch,$apply,$digest它们是如何工作的呢？这里我想回答这些问题，其实它们在官方的文档里都已经回答了，但是我还是想把它们结合在一起来讲
2015-10-10
AngularJS基础 ng-dblclick 指令用法
本文主要介绍AngularJS ng-dblclick 指令,这里对ng-dblclick基础资料整理并详细介绍,简单的代码实例和实现效果,希望能帮助学习AngularJS的朋友
2016-08-08
详解Angular.js的$q.defer()服务异步处理
相信大家都知道jquery和angular都有defer服务，这篇文章暂以angular为例谈谈个人的理解，在文章的最后并附上jquery的阮一峰总结的defer。有需要的朋友们也可以参考借鉴，下面来一起学习学习吧。
2016-11-11