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 相关文章推荐
js中判断控件是否存在
Aug 25 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
Mar 09 Javascript
jQuery三级下拉列表导航菜单代码分享
Apr 15 Javascript
JS右下角广告窗口代码(可收缩、展开及关闭)
Sep 04 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
Aug 08 Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
Nov 16 Javascript
JavaScript数组去重的方法总结【12种方法,号称史上最全】
Feb 28 Javascript
详解vue使用$http服务端收不到参数
Apr 19 Javascript
一次让你了解全部JavaScript的作用域
Jun 24 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
Sep 02 Javascript
d3.js 地铁轨道交通项目实战
Nov 27 Javascript
vue style width a href动态拼接问题的解决
Aug 07 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
经典的PHPer为什么被认为是草根?
2007/04/02 PHP
Windows 下的 PHP-PEAR 安装方法
2010/11/20 PHP
php 下载保存文件保存到本地的两种实现方法
2013/08/12 PHP
php过滤敏感词的示例
2014/03/31 PHP
PHP设计模式之观察者模式(Observer)详细介绍和代码实例
2014/04/08 PHP
ThinkPHP CURD方法之field方法详解
2014/06/18 PHP
PHP实现下载断点续传的方法
2014/11/12 PHP
ThinkPHP模型详解
2015/07/27 PHP
Yii列表定义与使用分页方法小结(3种方法)
2016/07/15 PHP
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
2007/04/29 Javascript
firefo xml 读写实现js代码
2009/06/11 Javascript
jQuery实战之仿淘宝商城左侧导航效果
2011/04/12 Javascript
基于dom编程中 动态创建与删除元素的使用
2013/04/17 Javascript
用Javascript来生成ftp脚本的小例子
2013/07/03 Javascript
jquery选择器之内容过滤选择器详解
2014/01/27 Javascript
JS实现仿新浪黄色经典滑动门效果代码
2015/09/27 Javascript
浅谈javascript中执行环境(作用域)与作用域链
2016/12/08 Javascript
jQuery实现菜单栏导航效果
2017/08/15 jQuery
AngularJS中下拉框的基本用法示例
2017/10/11 Javascript
浅谈webpack 自动刷新与解析
2018/04/09 Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
2019/04/20 Javascript
[04:22]DOTA2大事件之护国神翼
2020/08/14 DOTA
windows下python模拟鼠标点击和键盘输示例
2014/02/28 Python
Python中的面向对象编程详解(上)
2015/04/13 Python
详解Python用户登录接口的方法
2019/04/17 Python
Python如何将图像音视频等资源文件隐藏在代码中(小技巧)
2020/02/16 Python
Python如何将装饰器定义为类
2020/07/30 Python
python爬虫多次请求超时的几种重试方法(6种)
2020/12/01 Python
中科软笔试题和面试题
2014/10/07 面试题
工地质量标语
2014/06/12 职场文书
公司收款委托书范本
2014/09/20 职场文书
工厂清洁工岗位职责
2015/02/14 职场文书
银行求职信范文怎么写
2015/03/20 职场文书
2015年社区统计工作总结
2015/04/21 职场文书
详解TypeScript中的类型保护
2021/04/29 Javascript
Python人工智能之混合高斯模型运动目标检测详解分析
2021/11/07 Python