angularjs -- 页面模板清除
前几天项目在上线过程中,出现了一些新问题。页面在切换时由于前一个页面的模板清理不及时,会造成页面的重叠。导致这个问题的原因是:页面模板缓存,即上一个页面退出时,浏览器没有及时清空上一个页面的模板,导致新页面加载时,旧页面模板依然存在,从而页面出现重叠。
模板缓存清除:
模板缓存的清除包括传统的 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去掉,达到清除模板缓存的目的,不过这个一般不建议直接修改框架源代码!
转载于:https://www.cnblogs.com/donghuang/p/9295026.html
angularjs -- 页面模板清除相关推荐
- angularjs定时任务的设置与清除
人们似乎常常将AngularJS中的$timeOut() $interval()函数看做是一个内置的.无须在意的函数.但是,如果你忘记了$timeOut()$interval()的回调函数将会造成非 ...
- angular html清除元素,使用AngularJS删除DOM元素
我正在尝试根据当前位置路径删除导航栏. 这是我到目前为止: angular.module('myModule') .controller('MainController', function ($lo ...
- angularjs php上传文件,AngularJS 文件上传 的功能你了解的多少?几分钟就让你了解angularjs的文件上传...
本篇文章主要的讲述了angularjs的文件上传功能,大家又不懂都可以来看,希望能帮助到大家.下面就让我们一起来看这篇文章吧 问题描述附件上传 检定结果以附件形式上传. 这里先不考虑api. 实现的任 ...
- AngularJS API
AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合 angular.lowercase() 转换字符串为小写 angular.uppercase() 转换字符串为大写 ...
- 【JavaScript】前端开发框架三剑客—AngularJS VS. Backone.js VS.Ember.js
摘要:透过对Github,StackOverflow,YouTube等社区进行数据收集后可知,AngularJS在各大主流社区中都是最受欢迎的,Backbone.js与Ember.js则不相伯仲.本文 ...
- AngularJs ng-route路由详解
本篇基于ng-route来讲下angular中的路由,路由功能主要是 $routeProvider服务 与 ng-view 实现. ng-view的实现原理,是根据路由的切换,动态编译html模板-- ...
- 【AngularJS】—— 2 初识AngularJs(续)
前一篇了解了AngularJS的一些简单的使用,这里继续跟着w3c学习一下剩下的内容. 本篇根据w3cschool.cc继续学习AngularJS剩余的内容,包括: 1 事件 2 模块 3 表单 4 ...
- 如何在 ASP.NET MVC 中集成 AngularJS(3)
今天来为大家介绍如何在 ASP.NET MVC 中集成 AngularJS 的最后一部分内容. 调试路由表 - HTML 缓存清除 就在我以为示例应用程序完成之后,我意识到,我必须提供两个版本的路由表 ...
- 如何在 ASP.NET MVC 中集成 AngularJS(2)
在如何在 ASP.NET MVC 中集成 AngularJS(1)中,我们介绍了 ASP.NET MVC 捆绑和压缩.应用程序版本自动刷新和工程构建等内容. 下面介绍如何在 ASP.NET MVC 中 ...
最新文章
- CodeForces 375D Tree and Queries
- tcpdump移植和使用
- spring aop环绕通知@Around
- 法拉利杀手Koenigsegg CCX
- Pull解析Xml文件
- struts框架的原理和应用_分布式开源调度框架TBSchedule原理与应用
- IIS 发布的FTP提供下载时的转码问题
- 深入理解JavaScript系列
- 黑盒测试VS白盒测试
- java.lang.UnsatisfiedLinkError解决方法
- DirectX天空球和天空盒子模型
- Android插件化方式实现View动态更新
- 【漏洞通告】CVE-2022-36803 Atlassian Jira Align权限提升漏洞
- 笔记——输入框循环使用
- 【100%通过率】华为OD机试真题 Java 实现【预订酒店】【2022.11 Q4 新题】
- bootstrap 轮播插件
- FFmpeg的HEVC解码器源代码简单分析:解码器主干部分
- 互联网摸鱼日报(2022-12-23)
- 渣基础:比照Hawstein学Cracking the coding interview(1)
- 360度解读山内溥:百年任天堂的传奇“基因”(转)