详解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 相关文章推荐
js实现的网站首页随机公告随机公告
Mar 14 Javascript
使用dynatrace-ajax跟踪JavaScript的性能
Apr 12 Javascript
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
Feb 25 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
Jun 24 Javascript
jquery easyui使用心得
Jul 07 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
Jun 05 Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
Jul 05 Javascript
Vue组件BootPage实现简单的分页功能
Sep 12 Javascript
js实现二级菜单点击显示当前内容效果
Apr 28 Javascript
JavaScript使用小插件实现倒计时的方法讲解
Mar 11 Javascript
es6函数之rest参数用法实例分析
Apr 18 Javascript
浅谈JavaScript浅拷贝和深拷贝
Nov 07 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
解决了Ajax、MySQL 和 Zend Framework 的乱码问题
2009/03/03 PHP
php中处理mysql_fetch_assoc返回来的数组 不用foreach----echo
2011/05/04 PHP
yii中widget的用法
2014/12/03 PHP
Smarty模板常见的简单应用分析
2016/11/15 PHP
详解配置 Apache 服务器支持 PHP 文件的解析
2017/02/15 PHP
用JS操作FRAME中的IFRAME及其内容的实现代码
2008/07/26 Javascript
Jquery 学习笔记(一)
2009/10/13 Javascript
能说明你的Javascript技术很烂的五个原因分析
2011/10/28 Javascript
jQuery javaScript捕获回车事件(示例代码)
2013/11/07 Javascript
javascript异步编程的4种方法
2014/02/19 Javascript
使用JavaScript实现弹出层效果的简单实例
2016/05/31 Javascript
浅谈JavaScript中变量和函数声明的提升
2016/08/09 Javascript
浅谈struts1 & jquery form 文件异步上传
2017/05/25 jQuery
vue微信分享到朋友圈 vue微信发送给好友
2018/11/28 Javascript
实例讲解JS中pop使用方法
2019/01/27 Javascript
微信小程序实现单列下拉菜单效果
2019/04/25 Javascript
微信小程序文章详情页跳转案例详解
2019/07/09 Javascript
javascript History对象原理解析
2020/02/17 Javascript
vue实现简单学生信息管理
2020/05/30 Javascript
[06:11]2014DOTA2国际邀请赛 专访团结一心的VG战队
2014/07/21 DOTA
[59:07]海涛为你详解DOTA2新版本“贤哲秘契”
2014/11/22 DOTA
[01:50]《我与DAC》之玩家:iG夺冠时的那面红旗
2018/03/29 DOTA
pygame学习笔记(1):矩形、圆型画图实例
2015/04/15 Python
tensorflow实现逻辑回归模型
2018/09/08 Python
Python3+OpenCV2实现图像的几何变换(平移、镜像、缩放、旋转、仿射)
2019/05/13 Python
详解10个可以快速用Python进行数据分析的小技巧
2019/06/24 Python
Python常用模块sys,os,time,random功能与用法实例分析
2020/01/07 Python
python如何进入交互模式
2020/07/06 Python
《石榴》教学反思
2014/03/02 职场文书
2014县委书记党的群众路线教育实践活动对照检查材料思想汇报
2014/09/22 职场文书
竞聘报告优秀范文
2014/11/06 职场文书
幼儿园重阳节活动总结
2015/05/05 职场文书
雨中的树观后感
2015/06/03 职场文书
委托开发合同书(标准版)
2019/08/07 职场文书
mysql5.5中文乱码问题解决的有用方法
2022/05/30 MySQL
Java获取字符串编码格式实现思路
2022/09/23 Java/Android