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对象学习经验整理
Oct 12 Javascript
javaScript中的this示例学习详解及工作原理
Jan 13 Javascript
关闭时刷新父窗口两种方法
May 07 Javascript
javascript 构造函数方式定义对象
Jan 02 Javascript
自己动手手写jQuery插件总结
Jan 20 Javascript
JS实现浏览上传文件的代码
Aug 23 Javascript
JavaScript门面模式详解
Oct 19 Javascript
Vue集成Iframe页面的方法示例
Dec 12 Javascript
vue-cli3全面配置详解
Nov 14 Javascript
JS实现音乐导航特效
Jan 06 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
May 10 Javascript
原生JavaScript实现随机点名表
Jan 14 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
改写ThinkPHP的U方法使其路由下分页正常
2014/07/02 PHP
PHP的运行机制与原理(底层)
2015/11/16 PHP
使用PHP uniqid函数生成唯一ID
2015/11/18 PHP
验证坐标在某坐标区域内php代码
2016/10/08 PHP
PHP用mysql_insert_id()函数获得刚插入数据或当前发布文章的ID
2016/11/25 PHP
PHP校验15位和18位身份证号的类封装
2018/11/07 PHP
PHP PDOStatement::columnCount讲解
2019/01/30 PHP
JQuery Tab选项卡效果代码改进版
2010/04/01 Javascript
Javascript学习指南
2014/12/01 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
2015/04/06 Javascript
基于jquery实现一个滚动的分步注册向导-附源码
2015/08/26 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
2015/10/23 Javascript
Bootstrap table使用方法详细介绍
2016/12/09 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
2017/02/07 Javascript
webstorm中配置nodejs环境及npm的实例
2018/05/15 NodeJs
vue实现条件叠加搜索的解决方法
2019/05/28 Javascript
Jquery Datatables的使用详解
2020/01/30 jQuery
vue商城中商品“筛选器”功能的实现代码
2020/07/01 Javascript
[03:49]辉夜杯现场龙骑士COSER秀情商“我喜欢芬队!”
2015/12/27 DOTA
Python正则捕获操作示例
2017/08/19 Python
python 生成器协程运算实例
2017/09/04 Python
python批量解压zip文件的方法
2019/08/20 Python
使用python快速在局域网内搭建http传输文件服务的方法
2019/11/14 Python
python中加背景音乐如何操作
2020/07/19 Python
基于Python中Remove函数的用法讨论
2020/12/11 Python
DJI大疆无人机官方商城:全球领先的无人飞行器研发和生产商
2016/12/21 全球购物
Boden美国官网:英伦原创时装品牌
2017/07/03 全球购物
《画杨桃》教学反思
2014/04/13 职场文书
安全保证书范文
2014/04/29 职场文书
书法大赛策划方案
2014/06/04 职场文书
大三学年自我鉴定范文(3篇)
2014/09/28 职场文书
增值税发票丢失证明
2015/06/19 职场文书
Golang 实现超大文件读取的两种方法
2021/04/27 Golang
用React Native制作一个简单的游戏引擎
2021/05/27 Javascript
react 路由Link配置详解
2021/11/11 Javascript
漫画《催眠麦克风-Dawn Of Divisions》第二卷PV公开
2022/04/05 日漫