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

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

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

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

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

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초 뒤에 하도록 살짝 수정합니다.


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 부분을 좀 더 간단하게 만들어봅시다.


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할 때 여러 동작을 할 수도 있습니다.

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에서 사용해보겠습니다.

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를 사용하면 초기 데이터를 처리하는 부분을 매끄럽게 처리할 수 있습니다.

이 게시물을...