angularJS学习笔记:页面缓存与页面刷新

遇到的问题

现在存在这样一个问题,登录前与登录成功后是同一个页面,只不过通过ngIf来控制哪部分显示,图像信息如下:

所以,整体工作不是很难,无非就是页面的布局,不过ionic提供了一套UI,可以很方便的布局到这个程度。

但是,当我布局好,接口也连接上以后,测试才发现有些地方有延迟,就像这样:

这个过程这样解释:

  • 点击“我的”进入个人中心
  • 我没有登录,展示的是未登录页面,点击登录
  • 进入登录页面,输入用户名密码并登录成功,返回主页面
  • 点击“我的”,显示的还是未登录页面!

所以现在问题出来了,在第四步的时候,应该进入的是个人页面,而非未登录状态。

html代码如下:


  1. <div class="my_buttons" ng-if="noLogin">
  2. <div class="row">
  3. <a ng-href="#/login">登录</a>
  4. <a ng-href="#/register">注册</a>
  5. </div>
  6. </div>
  7. <div class="my_photo" ng-if="!noLogin">
  8. <a ng-href="/#/my/{{user.id}}">
  9. <div class="login_logo">
  10. <img src="http://120.24.218.56/static/images/users/{{user.profilePhotoId}}" alt="">
  11. <p ng-bind="user.username"></p>
  12. </div>
  13. </a>
  14. </div>

先说一下最终的解决方法吧,解决方法就是在路由中,进入该页面时,禁止页面缓存。代码如下:


  1. //个人中心
  2. .state('my',{
  3. url:'/my',
  4. cache:'false',
  5. templateUrl:'templates/my.html',
  6. controller:'MyController'
  7. })

知识点解析:缓存

这个问题就是页面的缓存问题,通过查阅书籍可以找到一些解决方法。

一、什么是缓存

一个缓存就是一个组件,它可以透明的存储数据,以便未来可以更快地服务于请求。缓存不需要时常重新计算的数据是安全的,而重新获取数据会导致数据重复。

缓存能够服务的请求越多,整理系统性能就提升得越多。

二、angularJS中的缓存

angularJS提供的内置缓存服务是一个很方便的特性,它让我们能够使用同一机制来缓存自定义的内容。

$cacheFactry简介

$cacheFactory是一个为所有angular服务生成缓存对象的服务。在内部,$cacheFactory会创建一个默认的缓存对象,即使我们并没有显示地创建。

要创建一个缓存对象,可以使用$cacheFactory通过一个ID创建一个缓存:


  1. var cache = $cacheFactory('myCache');

这里定义了一个ID为“myCache”的缓存。这个$cacheFactory方法可以接受两个参数:

1.cacheId(字符串):这个cacheId就是创建缓存时的ID名称,即上面的“myCache”。可以通过get()方法使用缓存名称来引用它。

2.options(对象):这个选项用于指定缓存如何表现。一般情况下,这个选项对象是一个键:capacity(数字),这个容量描述了在任何给定时间要使用缓存存储并保存的缓存键值对的最大数量。

$cacheFactory()方法返回一个缓存数组。

缓存对象

缓存对象自身有下列方法可以用来与缓存交互:

对象的使用方式如下(以info示例):


  1. cache.info()
  1. info():info()方法返回缓存对象的ID,尺寸和选项。
  2. put():put()方法允许我们把任意JavaScript对象值形式的键(字符串)放进缓存中。比如cache.put(“hello”,”world”)
  3. get():get()方法让我们能够访问一个键对应的缓存值。如果找到了这个键,它会返回它的值,如果没哟找到,它会返回undefined。cache.get(“hello”)
  4. remove():remove()函数用于在找到一个键值对的情况下从缓存中移除它。如果没有找到,返回undefined。
  5. removeAll():removeAll()函数用于重置缓存,同时移除所有已缓存的值。
  6. destory():destory()方法用于从$cacheFactory缓存注册表中移除指定缓存的所有引用。

三、$http缓存

angularJS的$http服务创建了一个带有ID为$http的缓存。要让$http请求使用默认的缓存对象很简单:$http方法允许我们给它传递一个cache参数。

也就是说,$http缓存默认是打开的。

当数据不会经常改变时,默认的$http缓存就特别有用了。可以像这样设置它:


  1. $http({
  2. method:"GET",
  3. url:'/api/user',
  4. cache:true
  5. })

或者使用辅助方法.get()


  1. $http.get('/api/user',{
  2. cache:true
  3. })

现在,通过$http到URL /api/user的每个请求将会存储到默认的$http缓存中。这个$http缓存中的请求键就是完整的URL路径。

 
通过在$http选项中传入参数true,可以告诉$http服务使用默认的缓存。如果我们不想经常干扰那些缓存,使用默认缓存时很有用的。

