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这个对象

时间: 2024-08-03 05:32:55

angularjs 系列之$q和promise的相关文章

深究angularJS系列 - 第三弹

深究angularJS系列 - 初识 深究angularJS系列 - 第二弹 深究angularJS系列 - 第三弹,我们一起深入探究angular的服务和自定义指令O(∩_∩)O~~ Angular服务 $http: $http是angular中的一个核心服务; $http利用浏览器的xmlhttprequest或JSONP与远程HTTP服务器进行交互; $http的支持多种method的请求,get.post.put.delete.jsonp等. 下面通过JSONP方法进行$http服务的使

深究angularJS系列 - 第二弹

深究angularJS系列 - 第二弹,在初步了解了Angular的基础上,进一步的针对Angular的控制器和作用域问题深入探究O(∩_∩)O~~ Angular控制器 控制器(Controller)的理解 控制器是对view的抽象,用来接收view的事件,响应view的请求: 控制器包含view的静态属性和动态的方法: 控制器与view是一对一的关系. 控制器(Controller)的结构 1 .controller("控制器的名字",function($scoppe){ 2 ..

浅谈Angular的 $q, defer, promise

1. $q $q是Angular的一种内置服务,它可以使你异步地执行函数,并且当函数执行完成时它允许你使用函数的返回值(或异常). 2. defer defer的字面意思是延迟,$q.defer() 可以创建一个deferred实例(延迟对象实例). deferred 实例旨在暴露派生的Promise 实例,以及被用来作为成功完成或未成功完成的信号API,以及当前任务的状态.这听起来好复杂的样子,总结$q, defer, promise三者之间的关系如下所示. var deferred = $q

AngularJS系列之总结

AngularJS深入的系列就是这九篇博客了,把我以前在项目中应用到的和自己学习的都总结在了里面.为了更方便的看,把我写的AngularJS系列的博客都列到下面.之后就开始学习ionic:html5移动开发框架,它是基于AngularJS的移动开发框架.希望大家多多关注我的博客,多多推荐. AngularJS之站在jQuery的肩膀上: http://www.cnblogs.com/xuema/p/4335180.html AngularJS应用开发思维之1:声明式界面  http://www.

angularjs系列之轻松使用$q进行异步编程

 第一部分关于js中的异步编程 异步编程简单的说就是你写了一段代码,但他不会按照你书写代码的顺序立即执行,而是等到程序中发生了某个事件(如用户点击了某个按钮,某个ajax请求得到了响应)才去执行这段代码,而且这段代码可能执行一次(如一个ajax请求得到了响应).也可能执行很多次或者不执行(一个按钮被点击了许多次或者0次)这就是所谓的异步编程. 有两种异步程序模式单次执行模式和监听执行模式.像ajax请求这样的就是属于单次执行模式,请求.回调只会进行一次.像事件绑定就属于监听执行模式,只要事件发生

[AngularJS] AngularJS系列(7) 进阶篇之promise

目录 使用promise then链 扩展 在上节中,我们在http中使用了then 和 在ngResource中返回了一个'延迟对象'. 本节介绍一下angular中的promise. 我觉得可以把js中的promise比作c#中的Task 的await 以同步的时候 实现回调. 使用promise HTML <input type="checkbox" ng-model="flag" /> <button ng-click="func

[AngularJS] AngularJS系列(2) 中级篇之路由

目录 原理 angular-route ui-router 事件 深度路由 原理 ng的route本质是监听hashchange事件. 在angular-route中 $rootScope.$on('$locationChangeStart', prepareRoute); $rootScope.$on('$locationChangeSuccess', commitRoute); 在ui-router中 listener = listener || $rootScope.$on('$locat

[AngularJS] AngularJS系列(6) 中级篇之ngResource

目录 $http ngResource $http几乎是所有ng开发中,都会用到的服务.本节将重点说下$http 与 ngResource $http 使用:$http(config); 参数: method:字符串,请求方法. url:字符串,请求地址. params:字符串或者对象,将使用paramserializer序列化并且作为GET请求的参数. data:字符串或者对象,作为请求信息数据的数据. headers:对象,字符串或者函数返回表示发送到服务器的HTTP请求头.如果函数的返回值

[转载]去掉的URL里的#号——angularjs系列

AngularJS体验式编程系列文章,将介绍如何用angularjs构建一个强大的web前端系统.angularjs是由Google团队开发的一款非常优秀web前端框架.在当前如此多的web框架下,angularjs能脱颖而出,从架构设计上就高人一等,双向数据绑定,依赖注入,指令,MVC,模板.Angular.js创新地把后台技术融入前端开发,扫去jQuery一度的光芒.用angularjs就像写后台代码,更规范,更结构化,更可控. 关于作者 张丹(Conan), 程序员Java,R,PHP,J