前几天项目在上线过程中，出现了一些新问题。页面在切换时由于前一个页面的模板清理不及时，会造成页面的重叠。导致这个问题的原因是：页面模板缓存，即上一个页面退出时，浏览器没有及时清空上一个页面的模板，导致新页面加载时，旧页面模板依然存在，从而页面出现重叠。

模板缓存清除：

　　模板缓存的清除包括传统的 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 -- 页面模板清除的更多相关文章

  1. angularjs定时任务的设置与清除

    人们似乎常常将AngularJS中 的$timeOut()  $interval()函数看做是一个内置的.无须在意的函数.但是,如果你忘记了$timeOut()$interval()的回调函数将会造成 ...

  2. AngularJS是为了克服HTML在构建应用上的不足而设计的

    AngularJS中文网:http://www.apjs.net/ 简介   AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构 ...

  3. 【转载】图灵AngularJS入门教程

    摘自图灵的AngularJS入门教程:http://www.ituring.com.cn/article/13471 感觉非常不错,所以推荐到首页一下! (一)Hello World! 开始学习Ang ...

  4. 混合式框架-AngularJS

    简单介绍   AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门非常好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.所以我做了一些工作(你也能够认 ...

  5. (转)构建自己的AngularJS，第一部分：Scope和Digest

    原翻译链接:https://github.com/xufei/Make-Your-Own-AngularJS/edit/master/01.md 原文链接:http://teropa.info/blo ...

  6. 前端MVC学习总结（二）——AngularJS验证、过滤器、指令

    一.验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示: <input Type="text" ng-m ...

  7. AngularJS API

    AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合 angular.lowercase() 转换字符串为小写 angular.uppercase() 转换字符串为大写 ...

  8. [整理]AngularJS移动端开发遇到的问题

    最近在开发一个移动WebAPP的小项目,因为之前一直使用AngularJS, 对于这个项目,废话不多说,拿过来就用上了. 开发过程是一路通畅和舒服的,但是,却忽略了一个非常重要的问题,移动2G环境下的 ...

  9. AngularJs:Service、Factory、Provider依赖注入使用与区别

           本教程使用AngularJS版本:1.5.3        AngularJs GitHub: https://github.com/angular/angular.js/       ...

随机推荐

  1. 在MVC3中修改KindEditor实现上传图片到指定文件夹

    KindEditor编辑器默认上传的图片文件夹,是根据系统时间自动生成的,图片是自动上传到这些文件夹里面,无法选择.如果要上传图片到指定文件夹,像相册一样管理图片,则需要扩展KindEditor编辑器 ...

  2. C#：自定义函数

    将数组转成字符串 /// <summary> /// 将数组转成字符串 /// </summary> /// <param name="glue"&g ...

  3. 趣谈unicode，ansi，utf-8，unicode big endian这些编码有什么区别

    从头讲讲编码的故事.那么就让我们找个草堆坐下,先抽口烟,看看夜晚天空上的银河,然后想一想要从哪里开始讲起.嗯,也许这样开始比较好…… 很久很久以前,有一群人,他们决定用8个可以开合的晶体管来组合成不同 ...

  4. IDEA中Git的使用基础

    场景概述 工作中多人使用版本控制软件协作开发,常见的应用场景归纳如下: 假设小组中有两个人,组长小张,组员小袁 场景一:小张创建项目并提交到远程Git仓库 场景二:小袁从远程Git仓库上获取项目源码 ...

  5. 详解C#特性和反射（二）

    使用反射(Reflection)使得程序在运行过程中可以动态的获取对象或类型的类型信息,然后调用该类型的方法和构造函数,或访问和修改该类型的字段和属性:可以通过晚期绑定技术动态的创建类型的实例:可以获 ...

  6. [error] 1507#0: *22 FastCGI sent in stderr: "Primary script unknown" while reading response header from upstream, client: 10.0.0.1, server: www.wordpress.com, request: "GET /info.p

    字体比较小,如果你遇到这个问题请仔细的把下面的总结看完. 环境:CentOS6.7.2.6.32-573.el6.x86_64.nginx1.12.2 .php5.5.38 问题:nginx能解析静态 ...

  7. 扒一扒HTTPS网站的内幕

    215年6月,维基媒体基金会发布公告,旗下所有网站将默认开启HTTPS,这些网站中最为人所知的当然是全球最大的在线百科-维基百科.而更早时候的3月,百度已经发布公告,百度全站默认开启HTTPS.淘宝也 ...

  8. Docker基础教程（安装篇）

    Linux安装: 1.yum -y install docker-io 2.service docker start 3.chkconfig docker on Window安装: Docker 引擎 ...

  9. C#调用百度地图API经验分享（三）

    这一篇我将跟大家分享一下我自己在开发过程中总结出的一些操作地图的方法,属性,及思路,希望可以让大家少走弯路. 1.定位 一般百度的示例DEMO里开始初始化地图时用的都是map.centerAndZoo ...

  10. C# 异常语句 跳转语句 while循环 穷举法 迭代法

    一  异常语句   ♦ try.....catch....finally 结构形式 try{ 可能会出错的代码语句 如果这里出错了,那么不会在继续下面的代码,而是直接进入catch中处理异常}catc ...