详解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 相关文章推荐
表单提交验证类
Jul 14 Javascript
JS 面向对象的5钟写法
Jul 31 Javascript
页面使用密码保护代码
Apr 10 Javascript
jQuery中:only-child选择器用法实例
Jan 03 Javascript
jQuery中parentsUntil()方法用法实例
Jan 07 Javascript
jQuery+css实现的换页标签栏效果
Jan 27 Javascript
详解数组Array.sort()排序的方法
May 09 Javascript
js使用原型对象(prototype)需要注意的地方
Aug 28 Javascript
详解vue-cli中的ESlint配置文件eslintrc.js
Sep 25 Javascript
p5.js 毕达哥拉斯树的实现代码
Mar 23 Javascript
js实现图片跟随鼠标移动效果
Oct 16 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中鲜为人知的10个函数
2014/02/28 PHP
php使用函数pathinfo()、parse_url()和basename()解析URL
2016/11/25 PHP
php输出形式实例整理
2020/05/05 PHP
JS是否可以跨文件同时控制多个iframe页面的应用技巧
2007/12/16 Javascript
js获取div高度的代码
2008/08/09 Javascript
JavaScript入门教程(11) js事件处理
2009/01/31 Javascript
Javascript attachEvent传递参数的办法
2009/12/14 Javascript
基于jquery的实现简单的表格中增加或删除下一行
2010/08/01 Javascript
如何使用JS获取IE上传文件路径(IE7,8)
2013/07/08 Javascript
jQuery中appendTo()方法用法实例
2015/01/08 Javascript
JavaScript实现的双向跨域插件分享
2015/01/31 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
2015/10/29 Javascript
jQuery实现宽屏图片轮播实例教程
2015/11/24 Javascript
AngularJs Understanding the Model Component
2016/09/02 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
2016/09/23 Javascript
浅谈$_FILES数组为空的原因
2017/02/16 Javascript
从零学习node.js之文件操作(三)
2017/02/21 Javascript
基于jQuery实现图片推拉门动画效果的两种方法
2017/08/26 jQuery
vue.js如何将echarts封装为组件一键使用详解
2017/10/10 Javascript
jQuery 实现左右两侧菜单添加、移除功能
2018/01/02 jQuery
利用Node.js批量抓取高清妹子图片实例教程
2018/08/02 Javascript
JS中DOM元素的attribute与property属性示例详解
2018/09/04 Javascript
PyCharm在win10的64位系统安装实例
2017/11/26 Python
使用Python读取大文件的方法
2018/02/11 Python
Python发送邮件测试报告操作实例详解
2018/12/08 Python
Python 代码调试技巧示例代码
2020/08/11 Python
Python下载网易云歌单歌曲的示例代码
2020/08/12 Python
html5实现输入框fixed定位在屏幕最底部兼容性
2020/07/03 HTML / CSS
副厂长岗位职责
2014/02/02 职场文书
客户经理竞聘演讲稿
2014/05/15 职场文书
授权委托书样本
2014/09/25 职场文书
刑事辩护授权委托书范本
2014/10/17 职场文书
乡镇计划生育工作汇报
2014/10/28 职场文书
中考百日冲刺决心书
2015/09/22 职场文书
MySQL表的增删改查(基础)
2021/04/05 MySQL
Python matplotlib多个子图绘制整合
2022/04/13 Python