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. 使用register_shutdown_function触发写日志,使用fastcgi_finish_request提高响应速度

    公司内部的市场管理系统,一直是我一个人维护,最近老是有开发埋怨,内网的账号被人改了密码,账号被解绑了...哈的,错在这还不是一个完整的系统,既没有严格的权限也没有做操作日志呀... 权限现在是准备做在 ...

  2. Ubuntu离线安装VSCode(附带前期准备工作)

    跨平台系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#linux 在说正式步骤前先把准备工作做到位: 1.IP设置,这个因为是GUI的,手动设置 ...

  3. Java版权信息之Jautodoc

    Java项目开发中,常常需要在编码文件上面加上一些版权声明或者类注释,如果文件很多,手工去添加或者修改,会很麻烦.可以利用工具满足我们的要求.一.版权声明可以使用Jautodoc.将jautodoc的 ...

  4. Spring Dubbo 开发笔记(一)——概述

    概述: Spring Dubbo 是我自己写的一个基于spring-boot和dubbo,目的是使用Spring boot的风格来使用dubbo.(即可以了解Spring boot的启动过程又可以学习 ...

  5. centos7.2部署最新ELK 5.3

    ## 安装elasticsearch服务> 安装jdk 1.8 ```rpm -ivh jdk-8u101-linux-x64.rpmjava -version``` > 配置rpm `` ...

  6. php生成器使用总结

    一般我们在迭代一组数据的时候,需要创建一个数据,如果数组很大,则会消耗很大性能,甚至造成内存不足抛出error比如: //Fatal error: Allowed memory size of 134 ...

  7. druid 连接kafuk

    java -Xmx256m -Duser.timezone=UTC -Dfile.encoding=UTF-8 -Ddruid.realtime.specFile=examples/indexing/ ...

  8. 读书笔记 effective c++ Item 51 实现new和delete的时候要遵守约定

    Item 50中解释了在什么情况下你可能想实现自己版本的operator new和operator delete,但是没有解释当你实现的时候需要遵守的约定.遵守这些规则并不是很困难,但是它们其中有一些 ...

  9. vs2017添加引用时报错未能正确加载“ReferenceManagerPackage”包。

    最近新装了2017,开始前几天还好, 可是最近在添加引用时,报错 ---------------------------Microsoft Visual Studio----------------- ...

  10. Mac IDEA插件——protobuf 插件

    最近在搞PB的版本的升级,历史的PB的版本是2.4,现在是打算升级到3.2,当面PB的版本肯定有很多变化了,就不再这里多说了,这里重点说一说,采用IDEA的插件方便执行PB的文件的JAVA编译,这样的 ...