01. Binding : http://forum.falinux.com/zbxe/index.php?document_srl=804623
02. Controller : http://forum.falinux.com/zbxe/index.php?document_srl=804950
03. controller 사이의 데이터 공유 : http://forum.falinux.com/zbxe/index.php?document_srl=805325
04. controller에 메소드 만들기 : http://forum.falinux.com/zbxe/index.php?document_srl=805915
05. Filter : http://forum.falinux.com/zbxe/index.php?document_srl=806499
06. ng-repeat와 filter의 응용 : http://forum.falinux.com/zbxe/index.php?document_srl=806788
07. Directive : http://forum.falinux.com/zbxe/index.php?document_srl=807545
08. Directive #2 : http://forum.falinux.com/zbxe/index.php?document_srl=808009
09. $scope? scope? : http://forum.falinux.com/zbxe/index.php?document_srl=818891
10. templateUrl 사용하기 : http://forum.falinux.com/zbxe/index.php?document_srl=826765
11. routeProvider 사용하기 : http://forum.falinux.com/zbxe/index.php?document_srl=828375
12. routeProvider 사용하기 #2 : http://forum.falinux.com/zbxe/index.php?document_srl=828883
13. promise 사용하기 : http://forum.falinux.com/zbxe/index.php?document_srl=830819
14. promise 사용하기 #2 : http://forum.falinux.com/zbxe/index.php?document_srl=831099
15. ng-repeat 사용하기 #2 : http://forum.falinux.com/zbxe/index.php?document_srl=831382
16. ng-repeat 사용하기 #3 : http://forum.falinux.com/zbxe/index.php?document_srl=831663
17. Debug directive 만들기 : http://forum.falinux.com/zbxe/index.php?document_srl=832049
18. RestFUL service 연동하기 #1 : http://forum.falinux.com/zbxe/index.php?document_srl=83270320

13,14에서 살펴보았던 promise의 또 다른 활용법을 하나 알아보겠습니다.

기본적인 파일을 만들어보겠습니다.
<!DOCTYPE html>
<html>
<head>
        <title>Binding</title>
</head>
<body>


  <div ng-app="app" ng-controller="AppCtrl">
  </div>

<script type="text/javascript" src="components/angularjs/angular.js"></script>
<script type="text/javascript" src="components/angular-route/angular-route.js"></script>
<script type="text/javascript" src="javascripts/main.js"></script>
</body>
</html>


var app = angular.module("app", []);

app.controller("AppCtrl", function ($q, $timeout) {

});


promise와 resolve를 사용해봅시다.

var app = angular.module("app", []);

app.controller("AppCtrl", function ($q, $timeout) {
    var one = $q.defer();
    var two = $q.defer();
    var three = $q.defer();

    function success(data) {
        console.log(data);
    }
    one.promise.then(success);
    two.promise.then(success);
    three.promise.then(success);

    $timeout(function () {
        one.resolve("one done");
    }, Math.random() * 1000);

    $timeout(function () {
        two.resolve("two done");
    }, Math.random() * 1000);

    $timeout(function () {
        three.resolve("three done");
    }, Math.random() * 1000);
});


브라우저의 개발자도구로 확인해보면 one done, two done, three done이 순서가 랜덤하게 출력이 되는 것을 확인할 수 있습니다. 실제 초기데이터를 가져오는 등의 동작에서 항상 순서가 보장되는 것이 아니죠.


이제 $q.all()을 사용해봅시다.

var app = angular.module("app", []);

app.controller("AppCtrl", function ($q, $timeout) {
    var one = $q.defer();
    var two = $q.defer();
    var three = $q.defer();

    var all = $q.all([one.promise, two.promise, three.promise]);
    all.then(success);

    function success(data) {
        console.log(data);
    }
    one.promise.then(success);
    two.promise.then(success);
    three.promise.then(success);

    $timeout(function () {
        one.resolve("one done");
    }, Math.random() * 1000);

    $timeout(function () {
        two.resolve("two done");
    }, Math.random() * 1000);

    $timeout(function () {
        three.resolve("three done");
    }, Math.random() * 1000);
});

브라우저의 개발자 도구로 확인해보면 각각의 promise로 수행되는 한줄에 하나씩 찍히는 one done, two done, three done 로그는 순서가 랜덤입니다만, $q.all()로 promise한 내용은 배열로 출력이 되며, 항상 순서가 보장되는 것을 확인할 수 있습니다.

이 게시물을...