angularjs 系列之$q和promise
还是同一个项目,在项目中,发现多个controller之内有一个共同的服务器请求,当时只是不断的重复使用,如今,现在项目结束,代码开始走向了优化迭代的阶段;
首先,我的思路是把这个共同的请求,从controller里抽出来,做成一个服务,然后在需要的controller里注入;
第一个问题是请求服务器数据:
var app = angular.module('testApp',['ui.bootstrap']);
app.factory('myService',['$http','$q',function($http,$q){
return {
query : function() {
var deferred = $q.defer(); // 声明延后执行,表示要去监控后面的执行 $http({method: 'GET', url: 'data.php'}).success(function(data, status, headers, config) { deferred.resolve(data); // 声明执行成功,即http请求数据成功,可以返回数据了 }).error(function(data, status, headers, config) { deferred.reject(data); // 声明执行失败,即服务器返回错误 }); return deferred.promise; // 返回承诺,这里并不是最终数据,而是访问最终数据的API
}, // end query
title : '页面标题设置'
};
}]);
至于promise,这里我简单的说,他是一个对象,也是一种异步编程模式,要了解详细,请到这里js 异步编程。
服务创建之后,把服务创建到controller里,调用就可以跑起来了。
app.controller('myController',function($scope,myService){
var use = myService.query(); //调用服务里的query函数
use.then(function(data){//then是回调函数,里面可以写user.then(successFun(),errFun());
$scope.version = data;//data 是promise的返回数据
});
setTimeout(function(){
console.log($scope.version);
},1); var tit = myService.title;
$scope.title = tit;
});
这个是使用factory创建的服务,创建服务还有其他方式:service()、provider()等;
这个例子是关于服务里中包含服务器交互的一个方法,需要的小伙伴可以参考;
注意:服务里不能注入$scope这个对象;
angularjs 系列之$q和promise的更多相关文章
- AngularJS 系列 学习笔记 目录篇
目录: AngularJS 系列 01 - HelloWorld和数据绑定 AngularJS 系列 02 - 模块 (持续更新)
- 浅谈Angular的 $q, defer, promise
浅谈Angular的 $q, defer, promise 时间 2016-01-13 00:28:00 博客园-原创精华区 原文 http://www.cnblogs.com/big-snow/ ...
- AngularJS 系列 01 - HelloWorld和数据绑定
目录导读: AngularJS 系列 学习笔记 目录篇 前言: 好记性不如烂键盘,随笔就是随手笔记,希望以后有用. 本篇目录: 1. Hello World 2. AngularJS中的数据绑定 3. ...
- AngularJS 系列 02 - 模块
引导目录: AngularJS 系列 学习笔记 目录篇 前言: 其实,在上篇文章介绍数据绑定的时候,我们的HelloWorld的代码案例中就已经使用了模块(module).哈哈. 本篇就着重介绍一下a ...
- AngularJS系列之总结
AngularJS深入的系列就是这九篇博客了,把我以前在项目中应用到的和自己学习的都总结在了里面.为了更方便的看,把我写的AngularJS系列的博客都列到下面.之后就开始学习ionic:html5移 ...
- angularjs系列之轻松使用$q进行异步编程
第一部分关于js中的异步编程 异步编程简单的说就是你写了一段代码,但他不会按照你书写代码的顺序立即执行,而是等到程序中发生了某个事件(如用户点击了某个按钮,某个ajax请求得到了响应)才去执行这段代码 ...
- [AngularJS] AngularJS系列(7) 进阶篇之promise
目录 使用promise 补充说明 $q.all $q.when 在上节中,我们在http中使用了then 和 在ngResource中返回了一个'延迟对象'. 本节介绍一下angular中的prom ...
- [AngularJS] AngularJS系列(2) 中级篇之路由
目录 原理 angular-route ui-router 事件 深度路由 原理 ng的route本质是监听hashchange事件. 在angular-route中 $rootScope.$on(' ...
- Angularjs中的$q详解
先说说什么是Promise,什么是$q吧.Promise是一种异步处理模式,有很多的实现方式,比如著名的Kris Kwal's Q还有JQuery的Deffered. 什么是Promise 以前了解过 ...
随机推荐
- php判断页面是否是微信打开的示例(微信打开网页)
代码如下: $user_agent = $_SERVER['HTTP_USER_AGENT'];if (strpos($user_agent, 'MicroMessenger') === false) ...
- ios -仿微信有多级网页时,显示返回跟关闭按钮
@property (nonatomic, copy) NSString * url; @interface WebViewController ()<UIWebViewDelegate,UIG ...
- 【BZOJ3143】[Hnoi2013]游走 期望DP+高斯消元
[BZOJ3143][Hnoi2013]游走 Description 一个无向连通图,顶点从1编号到N,边从1编号到M. 小Z在该图上进行随机游走,初始时小Z在1号顶点,每一步小Z以相等的概率随机选 ...
- H - Funny Car Racing
H - Funny Car Racing Time Limit:1000MS Memory Limit:0KB 64bit IO Format:%lld & %llu Desc ...
- ubuntu16.04下hive安装与配置
Hive是什么? 由Facebook开源用于解决海量 结构化日志的数据统计: Hive是基于Hadoop的一个 数据仓库工具,可以将结构化的数据文件映射 成一张表,并提供类SQL查询功能: 构建在Ha ...
- Netty ByteBuf(图解之 2)| 秒懂
目录 Netty ByteBuf(图解二):API 图解 源码工程 写在前面 ByteBuf 的四个逻辑部分 ByteBuf 的三个指针 ByteBuf 的三组方法 ByteBuf 的引用计数 Byt ...
- Bootstrap第2天
Bootstrap第2天 解决IE低版本不支持HTML5元素的方法 CSS全局样式--栅格系统 1.栅格系统介绍 Bootstrap提供了一套响应式.移动设备优先的流式的栅格系统. B ...
- JVM类加载流程
1.加载 a.装载类的第一个阶段 b.取得类的二进制流 c.转为方法区数据结构 d.在Java堆中生成对应的java.lang.Class对象 2.链接 a.验证(保证Class流的格式是正确的) 文 ...
- Smarty模板的逻辑运算符号稍微做一下总结
对Smarty模板的逻辑运算符号稍微做一下总结,以备后用. eq equal : 相等neq not equal:不等于gt greater than:大于lt less th ...
- Property Animator基本用法
ObjectAnimator anim=ObjectAnimator.ofFloat(textview, "alpha", 0f, 1f); //ObjectAnimator an ...