详解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 相关文章推荐
基于jquery的表格排序
Sep 11 Javascript
jquery移除button的inline onclick事件(已测试及兼容浏览器)
Jan 25 Javascript
js兼容火狐显示上传图片预览效果的方法
May 21 Javascript
深入探秘jquery瀑布流的实现
Jan 30 Javascript
炫酷的js手风琴效果
Oct 13 Javascript
Vue数据驱动模拟实现2
Jan 11 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
Feb 17 Javascript
JS实现图片手风琴效果
Apr 17 Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
Aug 09 Javascript
JavaScript中的全局属性与方法深入解析
Jun 14 Javascript
Vue+Openlayers自定义轨迹动画
Sep 24 Javascript
微信小程序实现底部弹出框
Nov 18 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木马攻击防御之道
2008/03/24 PHP
PHP数组无限分级数据的层级化处理代码
2012/12/29 PHP
php过滤XSS攻击的函数
2013/11/12 PHP
php使用curl简单抓取远程url的方法
2015/03/13 PHP
PHP使用内置函数生成图片的方法详解
2016/05/09 PHP
PHP registerXPathNamespace()函数讲解
2019/02/03 PHP
php+laravel依赖注入知识点总结
2019/11/04 PHP
一个网页标题title的闪动提示效果实现思路
2014/03/22 Javascript
修复bash漏洞的shell脚本分享
2014/12/31 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
2016/07/15 Javascript
JS中关于事件处理函数名后面是否带括号的问题
2016/11/16 Javascript
vue.js中指令Directives详解
2017/03/20 Javascript
如何实现一个webpack模块解析器
2018/10/24 Javascript
vue中子组件传递数据给父组件的讲解
2019/01/27 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
2019/12/19 Javascript
Vue中qs插件的使用详解
2020/02/07 Javascript
python中Genarator函数用法分析
2015/04/08 Python
python实现逆波兰计算表达式实例详解
2015/05/06 Python
python线程、进程和协程详解
2016/07/19 Python
windows系统下Python环境的搭建(Aptana Studio)
2017/03/06 Python
Python操作Excel之xlsx文件
2017/03/24 Python
python爬取网页转换为PDF文件
2018/06/07 Python
Python迭代器与生成器基本用法分析
2018/07/26 Python
python 实现批量xls文件转csv文件的方法
2018/10/23 Python
对Python中list的倒序索引和切片实例讲解
2018/11/15 Python
Python新手学习装饰器
2020/06/04 Python
Python 基于jwt实现认证机制流程解析
2020/06/22 Python
Python 打印自己设计的字体的实例讲解
2021/01/04 Python
台湾SHOPRO购物行家:亚洲首创影视.3C.家电.优质购物平台
2018/05/07 全球购物
银行党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
社保转移委托书范本
2014/10/08 职场文书
家庭困难证明
2014/10/12 职场文书
民间借贷被告代理词
2015/05/23 职场文书
高考百日冲刺决心书
2015/09/23 职场文书
Python基础之常用库常用方法整理
2021/04/30 Python
CSS中使用grid布局实现一套模板多种布局
2022/07/15 HTML / CSS