angular页面缓存与页面刷新的更多相关文章

  1. 用angular怎么缓存父页面数据

    angular做单页面应用是一个比较好的框架,但是它有一定的入门难度,对于新手来说可能会碰到很多坑,也有许多难题,大部分仔细看文档,找社区是能解决的. 但有些问题也许资料比较少,最近遇到过一个要缓存父 ...

  2. Nginx特性验证-反向代理/负载均衡/页面缓存/URL重定向

    原文发表于cu:2016-08-25 参考文档: Nginx 反向代理.负载均衡.页面缓存.URL重写等:http://freeloda.blog.51cto.com/2033581/1288553 ...

  3. 探索ASP.NET MVC5系列之~~~5.缓存篇(页面缓存+二级缓存)

    其实任何资料里面的任何知识点都无所谓,都是不重要的,重要的是学习方法,自行摸索的过程(不妥之处欢迎指正) 汇总:http://www.cnblogs.com/dunitian/p/4822808.ht ...

  4. Nginx 反向代理、负载均衡、页面缓存、URL重写及读写分离详解

    转载:http://freeloda.blog.51cto.com/2033581/1288553 大纲 一.前言 二.环境准备 三.安装与配置Nginx 四.Nginx之反向代理 五.Nginx之负 ...

  5. cache-contro页面缓存处理设置

    <meta http-equiv="pragma" content="no-cache">,pragma与no-cache用于定义页面缓存,不缓存页 ...

  6. [转]MVC3缓存之一:使用页面缓存

    本文转自:http://www.cnblogs.com/parry/archive/2011/03/19/OutputCache_In_MVC3.html 在以前的WebForm的开发中,在页面的头部 ...

  7. Nginx反向代理、负载均衡、页面缓存、URL重写及读写分离详解

    大纲 一.前言 二.环境准备 三.安装与配置Nginx 四.Nginx之反向代理 五.Nginx之负载均衡 六.Nginx之页面缓存 七.Nginx之URL重写 八.Nginx之读写分离 注,操作系统 ...

  8. MVC3缓存之一:使用页面缓存

    MVC3缓存之一:使用页面缓存 在MVC3中要如果要启用页面缓存,在页面对应的Action前面加上一个OutputCache属性即可. 我们建一个Demo来测试一下,在此Demo中,在View的Hom ...

  9. 更新页面缓存OutputCache

    为什么要使用OutputCache 我认为OutputCache是最简单的缓存技术了,它针对的是页面级别的,简单的一条指令就可以达到缓存的效果,有效的减轻服务器的压力和减少带宽,对于网站一些不会频繁更 ...

随机推荐

  1. 初窥DB2之insert语句

    第一种写法 INSERT INTO PERSVALUES (12, 'Harris', 20, 'Sales', 5, 18000, 1000, '1950-1-1') 第二种写法 INSERT IN ...

  2. Linux集群

    集群的起源: 集群并不是一个全新的概念,其实早在七十年代计算机厂商和研究机构就开始了对集群系统的研究和开发.由于主要用于科学工程计算,所以这些系统并不为大家所熟知.直到Linux集群的出现,集群的概念 ...

  3. SVN使用小记

    SVN(Subversion)是优秀的版本控制工具,之前在eclipse里面项目管理的时候,File-->Import-->SVN-->从SVN检出项目-->创建新的资源库位置 ...

  4. html实现 页面禁止右键 禁止复制 禁止图片拖动 禁止复制和剪切

    众所周知,一般的屏蔽的方法是用JS来编写的脚本,但是也可以直接通过修改网页属性的方法来屏蔽右键 禁止复制. 禁止右键 oncontextmenu="return false" 禁止 ...

  5. AngularJS进入使用前的准备工作

    安装 AngularJS是以JavaScript文件形式发布的,可以通过 script 标签添加到网页中. 下载地址:https://github.com/angular/angular.js/rel ...

  6. VS 2017 Git failed with a fatal error的解决办法

    前几天,满怀欣喜的从VS2015更新到了VS2017,经过这几天的试用,整体来说感觉还是挺不错的.昨天推送项目到远程服务器的时候,发现出现了推送失败的错误,错误如图: 按照提示,我看到输出窗口的输入内 ...

  7. effective c++ Item 48 了解模板元编程

    1. TMP是什么? 模板元编程(template metaprogramming TMP)是实现基于模板的C++程序的过程,它能够在编译期执行.你可以想一想:一个模板元程序是用C++实现的并且可以在 ...

  8. SpringMVC文件上传下载

    不多说,代码: Spring-config.xml<!-- spring可以自动去扫描base-pack下面的包或者子包下面的java文件, 如果扫描到有Spring的相关注解的类,则把这些类注 ...

  9. 使用CSharp编写Google Protobuf插件

    什么是 Google Protocol Buffer? Google Protocol Buffer( 简称 Protobuf) 是 Google 公司内部的混合语言数据标准,目前已经正在使用的有超过 ...

  10. SpringMVC4+MyBatis+SQL Server2014 基于SqlSession实现读写分离(也可以实现主从分离)

    前言 上篇文章我觉的使用拦截器虽然方便快捷,但是在使用读串还是写串上你无法控制,我更希望我们像jdbc那样可以手动控制我使用读写串,那么这篇则在sqlsession的基础上实现读写分离, 这种方式则需 ...