写在最前面:这篇博文是2篇文章组成,详细介绍了Angularjs中的缓存以及缓存清理,文章由上海尚学堂转载过来,欢迎大家阅读和评论。转载请注明出处,谢谢!

一个缓存就是一个组件,它可以透明地储存数据,以便以后可以更快地服务于请求。多次重复地获取资源可能会导致数据重复,消耗时间。因此缓存适用于变化性不大的一些数据,缓存能够服务的请求越多,整体系统性能就能提升越多。

 1、 $cacheFactory 简介 

  

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

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

var cache = $cacheFactory('myCache');

这个 $cacheFactory 方法可以接受两个参数:

cacheId (字符串):这个 cacheId 就是创建缓存时的ID名称。可以通过 get() 方法使用缓存名称来引用它。

capacity :这个容量描述了在任何给定时间要使用缓存存储并保存的缓存键值对的最大数量。

2、 缓存对象

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

info() : info() 方法返回缓存对象的ID、尺寸和选项。

put() : put() 方法允许我们把任意JavaScript对象值形式的键(字符串)放进缓存中。cache.put("hello","world");

put() 方法会返回我们放入缓存中的值。

get() : get() 方法让我们能够访问一个键对应的缓存值。如果找到了这个键,它会返回它的值;如果没有找到,它会返回 undefined 。cache.get("hello");

remove() : remove() 函数用于在找到一个键值对的情况下从缓存中移除它。如果没有找到,它就会返回 undefined 。cache.remove("hello");

removeAll() : removeAll() 函数用于重置缓存,同时移除所有已缓存的值。

destory() : destory() 方法用于从 $cacheFactory 缓存注册表中移除指定缓存的所有引用。

3、$http中的缓存

  $http()方法允许我们传递一个cache参数。当数据不会经常改变的时候,默认的$http缓存会特别有用。其中,默认的$http缓存对象是 var cache = $cacheFactory('$http'); 可以这样设置它

$http({
method: 'GET',
url: 'api/user.json',
cache: true
})

  其中,缓存的键值为url, var userCache = cache.get('api/user.json')

4、自定义缓存

  通过自定义的缓存来让$http发起请求也很简单,只需把cache值设为对应缓存对象名称即可

$http({
method: 'GET',
url: 'api/user.json',
cache: myCache
})

  或者通过config配置来设置每个$http请求的缓存对象,而不必像上面的例子中,往每一个$http请求中加入配置

