• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >AngularJS > 详解Angular中$cacheFactory缓存的使用

详解Angular中$cacheFactory缓存的使用

作者:薛陈磊 字体:[增加 减小] 来源:互联网 时间:2017-05-30

本文主要包含angular js详解,angular cache,angular factory,angular中的factory,angular js factory等相关知识,薛陈磊 希望在学习及工作中可以帮助到您

最近在学习使用angular,慢慢从jquery ui转型到用ng开发,发现了很多不同点,继续学习吧;

  首先创建一个服务,以便在项目中的controller中引用,服务有几种存在形式,factory();service();constant();value();provider();其中provider是最基础的,其他服务都是基于这个写的,具体区别这里就不展开了,大家可以看看源码;服务是各个controller之间通话的重要形式,在实际项目中会用的很多,下面是代码:

angular.module('yourApp').factory('myCache',function($cacheFactory){
return $cacheFactory('myData');
});
</div>

  这里‘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
});
}
}])
</div>

页面第一次打开时,会从接口中获取数据,当页面发生路由跳转时,这些数据是一直被缓存的,路由跳转到有需求的页面,监测到已经被缓存,就不用向服务器请求数据了,如果是页面被关闭或者是刷新了页面,缓存会丢失,重新向、请求数据并缓存;

这是个简单的示例,在实际项目中的数据会复杂些,比如为了页面优化减少而将页面数据集合请求,减少数据请求次数,获取到数据后分配的route的各个template中,数据结构会复杂些;

目前还没有缓存比较大的数据的示例,理论上这里的cache是javascript中的一个object对象,所以应用中cache的大小限制或大小对浏览器页面性能的影响,还不是很清楚,继续深扒,发现了不同点再来续更。

以上所述是小编给大家介绍的详解Angular中$cacheFactory缓存的使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

</div>

您可能想查找下面的文章:

  • 详解Angular路由 ng-route和ui-router的区别
  • 详解Angular2中Input和Output用法及示例
  • Angular.JS中的this指向详解
  • 详解如何在Angular中快速定位DOM元素
  • Angular.js中ng-include用法及多标签页面的实现方式详解
  • Angular.js中控制器之间的传值详解
  • Angular中使用$watch监听object属性值的变化(详解)
  • 关于angular js_$watch监控属性和对象详解
  • Angular2数据绑定详解
  • Angular中ng-bind和ng-model的区别实例详解

相关文章

  • 2017-05-30AngularJS学习第二篇 AngularJS依赖注入
  • 2017-05-30AngularJS中update两次出现$promise属性无法识别的解决方法
  • 2017-05-30老生常谈angularjs中的$state.go
  • 2017-05-30简介AngularJS中使用factory和service的方法
  • 2017-05-30AngularJS入门教程之Scope(作用域)
  • 2017-05-30AngularJs Javascript MVC 框架
  • 2017-05-30AngularJS 依赖注入详解及示例代码
  • 2017-05-303个可以改善用户体验的AngularJS指令介绍
  • 2017-05-30angularJS中router的使用指南
  • 2017-05-30AngularJs表单验证实例详解

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • AngularJS基础 ng-mouseover 指令简单示例
    • angular仿支付宝密码框输入效果
    • AngularJS入门教程之Scope(作用域)
    • angularJS中router的使用指南
    • 基于AngularJS实现页面滚动到底自动加载数据的功能
    • 使用Chrome浏览器调试AngularJS应用的方法
    • Angular1.x自定义指令实例详解
    • Angular2 多级注入器详解及实例
    • AngularJS学习笔记之依赖注入详解
    • angularjs点击图片放大实现上传图片预览

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有