详解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读取中文COOKIE的解决办法
Feb 15 Javascript
jQuery学习5 jQuery事件模型
Feb 07 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
Jan 22 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
Oct 14 Javascript
JavaScript中的数学运算介绍
Dec 29 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
Nov 23 Javascript
浅析JavaScript中命名空间namespace模式
Jun 22 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
May 16 Javascript
新手必须知的Node.js 4个JavaScript基本概念
Sep 16 Javascript
小程序实现列表点赞功能
Nov 02 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
Jul 15 Javascript
JavaScript实现模态对话框实例
Jan 13 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实现将上传word文件转为html的方法
2015/06/03 PHP
php简单计算页面加载时间的方法
2015/06/19 PHP
PHP is_array() 检测变量是否是数组的实现方法
2016/06/13 PHP
PHP实现向关联数组指定的Key之前插入元素的方法
2017/06/06 PHP
JavaScript 格式字符串的应用
2010/03/29 Javascript
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
2010/05/06 Javascript
简单实用的js调试logger组件实现代码
2010/11/20 Javascript
使用Jquery来实现可以输入值的下拉选单 雏型
2011/12/06 Javascript
javascript检测浏览器的缩放状态实现代码
2014/09/28 Javascript
express的中间件cookieParser详解
2014/12/04 Javascript
jQuery中[attribute=value]选择器用法实例
2014/12/31 Javascript
最精简的JavaScript实现鼠标拖动效果的方法
2015/05/11 Javascript
纯JavaScript代码实现文本比较工具
2016/02/17 Javascript
jQuery视差滚动效果网页实现方法经验总结
2016/09/29 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
2017/01/13 Javascript
JS实现购物车特效
2017/02/02 Javascript
浅谈$_FILES数组为空的原因
2017/02/16 Javascript
BootStrap的两种模态框方式
2017/05/10 Javascript
关于react中组件通信的几种方式详解
2017/12/10 Javascript
vue使用自定义icon图标的方法
2018/05/14 Javascript
[02:48]DOTA2英雄基础教程 拉席克
2013/12/12 DOTA
[02:49:21]2019完美盛典全程录像
2019/12/08 DOTA
Python2和Python3中urllib库中urlencode的使用注意事项
2018/11/26 Python
Pyqt清空某一个QTreeewidgetItem下的所有分支方法
2019/06/17 Python
Python decorator拦截器代码实例解析
2020/04/04 Python
TensorFLow 数学运算的示例代码
2020/04/21 Python
工程总经理工作职责
2013/12/09 职场文书
复核员上岗演讲稿
2014/01/05 职场文书
给校长的建议书200字
2014/05/16 职场文书
2015大学生实训报告
2014/11/05 职场文书
2014年保密工作总结
2014/11/22 职场文书
2014年工程部工作总结
2014/11/25 职场文书
创业开店,这样方式更合理
2019/08/26 职场文书
浅谈MySQL函数
2021/10/05 MySQL
Java中try catch处理异常示例
2021/12/06 Java/Android
科学家研发出新型速效酶,可在 24 小时内降解塑料制品
2022/04/29 数码科技