app.config(function($httpProvider){
$httpProvider.defaults.cache = $cacheFactory('myCache',{capacity: 20})

  其中,capacity会使用"近期缓存最久未使用算法",就是说,加如缓存容量为20,现在已经缓存了缓存20个,当第21个想要被缓存的时候,最久最小未被使用的缓存键值对会被清除,以便腾出空间容纳第21个缓存。

先讲到这里,接下来再看看《【上海前端培训】Angularjs中的缓存清理》,

一、清除模板缓存

  1. .run(function($rootScope, $templateCache) {
  2. $rootScope.$on('$routeChangeStart', function(event, next, current) {
  3. if (typeof(current) !== 'undefined'){
  4. $templateCache.remove(current.templateUrl);
  5. }
  6. });
  7. });
  8. 上海前端培训  shsxt.com/html5

二、html添加随机参数

  1. .state("content", {
  2. url: "/",
  3. views:{
  4. "bodyInfo":{templateUrl: 'tpls/bodyInfo.html?'+ +new Date(),
  5. controller:'bodyInfoCtrl'},
  6. "header":{templateUrl: 'tpls/header.html?'+ +new Date(),
  7. controller:'headerCtrl'
  8. },
  9. "footer":{templateUrl: 'tpls/footer.html?'+ +new Date(),
  10. controller:'footerCtrl'
  11. }
  12. }
  13. })
  1. <link rel="stylesheet" href="stylesheets/main.css?version=1.0.3">

三、清除route缓存

  1. .config(['$stateProvider', '$urlRouterProvider','$locationProvider','$httpProvider',function($stateProvider, $urlRouterProvider,$locationProvider,$httpProvider) {
  2. //         $urlRouterProvider.when("", "/home");
  3. $urlRouterProvider.otherwise('/');
  4. if (!$httpProvider.defaults.headers.get) {
  5. $httpProvider.defaults.headers.get = {};
  6. }
  7. $httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';
  8. $httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache';
  9. $httpProvider.defaults.headers.get['Pragma'] = 'no-cache';
  10. 上海前端培训  shsxt.com/html5

对于Angularjs中的缓存介绍,推荐阅读《【上海前端培训】Angularjs中的缓存》;如需更多前端技术文章,请点击 上海前端培训

Angularjs中的缓存以及缓存清理的更多相关文章

  1. AngularJS中的缓存

    欢迎大家指导与讨论 : ) 缓存篇 一个缓存就是一个组件,它可以透明地储存数据,以便以后可以更快地服务于请求.多次重复地获取资源可能会导致数据重复,消耗时间.因此缓存适用于变化性不大的一些数据,缓存能 ...

  2. AngularJS中实现Model缓存

    在AngularJS中如何实现一个Model的缓存呢? 可以通过在Provider中返回一个构造函数,并在构造函数中设计一个缓存字段,在本篇末尾将引出这种做法. 一般来说,Model要赋值给Scope ...

  3. Spring Boot中使用EhCache实现缓存支持

     SpringBoot提供数据缓存功能的支持,提供了一系列的自动化配置,使我们可以非常方便的使用缓存.,相信非常多人已经用过cache了.因为数据库的IO瓶颈.一般情况下我们都会引入非常多的缓存策略, ...

  4. hystrix中request cache请求缓存

    有一个概念,叫做reqeust context,请求上下文,一般来说,在一个web应用中, 我们会在一个filter里面,对每一个请求都施加一个请求上下文,就是说,tomcat容器内,每一次请求,就是 ...

  5. 谈一谈SQL Server中的执行计划缓存(上)

    简介 我们平时所写的SQL语句本质只是获取数据的逻辑,而不是获取数据的物理路径.当我们写的SQL语句传到SQL Server的时候,查询分析器会将语句依次进行解析(Parse).绑定(Bind).查询 ...

  6. 解决在IE中获取数据的缓存问题,运行环境为node.js

    IE下默认会开启缓存策略,不管是页面还是通过ajax请求的数据都会议一个url,url是uri(统一资源定位符)的实例,url就是资源的标识符. 写一个demo进行验证,测试环境:IE8,node.j ...

  7. android中图片的三级缓存cache策略(内存/文件/网络)

    实现图片缓存也不难,需要有相应的cache策略.这里我采用 内存-文件-网络 三层cache机制,其中内存缓存包括强引用缓存和软引用缓存(SoftReference),其实网络不算cache,这里姑且 ...

  8. varnish中忽略cookie进行缓存

    varnish不缓存cookie的页面,如果html页面中带有cookie以下代码为接收到结尾的文件,自动去除掉cookiesub vcl_recv {    if (req.request == ” ...

  9. 【Hadoop学习】HDFS中的集中化缓存管理

    Hadoop版本:2.6.0 本文系从官方文档翻译而来,转载请尊重译者的工作,注明以下链接: http://www.cnblogs.com/zhangningbo/p/4146398.html 概述 ...

随机推荐

  1. pta总结3

    7-1 抓老鼠啊~亏了还是赚了? (20 分) 某地老鼠成灾,现悬赏抓老鼠,每抓到一只奖励10元,于是开始跟老鼠斗智斗勇:每天在墙角可选择以下三个操作:放置一个带有一块奶酪的捕鼠夹(T),或者放置一块 ...

  2. C#如何实现DataGridView单元格拖拽

    参考: http://www.cnblogs.com/michaelxu/archive/2009/09/27/1574905.html

  3. Linux计划任务及压缩归档

    计划任务介绍 自动执行,备份数据. crontab    和   at : at:它是一个可以处理仅执行一次就结束的指令 crontab:它是会把你指定的工作或任务,比如:脚本等,按照你设定的周期一直 ...

  4. line-gradient 之渐变角度

    MDN上对于linear-gradient的定义如下: CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片.其结果属于<gradient>数据类型 ...

  5. MYSQL双主全库同步复制

    环境: A.B两台服务器分别安装mysql-5.7.18服务端,配置成互为主从同步. linux系统版本为CentOS7 A服务器ip:192.168.1.7   主机名:test1 B服务器ip:1 ...

  6. Spring,Spring MVC及Spring Boot区别

    什么是Spring?它解决了什么问题? 我们说到Spring,一般指代的是Spring Framework,它是一个开源的应用程序框架,提供了一个简易的开发方式,通过这种开发方式,将避免那些可能致使代 ...

  7. js判断是微信、QQ内置浏览器打开页面

    var ua = navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger/i)=="micromessenger&quo ...

  8. php 设计模式(转)

    PhpDesignPatterns [PHP 中的设计模式] 一. Introduction[介绍] 设计模式:提供了一种广泛的可重用的方式来解决我们日常编程中常常遇见的问题.设计模式并不一定就是一个 ...

  9. Dalvik和ART

    --摘自<Android进阶解密> DVM和ART都是在Zygote进程中诞生的 *DVM和JVM的区别* 1.基于的架构不同 DVM是基于寄存器的,它没有基于栈的虚拟机在复制数据时而使用 ...

  10. Codeforces 813C The Tag Game (BFS最短路)

    <题目链接> 题目大意:A.B两人在一颗树上,A在根节点1上,B在节点x上,现在他们轮流走,每次只能走一步,或者不走.A以尽可能靠近B的方式行走,B以尽可能远离A的方式走,B先开始走.问你 ...