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 相关文章推荐
关于query Javascript CSS Selector engine
Apr 12 Javascript
JS获取当前日期时间并定时刷新示例
Mar 04 Javascript
实例详解jQuery表单验证插件validate
Jan 18 Javascript
三种Node.js写文件的方式
Mar 08 Javascript
javascript冒泡排序小结
Apr 10 Javascript
Javascript中浏览器窗口的基本操作总结
Aug 18 Javascript
JavaScript 闭包机制详解及实例代码
Oct 10 Javascript
解决LayUI表单获取不到data的问题
Aug 20 Javascript
vue  directive定义全局和局部指令及指令简写
Nov 20 Javascript
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
Aug 01 Javascript
Element Tooltip 文字提示的使用示例
Jul 26 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中fgetcsv()函数用法实例
2014/11/28 PHP
64位windows系统下安装Memcache缓存
2015/12/06 PHP
PHP使用strtotime获取上个月、下个月、本月的日期
2015/12/30 PHP
功能强大的php分页函数
2016/07/20 PHP
php命令行模式代码实例详解
2021/02/26 PHP
收集的一些Array及String原型对象的扩展实现代码
2010/12/05 Javascript
javascript利用apply和arguments复用方法
2013/11/25 Javascript
DOM操作一些常用的属性汇总
2015/03/13 Javascript
jQuery实现图片轮播特效代码分享
2015/09/15 Javascript
js简单判断移动端系统的方法
2016/02/25 Javascript
javascript Promise简单学习使用方法小结
2016/05/17 Javascript
JavaScript实现类似淘宝的购物车效果
2017/03/16 Javascript
详解如何在vue中使用sass
2017/06/21 Javascript
Vue computed计算属性的使用方法
2017/07/14 Javascript
vue环境搭建简单教程
2017/11/07 Javascript
浅析JS抽象工厂模式
2017/12/14 Javascript
Vue.js 父子组件通信的十种方式
2018/10/30 Javascript
Vue使用NProgress的操作过程解析
2019/10/10 Javascript
VUE注册全局组件和局部组件过程解析
2019/10/10 Javascript
JavaScript仿京东秒杀倒计时
2020/03/17 Javascript
Vue管理系统前端之组件拆分封装详解
2020/08/23 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
2020/10/29 Javascript
[17:00]DOTA2 HEROS教学视频教你分分钟做大人-帕克
2014/06/10 DOTA
Python3处理HTTP请求的实例
2018/05/10 Python
python numpy格式化打印的实例
2018/05/14 Python
Pycharm2017版本设置启动时默认自动打开项目的方法
2018/10/29 Python
使用 Python 处理 JSON 格式的数据
2019/07/22 Python
Python 图片处理库exifread详解
2021/02/25 Python
HTML5新标签兼容——&gt; 的两种方法
2018/09/12 HTML / CSS
德国游戏机商店:Konsolenkost
2019/12/08 全球购物
墨西哥购物网站:Elektra
2020/01/21 全球购物
咖啡店的创业计划书,让你hold不住
2014/01/03 职场文书
《千年梦圆在今朝》教学反思
2014/02/24 职场文书
汽车车尾标语大全
2015/08/11 职场文书
2016教师校本培训心得体会
2016/01/08 职场文书
Spring Cloud 中@FeignClient注解中的contextId属性详解
2021/09/25 Java/Android