[angularJS] XHR/Ajax/$http 호출과 JSON 바인딩

실제 서버의 XHR 호출을 한다.

$http 메소드는 Angular가 서버 데이터에 접근하는 기능을 래핑한 메소드이다.

myApp.controller('MainCtrl', '$http' ['$scope', function ($scope, $http) { $http({ method: 'GET', url: '//localhost:9000/someUrl' }) .success(function (data, status, headers, config) { // 성공! 데이터를 가져왔어 }) .error(function (data, status, headers, config) { // 이런. 뭔가 잘못되었음! :( }); }]);

-- GET요청을 보내고 성공인지 실패인지 확인한다.

{ "user": { "name": "Todd Motto", "id": "80138731" } }

- data.user 속성 안에 name과 id를 넣어준 것.

myApp.controller('UserCtrl', ['$scope', '$http', function ($scope, $http) { // 사용자 객체를 생성 $scope.user = {}; // 빈 문자열로 초기화 $scope.user.username = ''; // 서버에 사용자 이름을 요청 $http({ method: 'GET', url: '//localhost:9000/someUrlForGettingUsername' }) .success(function (data, status, headers, config) { // 서버로부터 받아온 사용자 이름을 모델에 할당! $scope.user.username = data.user.name; }) .error(function (data, status, headers, config) { // 이런. 뭔가 잘못되었음! :( }); }]);  

- 성공하면 좀 전에 받아온 data.user.name을 $scope.user.username에 넣는다.

<div ng-controller="UserCtrl"> <p>{{ user.username }}</p> </div>

- DOM에서 이렇게 선언해주면 사용자 이름이 출력된다.

* 출처 : http://soomong.net/blog/2014/01/20/translation-ultimate-guide-to-learning-angularjs-in-one-day/