详解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 相关文章推荐
让div层随鼠标移动的实现代码 ie ff
Dec 18 Javascript
js获取当前select 元素值的代码
Apr 19 Javascript
基于JQuery的一句代码实现表格的简单筛选
Jul 26 Javascript
24款非常有用的 jQuery 插件分享
Apr 06 Javascript
javascript内置对象arguments详解
Mar 16 Javascript
javascript格式化日期时间方法汇总
Jun 19 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
Jul 25 Javascript
Jquery遍历select option和添加移除option的实现方法
Aug 26 Javascript
微信小程序 选项卡的简单实例
May 24 Javascript
详解使用vue实现tab 切换操作
Jul 03 Javascript
AngularJS的$location使用方法详解
Oct 19 Javascript
vue 自定义组件添加原生事件
Apr 21 Vue.js
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安全防范技巧分享
2011/11/03 PHP
php curl常见错误:SSL错误、bool(false)
2011/12/28 PHP
CodeIgniter图像处理类的深入解析
2013/06/17 PHP
利用php实现一周之内自动登录存储机制(cookie、session、localStorage)
2016/10/31 PHP
YII2自动登录Cookie总是失效的解决方法
2017/06/28 PHP
一个JS翻页效果
2007/07/23 Javascript
google 搜索框添加关键字实现代码
2010/04/24 Javascript
jquery中prop()方法和attr()方法的区别浅析
2013/09/06 Javascript
js向上无缝滚动,网站公告效果 具体代码
2013/11/18 Javascript
深入理解JavaScript系列(42):设计模式之原型模式详解
2015/03/04 Javascript
JS显示下拉列表框内全部元素的方法
2015/03/31 Javascript
gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)
2016/08/24 Javascript
基于jQuery对象和DOM对象和字符串之间的转化实例
2017/08/08 jQuery
JavaScript 保护变量不被随意修改的实现代码
2017/09/27 Javascript
手动用webpack搭建第一个ReactApp的示例
2018/04/11 Javascript
vue单页缓存方案分析及实现
2018/09/25 Javascript
浅谈Javascript常用正则表达式应用
2019/03/08 Javascript
详解jquery和vue对比
2019/04/16 jQuery
微信小程序引入Vant组件库过程解析
2019/08/06 Javascript
JavaScript 严格模式(use strict)用法实例分析
2020/03/04 Javascript
JS轮播图的实现方法
2020/08/24 Javascript
js获取url页面id,也就是最后的数字文件名
2020/09/25 Javascript
[45:46]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS DT
2014/05/23 DOTA
[03:02]生活中的Dendi之野外度假篇
2016/08/09 DOTA
web.py中调用文件夹内模板的方法
2014/08/26 Python
python实现颜色空间转换程序(Tkinter)
2015/12/31 Python
Python使用urllib2模块抓取HTML页面资源的实例分享
2016/05/03 Python
python的变量与赋值详细分析
2017/11/08 Python
python爬虫实现中英翻译词典
2019/06/25 Python
Django框架组成结构、基本概念与文件功能分析
2019/07/30 Python
python matplotlib库绘制条形图练习题
2019/08/10 Python
英国的知名精品百货公司:House of Fraser(福来德)
2016/08/14 全球购物
入党自我鉴定范文
2013/10/04 职场文书
大学生工作推荐信范文
2013/12/02 职场文书
三八活动策划方案
2014/08/17 职场文书
Python 解决空列表.append() 输出为None的问题
2021/05/23 Python