Angular js - Tutorial 3. $http (XMLHttpRequest)

$http(XMLHttpRequest)를 이용해 json 데이터를 받아오자.

[ guide ]

//Simple GET request example :
$http.get('/someUrl').
    success(function(data, status, headers, config) {
        // this callback will be called asynchronously
        // when the response is available
    }).
    error(function(data, status, headers, config) {
        // called asynchronously if an error occurs
        // or server returns response with an error status.
    }
);
 
//Simple POST request example (passing data) :
$http.post('/someUrl', {msg:'hello word!'}).
    success(function(data, status, headers, config) {
        // this callback will be called asynchronously
        // when the response is available
    }).
    error(function(data, status, headers, config) {
        // called asynchronously if an error occurs
        // or server returns response with an error status.
    }
);

[ webtoon app ]

var webtoonApp = angular.module('webtoonApp',[]);
 
//일반적인 XMLHttpRequest
webtoonApp.controller('webtoonListCtrl', function($scope, $http){
    $http.get('/data/mobile/webtoon?week=mon').success(function(data){
        $scope.webtoons = data.data.webtoons;
    });
});
 
//도메인이 다른 경우 : jsonp 로..
webtoonApp.controller('webtoonListCtrl', function($scope, $http){
    //jsonp일 경우 항상 callback=JSON_CALLBACK 명시(무조건 대문자)
    var jsonUrl = 'http://m.webtoon.daum.net/data/mobile/webtoon?week=mon&callback=JSON_CALLBACK'; 
    $http.jsonp(jsonUrl).success(function(data){
        $scope.webtoons = data.data.webtoons;
    });
});

$http를 이용해 json데이터를 받아올 수 있다.

도메인이 다른경우, jsonp를 이용해야되는데 이때 callback을 보면 대문자로 JSON_CALLBACK 을 명시해주고 있다.

가이드 참고는 https://docs.angularjs.org/api/ng/service/$http 여기에서 가능.