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


Posted in Javascript onJuly 20, 2018

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

模板缓存清除:

模板缓存的清除包括传统的 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实现页面模板清除的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript自定义排序 node运行 实例
Jun 05 Javascript
JS获取地址栏参数的几种方法小结
Feb 28 Javascript
javascript作用域和闭包使用详解
Apr 25 Javascript
angular简介和其特点介绍
Jan 29 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
Aug 13 Javascript
微信小程序 教程之条件渲染
Oct 18 Javascript
JavaScript调试的多个必备小Tips
Jan 15 Javascript
vue如何获取点击事件源的方法
Aug 10 Javascript
Bootstrap table使用方法记录
Aug 23 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
Oct 26 Javascript
函数式编程入门实践(一)
Apr 20 Javascript
p5.js绘制创意自画像
Nov 04 Javascript
搭建vue开发环境
Jul 19 #Javascript
jQuery实现表单动态添加数据并提交的方法
Jul 19 #jQuery
微信小程序项目实践之九宫格实现及item跳转功能
Jul 19 #Javascript
js调用设备摄像头的方法
Jul 19 #Javascript
微信小程序定位当前城市的方法
Jul 19 #Javascript
微信小程序表单验证form提交错误提示效果
Jun 19 #Javascript
js中split()方法得到的数组长度问题
Jul 19 #Javascript
You might like
php 魔术方法详解
2014/11/11 PHP
thinkphp四种url访问方式详解
2014/11/28 PHP
jQuery 连续列表实现代码
2009/12/21 Javascript
33个优秀的 jQuery 图片展示插件分享
2012/03/14 Javascript
通过Javascript创建一个选择文件的对话框代码
2012/06/16 Javascript
一个JavaScript处理textarea中的字符成每一行实例
2014/09/22 Javascript
JS基于面向对象实现的放烟花效果
2015/05/07 Javascript
js调用百度地图及调用百度地图的搜索功能
2015/09/07 Javascript
js中不同的height, top的区别对比
2015/09/24 Javascript
javascript性能优化之事件委托实例详解
2015/12/12 Javascript
基于JS+Canves实现点击按钮水波纹效果
2016/09/15 Javascript
使用JavaScript获取URL中的参数(两种方法)
2016/11/16 Javascript
Vue.js实现一个todo-list的上移下移删除功能
2017/06/26 Javascript
Vue filters过滤器的使用方法
2017/07/14 Javascript
JavaScript使用math.js进行精确计算操作示例
2018/06/19 Javascript
JS实现的简单分页功能示例
2018/08/23 Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
2020/06/04 Javascript
在Vue中使用Select选择器拼接label的操作
2020/10/22 Javascript
vue 动态生成拓扑图的示例
2021/01/03 Vue.js
python顺序的读取文件夹下名称有序的文件方法
2018/07/11 Python
Pycharm更换python解释器的方法
2018/10/29 Python
解决python3.5 正常安装 却不能直接使用Tkinter包的问题
2019/02/22 Python
Python提取频域特征知识点浅析
2019/03/04 Python
Python3实现的判断环形链表算法示例
2019/03/07 Python
python中字典增加和删除使用方法
2020/09/30 Python
pycharm 关闭search everywhere的解决操作
2021/01/15 Python
如何用python开发Zeroc Ice应用
2021/01/29 Python
你的自行车健身专家:FaFit24
2016/11/16 全球购物
英国女士家居服网站:hush
2017/08/09 全球购物
DataList 能否分页,请问如何实现?
2015/05/03 面试题
what is the difference between ext2 and ext3
2013/11/03 面试题
进步之星获奖感言
2014/02/22 职场文书
2015年行政部工作总结
2015/04/28 职场文书
2016中秋节晚会开场白
2015/11/26 职场文书
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
2021/03/31 jQuery
python munch库的使用解析
2021/05/25 Python