详解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 相关文章推荐
验证码按回车不变解决方法
Mar 29 Javascript
Javascript/Jquery——简单定时器的多种实现方法
Jul 03 Javascript
js模仿hover的具体实现代码
Dec 30 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
May 13 Javascript
Jquery 全选反选实例代码
Nov 19 Javascript
原生javascript 学习之js变量全面了解
Jul 14 Javascript
React-native桥接Android原生开发详解
Jan 17 Javascript
基于webpack-hot-middleware热加载相关错误的解决方法
Feb 22 Javascript
socket io与vue-cli的结合使用的示例代码
Nov 01 Javascript
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
利用JS响应式修改vue实现页面的input值
Sep 02 Javascript
vue中实现弹出层动画效果的示例代码
Sep 25 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
require(),include(),require_once()和include_once()的异同
2007/01/02 PHP
一贴学会PHP 新手入门教程
2009/08/03 PHP
解析php file_exists无效的解决办法
2013/06/26 PHP
使用PHP连接数据库_实现用户数据的增删改查的整体操作示例
2017/09/01 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
php 读取文件夹下所有图片、文件的实例
2018/10/17 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
jquery form表单序列化为对象的示例代码
2014/03/05 Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
2014/03/18 Javascript
javasctipt如何显示几分钟前、几天前等
2014/04/30 Javascript
jQuery手动点击实现图片轮播特效
2020/04/20 Javascript
bootstrap PrintThis打印插件使用详解
2017/02/20 Javascript
Angularjs 动态添加指令并绑定事件的方法
2017/04/13 Javascript
Javascript中click与blur事件的顺序详析
2017/04/25 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
2018/07/05 Javascript
微信小程序使用swiper组件实现类3D轮播图
2018/08/29 Javascript
Node.js事件的正确使用方法
2019/04/05 Javascript
[01:18]一目了然!DOTA2DotA快捷操作对比第一弹
2014/07/01 DOTA
python基础教程之实现石头剪刀布游戏示例
2014/02/11 Python
介绍Python的Django框架中的QuerySets
2015/04/20 Python
在Debian下配置Python+Django+Nginx+uWSGI+MySQL的教程
2015/04/25 Python
python获取局域网占带宽最大3个ip的方法
2015/07/09 Python
python读取视频流提取视频帧的两种方法
2020/10/22 Python
Python学习笔记之lambda表达式用法详解
2019/08/08 Python
Python3爬虫带上cookie的实例代码
2020/07/28 Python
python 密码学示例——理解哈希(Hash)算法
2020/09/21 Python
python入门教程之基本算术运算符
2020/11/13 Python
详解HTML5 Canvas标签及基本使用
2020/01/10 HTML / CSS
英国第一蛋白粉品牌:Myprotein
2016/09/14 全球购物
中专生毕业自我鉴定
2013/11/01 职场文书
《骆驼和羊》教学反思
2014/02/27 职场文书
课外小组活动总结
2014/08/27 职场文书
党员学习群众路线教育实践活动对照检查材料
2014/09/23 职场文书
Requests什么的通通爬不了的Python超强反爬虫方案!
2021/05/20 Python
python pygame入门教程
2021/06/01 Python
详解Anyscript开发指南绕过typescript类型检查
2022/09/23 Javascript