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

지난번까지 해서 $routeProvider를 사용하는 방법에 대해서 알아보았습니다.

이번에는 promise를 사용하는 것에 대해서 알아보겠습니다.

promise는 resolve가 될 때 해야할 동작들에 대해서 미리 정의를 해 두는 것을 의미합니다.

아래와 같이 기본적인 angular js 파일들을 구성해서 시작해봅시다.

<!DOCTYPE html>
<html>
<head>
        <title>Binding</title>
</head>
<body>
<div ng-app="app">
	<ng-view>
	</ng-view>
</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>


<h1>{{model.message}}</h1>

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

app.config(function($routeProvider) {
  $routeProvider.when('/', {
    templateUrl: "app.html",
    controller: "AppCtrl"
  });
});

app.controller('AppCtrl', function ($scope) {
  $scope.model = {
    message: "This is my app!!!"
  }
})



우선 main.js를 아래와 같이 수정합니다.

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

app.config(function($routeProvider) {
  $routeProvider.when('/', {
    templateUrl: "app.html",
    controller: "AppCtrl"
  });
});

app.controller('AppCtrl', function ($scope, $q) {
  var defer = $q.defer();

  defer.promise.then(function () {
    alert("promised things!");
  });

  defer.resolve();

  $scope.model = {
    message: "This is my app!!!"
  }
})


브라우저로 확인하면 alert 창이 뜨는 것을 확인할 수 있습니다.

defer.resolve()가 호출되는 시점에 alert창이 뜨는 것은 크롬 개발자 도구로 확인할 수 있습니다.


이와 같이 resolve()가 호출될 때 처리할 로직들을 promise에 넣어둘 수 있습니다. 하나만 넣을 수 있는 것은 아니고 chain으로 넣을 수도 있습니다.


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

app.config(function($routeProvider) {
  $routeProvider.when('/', {
    templateUrl: "app.html",
    controller: "AppCtrl"
  });
});

app.controller('AppCtrl', function ($scope, $q) {
  var defer = $q.defer();

  defer.promise.then(function (message) {
    alert(message);
    return "1호기 출동!";
  }).then(function (message) {
    alert(message);
    return "2호기 출동!";
  }).then(function (message) {
    alert(message);
    return "3호기 출동!";
  }).then(function (message) {
    alert(message);
    return "4호기 출동!";
  }).then(function (message) {
    alert(message);
    return "5호기 출동!";
  }).then(function (message) {
    alert(message);
    alert("독수리 5형제 출동 완료!");
  });

  defer.resolve("독수리 5형제 출동!");

  $scope.model = {
    message: "This is my app!!!"
  }
})


이렇게 연결된 여러 동작을 수행하는 것도 어렵지 않습니다.


주로 promise는 page가 최초에 loading될 때 각종 기본 데이터를 가져올 때 많이 사용합니다.


이런 기법에 대해서는 다음 글에서 알아보겠습니다.

이 게시물을...