详解Angular中$cacheFactory缓存的使用


Posted in Javascript onAugust 19, 2016

最近在学习使用angular,慢慢从jquery ui转型到用ng开发,发现了很多不同点,继续学习吧;

首先创建一个服务,以便在项目中的controller中引用,服务有几种存在形式,factory();service();constant();value();provider();其中provider是最基础的,其他服务都是基于这个写的,具体区别这里就不展开了,大家可以看看源码;服务是各个controller之间通话的重要形式,在实际项目中会用的很多,下面是代码:

angular.module('yourApp').factory('myCache',function($cacheFactory){
return $cacheFactory('myData');
});

这里‘myCache'是服务名称,且是唯一,针对一个特定的缓存对象,存在于浏览器中,供控制器引用:

angular.module('yourApp').
controller('userCtrl',['$scope','$http','myCache',function($scope,$http,myCache){
 //监测是否已经存在缓存数据,如果有就获取然后该干嘛干嘛去
var cache=myCache.get('myData');
if(cache){
$scope.variable=cache;
}else{
//从接口获取数据,put到缓存中
var jurl='/data/getdata';
$http({
url: jurl,
method: "GET",
data: "{'query':'somevalue'}",
headers: { 'Content-Type': 'application/json' }
}).success(function (data, status, headers, config) {
//something in success





}).error(function (data, status, headers, config) {
//something in error
});
}
}])

页面第一次打开时,会从接口中获取数据,当页面发生路由跳转时,这些数据是一直被缓存的,路由跳转到有需求的页面,监测到已经被缓存,就不用向服务器请求数据了,如果是页面被关闭或者是刷新了页面,缓存会丢失,重新向、请求数据并缓存;

这是个简单的示例,在实际项目中的数据会复杂些,比如为了页面优化减少而将页面数据集合请求,减少数据请求次数,获取到数据后分配的route的各个template中,数据结构会复杂些;

目前还没有缓存比较大的数据的示例,理论上这里的cache是javascript中的一个object对象,所以应用中cache的大小限制或大小对浏览器页面性能的影响,还不是很清楚,继续深扒,发现了不同点再来续更。

以上所述是小编给大家介绍的详解Angular中$cacheFactory缓存的使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript高级程序设计 阅读笔记(二十) js错误处理
Aug 14 Javascript
通过js简单实现将一个文本内容转译成加密文本
Oct 22 Javascript
jquery删除数据记录时的弹出提示效果
May 06 Javascript
AngularJS内置指令
Feb 04 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
Aug 07 Javascript
jQuery实现的背景动态变化导航菜单效果
Aug 24 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
Jan 04 Javascript
微信小程序 配置文件详细介绍
Dec 14 Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
Mar 08 Javascript
深入浅出es6模板字符串
Aug 26 Javascript
AngularJS 控制器 controller的详解
Oct 17 Javascript
Vue异步加载about组件
Oct 31 Javascript
JS获取当前页面名称的简单实例
Aug 19 #Javascript
AngularJS应用开发思维之依赖注入3
Aug 19 #Javascript
JS获取当前使用的浏览器名字以及版本号实现方法
Aug 19 #Javascript
js 获取当前web应用的上下文路径实现方法
Aug 19 #Javascript
AngularJS入门教程之路由与多视图详解
Aug 19 #Javascript
AngularJS入门教程之链接与图片模板详解
Aug 19 #Javascript
AngularJS之依赖注入模拟实现
Aug 19 #Javascript
You might like
咖啡豆的最常见发酵处理方法,详细了解一下
2021/03/03 冲泡冲煮
一个颜色轮换的简单例子
2006/10/09 PHP
php过滤XSS攻击的函数
2013/11/12 PHP
PHP实现在线阅读PDF文件的方法
2015/06/17 PHP
PHP与Web页面的交互示例详解二
2020/08/04 PHP
jQuery Ajax文件上传(php)
2009/06/16 Javascript
JavaScript Array扩展实现代码
2009/10/14 Javascript
Jquery ajaxsubmit上传图片实现代码
2010/11/04 Javascript
通过JS来判断页面控件是否获取焦点
2014/01/03 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
2014/06/27 Javascript
jQuery实现的仿百度分页足迹效果代码
2015/10/30 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
2016/03/21 Javascript
jquery 属性选择器(匹配具有指定属性的元素)
2016/09/06 Javascript
原生js图片轮播效果实现代码
2016/10/19 Javascript
jQuery结合jQuery.cookie.js插件实现换肤功能示例
2017/10/14 jQuery
微信小程序实现自定义加载图标功能
2018/07/19 Javascript
vue实现图片预览组件封装与使用
2019/07/13 Javascript
解决vue cli使用typescript后打包巨慢的问题
2019/09/30 Javascript
判断JavaScript中的两个变量是否相等的操作符
2019/12/21 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
2020/10/29 Javascript
[38:21]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS LGD-CDEC
2014/05/22 DOTA
[01:11:21]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第三场 3月7日
2021/03/11 DOTA
python自定义类并使用的方法
2015/05/07 Python
在Django的模板中使用认证数据的方法
2015/07/23 Python
Python制作Windows系统服务
2017/03/25 Python
Python实现pdf文档转txt的方法示例
2018/01/19 Python
Scrapy-Redis结合POST请求获取数据的方法示例
2019/05/07 Python
pytorch数据预处理错误的解决
2020/02/20 Python
意大利体育用品网上商城:Nencini Sport
2016/08/18 全球购物
创新型城市实施方案
2014/03/06 职场文书
餐饮投资计划书
2014/04/25 职场文书
运动会通讯稿600字
2015/07/20 职场文书
导游词之苏州寒山寺
2019/12/05 职场文书
php微信小程序解包过程实例详解
2021/03/31 PHP
Flask response响应的具体使用
2021/07/15 Python
面试分析分布式架构Redis热点key大Value解决方案
2022/03/13 Redis