03. controller 사이의 데이터 공유 : http://forum.falinux.com/zbxe/index.php?document_srl=805325
04. controller에 메소드 만들기 : http://forum.falinux.com/zbxe/index.php?document_srl=805915

지난 글에서 promise를 사용하는 것에 대해서 간단하게 알아보았습니다.

이번에는 좀 더 구체적으로, 실무에서 사용할만한 방법들을 알아보겠습니다.

지난번에 만들었던 public/index.html과 public/javascripts/main.js 두개를 그대로 활용하겠습니다.

public/javasciprts/main.js를 아래와 같이 수정합니다.

public/javascripts/main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var app = angular.module("app", ['ngRoute']);
 
app.config(function($routeProvider) {
  $routeProvider.when('/', {
    templateUrl: "app.html",
    controller: "AppCtrl",
    resolve: {
      app: function($q) {
        var defer = $q.defer();
        defer.resolve();
        return defer.promise;
      }
    }
  });
});
 
app.controller('AppCtrl', function ($scope, $route) {
  $scope.model = {
    message: "This is my app!!!"
  }
})


여기서 resolve를 2초 뒤에 하도록 살짝 수정합니다.


public/javascripts/main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var app = angular.module("app", ['ngRoute']);
 
app.config(function($routeProvider) {
  $routeProvider.when('/', {
    templateUrl: "app.html",
    controller: "AppCtrl",
    resolve: {
      app: function($q, $timeout) {
        var defer = $q.defer();
 
        $timeout(function() {
          defer.resolve();
        }, 2000);
 
        return defer.promise;
      }
    }
  });
});
 
app.controller('AppCtrl', function ($scope, $route) {
  $scope.model = {
    message: "This is my app!!!"
  }
})


이렇게 하면 2초 뒤에 This is my app!!!이라는 메시지가 뜨면서 로딩이 끝이 납니다.


항상 그렇지만 한 부분에 너무 많은 코드가 들어가있으면 복잡해집니다. resolve 부분을 좀 더 간단하게 만들어봅시다.


public/javascripts/main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var app = angular.module("app", ['ngRoute']);
 
app.config(function($routeProvider) {
  $routeProvider.when('/', {
    templateUrl: "app.html",
    controller: "AppCtrl",
    resolve: {
      loadData: appCtrl.loadData
    }
  });
});
 
var appCtrl = app.controller('AppCtrl', function ($scope, $route) {
  $scope.model = {
    message: "This is my app!!!"
  }
})
 
appCtrl.loadData = function($q, $timeout) {
  var defer = $q.defer();
 
  $timeout(function() {
    defer.resolve();
  }, 2000);
 
  return defer.promise;
}


이렇게 실제 선언부를 분리를 시켰습니다.


resolve할 때 여러 동작을 할 수도 있습니다.

public/javascripts/main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
var app = angular.module("app", ['ngRoute']);
 
app.config(function($routeProvider) {
  $routeProvider.when('/', {
    templateUrl: "app.html",
    controller: "AppCtrl",
    resolve: {
      loadData: appCtrl.loadData,
      prepData: appCtrl.prepData,
    }
  });
});
 
var appCtrl = app.controller('AppCtrl', function ($scope, $route) {
  $scope.model = {
    message: "This is my app!!!"
  }
})
 
appCtrl.loadData = function($q, $timeout) {
  var defer = $q.defer();
 
  $timeout(function() {
    defer.resolve();
    console.log("loadData");
  }, 2000);
 
  return defer.promise;
}
 
appCtrl.prepData = function($q, $timeout) {
  var defer = $q.defer();
 
  $timeout(function() {
    defer.resolve();
    console.log("prepData");
  }, 2000);
 
  return defer.promise;
}


크롬 개발자 도구로 보면 loadData와 prepData가 출력되는 것을 확인할 수 있습니다.


이제 실제 resolve할때 얻은 데이터를 controller에서 사용해보겠습니다.

public/javascripts/main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
var app = angular.module("app", ['ngRoute']);
 
app.config(function($routeProvider) {
  $routeProvider.when('/', {
    templateUrl: "app.html",
    controller: "AppCtrl",
    resolve: {
      loadData: appCtrl.loadData,
      prepData: appCtrl.prepData,
    }
  });
});
 
var appCtrl = app.controller('AppCtrl', function ($scope, $route) {
  console.log($route.current.locals.loadData);
  console.log($route.current.locals.prepData);
  $scope.model = {
    message: "This is my app!!!"
  }
})
 
appCtrl.loadData = function($q, $timeout) {
  var defer = $q.defer();
 
  $timeout(function() {
    defer.resolve("loadData");
  }, 2000);
 
  return defer.promise;
}
 
appCtrl.prepData = function($q, $timeout) {
  var defer = $q.defer();
 
  $timeout(function() {
    defer.resolve("prepData");
  }, 2000);
 
  return defer.promise;
}


결과는 똑같지만 loadData와 prepData를 controller가 받아서 출력하게 되었습니다.



이렇게 promise를 사용하면 초기 데이터를 처리하는 부분을 매끄럽게 처리할 수 있습니다.