AngularJS-webapp($q)

$q延迟加载:

当一个数据需要请求多次,后面一个数据需要前面请求的数据时,我们就可以通过延迟加载进行数据传递

如下代码:

首先:我们需要得到职位信息:

{
  "id": "p3",
  "imageUrl": "/image/company-3.png",
  "name": "销售",
  "companyId": "c3",
  "companyName": "千度",
  "cityId": "c1",
  "cityName": "上海",
  "scaleId": "s3",
  "scaleName": "500人以上",
  "industryId": "i1",
  "industryName": "互联网",
  "salaryId": "s2",
  "salaryName": "3k-5k",
  "experience": "1-3年",
  "education": "专科",
  "benefit": "成长空间大",
  "description": "岗位职责:\n1.销售产品;..."
}

其次通过职位信息里面的companyId获得company信息:

{
    "id": "c1",
    "imageUrl": "/image/company-1.png",
    "name": "慕课网",
    "industry": "移动互联网",
    "state": "A轮",
    "people": "50-150人",
    "positionClass": [{
      "id": "jishu",
      "name": "技术",
      "positionList": [{
        "id": "p1",
        "name": "IOS前端工程师",
        "createdDate": "2016-04-16 23:30",
        "salary": "15k-25k"
      }]
    }, {
      "id": "yunying",
      "name": "运营",
      "positionList": [{
        "id": "y1",
        "name": "运营总监",
        "createdDate": "2016-04-10 13:30",
        "salary": "25k以上"
      }]
    }]
}
function getPosition() {
            var def = $q.defer();

            $http.get(‘data/position.json?id=‘ + $state.params.id)
                .then(function (response) {
                    $scope.position = response.data;
                    def.resolve(response.data);
                }).catch(function (err) {
                def.reject(err);
            });
            return def.promise;
        }

        function getCompany(id) {
            $http.get(‘data/company.json?id=‘ + id).then(function (response) {
                $scope.company = response.data;
            });
        }

        getPosition().then(function (response) {
           getCompany(response.companyId)
        });
时间: 2024-12-19 09:08:07

AngularJS-webapp($q)的相关文章

angularJs中$q的两种写法

带缓存处理的两种写法 过程:点击button触发load()方法,请求数据成后显示到页面中.如果已经请求过则从缓存中读取. 在线浏览 写法1: function demo(){ if (demo.cache == undefined) { return $http.get('https://api.github.com/users/github') .success(function(data, status, headers){ demo.cache = data; return $q(fun

angularjs 缓存 $q

<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> #parent div{ width:300px; height:500px; b

Cordova 3.x 基础(8) -- 几个不可或缺的lib

原文:http://rensanning.iteye.com/blog/2021720 (1)Zepto.js http://zeptojs.com/jQuery绝对是最流行的类库,但是现在对它的批评是越来越多,主要问题是它的大小,即使版本2.0中去除了对于IE6,IE7和IE8的支持,但是仍旧体积比较大,特别对于移动设备来说. 相比人们开始更加关注Vanilla JS http://vanilla-js.com/,它对于DOM处理以外的内容更快,更高效. 对于Hybrid App来说,Zept

angularjs $q、$http 处理多个异步请求

在实际业务中经常需要等待几个请求完成后再进行下一步操作.但angularjs中$http不支持同步的请求. 解决方法一: $http.get('url1').success(function (d1) { $http.get('url2').success(function (d2) { //处理逻辑 }); }); 解决方法二: then中的方法会按顺序执行. var app = angular.module('app',[]); app.controller('promiseControl'

AngularJS 中的Promise --- $q服务详解

    阅读目录 什么是Promise $q服务 先说说什么是Promise,什么是$q吧.Promise是一种异步处理模式,有很多的实现方式,比如著名的Kris Kwal's Q还有JQuery的Deffered. 回到顶部 什么是Promise 以前了解过Ajax的都能体会到回调的痛苦,同步的代码很容易调试,但是异步回调的代码,会让开发者陷入泥潭,无法跟踪,比如: funA(arg1,arg2,function(){ funcB(arg1,arg2,function(){ funcC(arg

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

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

angularjs学习笔记--组件、$http、$q、module

1-组件 创建组件,使用angularjs模块的conponent()方法,component(name,options);使用编译器注册组件定义,表示应用程序中的一个独立的UI组件.组件定义通常仅由模板和控制器组成.name为组件名,options为组件定义对象,其属性包括:controller(应该与新创建的作用域相关联的控制器构造函数或作为字符串传递的注册控制器的名称).controllerAs(用于在组件范围内引用控制器的标识符名称).template(html模板作为一个字符串或函数返

$q -- AngularJS中的服务 学习

原文:http://blog.csdn.net/renfufei/article/details/19174015/ 描述https://docs.angularjs.org/api/ng/service/$q 译者注: 看到了一篇非常好的文章,如果你有兴趣,可以查看: Promises与Javascript异步编程 , 里面对Promises规范和使用情景,好处讲的非常好透彻,个人觉得简单易懂. 既然是用来处理异步编程的,那么在浏览器端的JS里,主要是2种: setTimeout 和 Ajax

翻译:JavaScript Promises and AngularJS $q Service

原文:http://www.webdeveasy.com/javascript-promises-and-angularjs-q-service/ 原文时间:2014年9月30号 一个promise(延缓)是处理异步开发简单而强大的方法.CommonJS 维基百科列出了几个promise模式的实施提议.AngularJS自己的promise实现方法是受kris Kowal's Q的方法启发的.在这篇文章中我会介绍promises,它的目的和怎么通过AngularJS $q的promise服务开发

关于angularjs异步操作后台请求时,用$q.all排列先后顺序的问题

最近我在做angularjs程序时遇到了一个问题 1.页面有很多选择框,一个选择框里面有众多的选择项,和一个默认选定的项,像下面这样(很多选择框,不只一个): 2.众多的选项要从后台接口得到,默认项从另一个后台接口得到,这就需要$promise.then()操作 3.而多个$promise.then()属于异步操作,先后顺序不是一定的,如果先得到众多选项,后得到默认值,显示就没有问题,如果顺序颠倒,默认项就会为空,这不是我想要的 4.这就需要众多选项的后台请求都获得完,才去后台请求默认值, 就用