详解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 相关文章推荐
利用谷歌地图API获取点与点的距离的js代码
Oct 11 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
Dec 19 Javascript
js校验表单后提交表单的三种方法总结
Feb 28 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
Sep 01 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
Nov 09 Javascript
Node.js连接mongodb实例代码
Jun 06 Javascript
详解使用vue实现tab 切换操作
Jul 03 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
Jul 05 Javascript
微信小程序学习笔记之函数定义、页面渲染图文详解
Mar 28 Javascript
JS使用iView的Dropdown实现一个右键菜单
May 06 Javascript
jquery多级树形下拉菜单的实例代码
Jul 09 jQuery
JS数组的常用方法整理
Mar 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
浅析PHP中的i++与++i的区别及效率
2016/06/15 PHP
jquery 1.4.2发布!主要是性能与API
2010/02/25 Javascript
js取滚动条的尺寸的函数代码
2011/11/30 Javascript
js 取时间差去掉周六周日实现代码
2012/12/25 Javascript
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
2013/10/22 Javascript
window.location.href中url中数据量太大时的解决方法
2013/12/23 Javascript
Jquery获取当前城市的天气信息
2016/08/05 Javascript
JavaScript之promise_动力节点Java学院整理
2017/07/03 Javascript
基于input框覆盖掉数字英文的实例讲解
2017/07/21 Javascript
vue项目动态设置页面title及是否缓存页面的问题
2018/11/08 Javascript
利用layer实现表单完美验证的方法
2019/09/26 Javascript
Ant Design moment对象和字符串之间的相互转化教程
2020/10/27 Javascript
python 随机数生成的代码的详细分析
2011/05/15 Python
python脚本监控docker容器
2016/04/27 Python
python的re正则表达式实例代码
2018/01/24 Python
python使用筛选法计算小于给定数字的所有素数
2018/03/19 Python
在keras 中获取张量 tensor 的维度大小实例
2020/06/10 Python
Python 多线程C段扫描、检测 Ping扫描脚本的实现
2020/09/03 Python
如何向scrapy中的spider传递参数的几种方法
2020/11/18 Python
DAWGS鞋官方网站:鞋,凉鞋,靴子
2016/10/04 全球购物
获取邓白氏信用报告:Dun & Bradstreet
2019/01/22 全球购物
文明教师事迹材料
2014/01/16 职场文书
迟到检讨书5000字
2014/01/31 职场文书
水利学院求职自荐书
2014/02/01 职场文书
高中运动会入场词
2014/02/14 职场文书
青年志愿者活动总结
2014/04/26 职场文书
2014年学校食堂工作总结
2014/11/25 职场文书
大学生助学金感谢信
2015/01/21 职场文书
2015年学校安全工作总结
2015/04/22 职场文书
2015年环境整治工作总结
2015/05/22 职场文书
千手观音观后感
2015/06/03 职场文书
小学音乐课歌曲《堆雪人》教学反思
2016/02/18 职场文书
幼儿园大班教师评语
2019/06/21 职场文书
Python基础知识学习之类的继承
2021/05/31 Python
源码解读Spring-Integration执行过程
2021/06/11 Java/Android
vue组件vue-esign实现电子签名
2022/04/21 Vue.js