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脚本代码跑起来。
Jan 09 Javascript
获取JavaScript用户自定义类的类名称的代码
Mar 08 Javascript
IE Firefox 使用自定义标签的区别
Oct 15 Javascript
javascript实现全局匹配并替换的方法
Apr 27 Javascript
整理Javascript基础入门学习笔记
Nov 29 Javascript
js实现拖拽功能
Mar 01 Javascript
vue.js路由跳转详解
Aug 28 Javascript
浅谈vue项目重构技术要点和总结
Jan 23 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
Jan 20 Javascript
Vue动态面包屑功能的实现方法
Jul 01 Javascript
selenium+java中用js来完成日期的修改
Oct 31 Javascript
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
搭建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 图片上添加透明度渐变的效果
2009/06/29 PHP
Linux下CoreSeek及PHP扩展模块的安装
2012/09/23 PHP
Eclipse中php插件安装及Xdebug配置的使用详解
2013/04/25 PHP
php递归方法实现无限分类实例代码
2014/02/28 PHP
学习php设计模式 php实现桥梁模式(bridge)
2015/12/07 PHP
Linux平台PHP5.4设置FPM线程数量的方法
2016/11/09 PHP
CI框架封装的常用图像处理方法(缩略图,水印,旋转,上传等)
2016/11/22 PHP
php操作redis常见方法示例【key与value操作】
2020/04/14 PHP
javascript的函数
2007/01/31 Javascript
Javascript attachEvent传递参数的办法
2009/12/14 Javascript
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
2011/01/12 Javascript
jQuery数据缓存功能的实现思路及简单模拟
2013/05/27 Javascript
jQuery读取和设定KindEditor值的方法
2013/11/22 Javascript
从零学JSON之JSON数据结构
2014/05/19 Javascript
JS组件Form表单验证神器BootstrapValidator
2016/01/26 Javascript
jquery按回车键实现表单提交的简单实例
2016/05/25 Javascript
Dojo获取下拉框的文本和值实例代码
2016/05/27 Javascript
JavaScript解析JSON格式数据的方法示例
2017/01/24 Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
2017/03/24 jQuery
vue组件生命周期详解
2017/11/07 Javascript
vue-cli中的babel配置文件.babelrc实例详解
2018/02/22 Javascript
区别JavaScript函数声明与变量声明
2018/09/12 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
2018/12/13 Javascript
python顺序的读取文件夹下名称有序的文件方法
2018/07/11 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/26 Python
Python实现屏幕录制功能的代码
2020/03/02 Python
Python实现验证码识别
2020/06/15 Python
Python  word实现读取及导出代码解析
2020/07/09 Python
乌克兰最大的家用电器和电子产品连锁店:Eldorado
2019/10/02 全球购物
三年大学自我鉴定
2014/01/16 职场文书
军训自我鉴定怎么写
2014/02/13 职场文书
医德医风演讲稿
2014/05/20 职场文书
2015元旦感言
2015/12/09 职场文书
MySQL数据库中varchar类型的数字比较大小的方法
2021/11/17 MySQL
Nginx 反向代理解决跨域问题多种情况分析
2022/01/18 Servers