详解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 相关文章推荐
javascript中用星号表示预录入内容的实现代码
Jan 08 Javascript
下载文件个别浏览器文件名乱码解决办法
Mar 19 Javascript
JavaScript原型链示例分享
Jan 26 Javascript
Jquery弹出层插件ThickBox的使用方法
Dec 09 Javascript
JavaScript对数字的判断与处理实例分析
Feb 02 Javascript
老生常谈遮罩层 滚动条的问题
Apr 29 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
Jan 12 Javascript
js时间查询插件使用详解
Apr 07 Javascript
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
Nov 27 Javascript
新手入门带你学习JavaScript引擎运行原理
Jun 24 Javascript
layui实现鼠标移动到单元格上显示数据的方法
Sep 11 Javascript
js实现简单掷骰子效果
Oct 24 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
如何冲泡挂耳包咖啡?技巧是什么
2021/03/04 冲泡冲煮
php设计模式之单例模式使用示例
2014/01/20 PHP
PHP+jQuery 注册模块的改进(一):验证码存入SESSION
2014/10/14 PHP
PHP微信开发之根据用户回复关键词\位置返回附近信息
2016/06/24 PHP
PHP PDOStatement::errorCode讲解
2019/01/31 PHP
jQuery AnythingSlider滑动效果插件
2010/02/07 Javascript
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
2011/03/28 Javascript
在JavaScript中判断整型的N种方法示例介绍
2014/06/18 Javascript
JavaScript移除数组内重复元素的方法
2015/03/18 Javascript
判断访客终端类型集锦
2015/06/05 Javascript
在Node.js中使用Javascript Generators详解
2016/05/05 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
2016/06/07 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
2016/11/01 Javascript
简单实现AngularJS轮播图效果
2020/04/10 Javascript
MUI  Scroll插件的使用详解
2017/04/13 Javascript
关于jquery form表单序列化的注意事项详解
2017/08/01 jQuery
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
2017/11/08 jQuery
webpack external模块的具体使用
2018/03/10 Javascript
简述vue路由打开一个新的窗口的方法
2018/11/29 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
2019/03/14 Javascript
js尾调用优化的实现
2019/05/23 Javascript
Vue学习笔记之计算属性与侦听器用法
2019/12/07 Javascript
React实现阿里云OSS上传文件的示例
2020/08/10 Javascript
Python 深入理解yield
2008/09/06 Python
深度剖析使用python抓取网页正文的源码
2014/06/11 Python
Python判断以什么结尾以什么开头的实例
2018/10/27 Python
django模板加载静态文件的方法步骤
2019/03/01 Python
如何用C代码给Python写扩展库(Cython)
2019/05/17 Python
OpenCV3.0+Python3.6实现特定颜色的物体追踪
2019/07/23 Python
LUISAVIAROMA德国官网:时尚奢侈品牌购物网站
2020/11/12 全球购物
护士个人自我鉴定
2014/03/24 职场文书
社区志愿者活动方案
2014/08/18 职场文书
酒店工程部主管岗位职责
2015/04/16 职场文书
《宝可梦》动画制作25周年到来 官方发布特别纪念视频
2022/04/01 日漫
vue @click.native 绑定原生点击事件
2022/04/22 Vue.js
html5+实现plus.io进行拍照和图片等获取
2022/06/01 HTML / CSS