详解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 拖拉缩放效果
Dec 10 Javascript
基本jquery的控制tabs打开的数量的代码
Oct 17 Javascript
js中document.getElementByid、document.all和document.layers区分介绍
Dec 08 Javascript
文本框只能输入数字的js代码(含小数点)
Jul 10 Javascript
Zepto实现密码的隐藏/显示
Apr 07 Javascript
Thinkjs3新手入门之添加一个新的页面
Dec 06 Javascript
vue 国际化 vue-i18n 双语言 语言包
Jun 07 Javascript
使用angular-cli webpack创建多个包的方法
Oct 16 Javascript
vue  directive定义全局和局部指令及指令简写
Nov 20 Javascript
微信小程序实现的一键复制功能示例
Apr 24 Javascript
Vue项目实现换肤功能的一种方案分析
Aug 28 Javascript
Node.js API详解之 util模块用法实例分析
May 09 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
PHP 5.0对象模型深度探索之绑定
2006/09/05 PHP
使用php4加速网络传输
2006/10/09 PHP
PHP通过COM使用ADODB的简单例子
2006/12/31 PHP
Warning: session_destroy() : Trying to destroy uninitialized sessionq错误
2011/06/16 PHP
php json与xml序列化/反序列化
2013/10/28 PHP
php利用单例模式实现日志处理类库
2014/02/10 PHP
$()JS小技巧
2007/07/21 Javascript
jquery.lazyload  实现图片延迟加载jquery插件
2010/02/06 Javascript
Jquery validation remote 验证的缓存问题解决方法
2014/03/25 Javascript
巧用replace将文字表情替换为图片
2014/04/17 Javascript
jQuery中:radio选择器用法实例
2015/01/03 Javascript
JavaScript对象数组排序函数及六个用法
2015/12/23 Javascript
Bootstrap基本样式学习笔记之表格(2)
2016/12/07 Javascript
jQuery简单判断值是否存在于数组中的方法示例
2018/04/17 jQuery
微信小程序多音频播放进度条问题
2018/08/28 Javascript
Vue设置长时间未操作登录自动到期返回登录页
2020/01/22 Javascript
vue实现路由懒加载的3种方法示例
2020/09/01 Javascript
Node使用koa2实现一个简单JWT鉴权的方法
2021/01/26 Javascript
[03:44]2015国际邀请赛选手档案—Cloud9.NoTail
2015/07/28 DOTA
python编程开发之类型转换convert实例分析
2015/11/13 Python
Python编程求质数实例代码
2018/01/31 Python
如何使用Python破解ZIP或RAR压缩文件密码
2020/01/09 Python
python连接PostgreSQL过程解析
2020/02/09 Python
Python self用法详解
2020/11/28 Python
HTML5 FileReader对象的具体使用方法
2020/05/22 HTML / CSS
时尚孕妇装:Ingrid & Isabel
2019/05/08 全球购物
美国翻新电子产品商店:The Store
2019/10/08 全球购物
区域总监的岗位职责
2013/11/21 职场文书
资源环境与城市管理专业推荐信
2013/11/30 职场文书
网上书店创业计划书
2014/01/12 职场文书
法律进机关实施方案
2014/03/12 职场文书
公司合并协议书范本
2014/09/30 职场文书
借款民事起诉状范文
2015/05/19 职场文书
婚宴领导致辞
2015/07/28 职场文书
保外就医申请书范文
2015/08/06 职场文书
Golang日志包的使用
2022/04/20 Golang