toggle menu

[AngularJS] 비동기 통신(xhr) - $http 서비스

2012. 10. 30. 12:16 AngularJS
이번에는 자체적으로 배열을 선언하는 것이 아닌, 외부에서 json 객체를 가져와서 이를 목록에 뿌려주는 예제를 살펴보자.
jQuery의 ajax 통신과 상당히 유사한 구조를 보이고 있으며, 앵귤러 내장 객체인 $http 객체를 사용해서 백그라운드 데이터 통신을 구현하고 있다.

이미 jQuery의 $ajax에 익숙해져 있다면, 아래의 소스를 살펴보는 것만으로도 비동기 통신 방법을 이해할 수 있을 것이다.
직접 테스트해볼 수 있도록 Plunker 링크도 남긴다.

Plunker
http://plnkr.co/edit/KF3vdSqEW9xpjbUZGQ8n

<html ng-app ng-controller="PhoneListController">
<!--
하위 모든 요소는 모두 앵귤러 어플리케이션으로 다뤄진다.
-->


<head>
	<meta charset="utf-8">
	<title>Google Phone Gallery</title>
	
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js">
	</script>
	<!--
	이 태그는 당연하게도 앵귤러js를 로드하고, 더불어 HTML페이지가 모두 로드된 후에
	브라우저에 의해 실행되는 콜백을 등록한다.
	-->
	
	<script type="text/javascript" charset="utf-8">
		
		/* BODY 태그 안에 ng-controller 에서 할당해준 컨트롤러의 이름과 동일한 자바스크립트 함수가 자동으로 매칭된다. ng-controller에서 호출할 때는 scope 파라메터를 따로 넣지 않았지만, 실제 컨트롤러 함수에서는 아래와 같이 $scope 를 파라메터로 받는다. 백그라운드 통신을 위해 $http를 파라메터로 추가해준다. */

		function PhoneListController($scope, $http)
		{
			/* jQuery의 ajax 통신과 거의 유사하다. */
			$http.get('sample.json').success(
			function(data)
			{
				$scope.phones = data;
			});
  			
  			/* 기본값을 미리 번호로 정해주었다. */
  			/* 기본값을 정하지 않아도 되지만, 그럴경우 선언된 순서대로 표시된다. */
			$scope.orderProperty = "no";
  			
  			/* 이렇게 선언된 배열 형태의 데이터 모델은 후에 NG-REPEAT에 의해 사용된다. */
		}
		
	</script>
	
	
</head>
<body>
	
	검색 : 
	<input type="text" ng-model="searchKeyword"/>
	<!--
	searchKeyword 라는 이름의 앵귤러 모델을 선언해주었다.
	여기에 입력된 내용은 searchKeyword 라는 모델에 자동으로 들어간다.	
	-->
	
	정렬 : 
	<select ng-model="orderProperty">
		<option value="name" selected>이름</option>
		<option value="snippet">설명</option>
		<option value="no">번호</option>
	</select>
	<!--
	orderProperty 라는 임의의 이름으로 정렬 순서를 정해줄 앵귤러 모델을 선언해 주었다.	
	-->
	
	
	<ul>
		<li ng-repeat="phone in phones | filter:searchKeyword | orderBy:orderProperty">
			번호 : {{phone.no}}<br />
			이름 : {{phone.name}}<br />
			설명 : {{phone.snippet}}
		</li>
	</ul>
	
	<p>
		현재 검색 키워드 : {{searchKeyword || '없음'}}<br />
		현재 정렬 기준 : {{orderProperty}}
	</p>
</body>
</html>



위의 예제는 간단하게 json 파일을 가져오는 예제이다.
저렇게 가져왔을 뿐인데, 앵귤러JS는 자동적으로 JSON 파일임을 인지해서 파싱하는 섬세함을 지니고 있다.

보다 범용적으로 사용할 수 있는 형태로 $http 사용 예를 만들어 봤다.
성공했을 때와 실패했을 때 처리와, 특별한 컨텐트 타입으로 통신할 때를 위해서 헤더 등도 설정할 수 있도록 했다.


/* 파라메터로 보낼 임의의 데이터 객체 */
var dataObject =
{
	dataNo : $scope.dataNo + "",
	dataName : $scope.dataName,
	dataContent : $scope.dataContent
};


/* AJAX 통신 처리 */
$http({
	method: 'POST', //방식
	url: 'http://localhost/jsonURL', /* 통신할 URL */
	data: dataObject, /* 파라메터로 보낼 데이터 */
	headers: {'Content-Type': 'application/json; charset=utf-8'} //헤더
})
.success(function(data, status, headers, config) {
	if( data ) {
		/* 성공적으로 결과 데이터가 넘어 왔을 때 처리 */
	}
	else {
		/* 통신한 URL에서 데이터가 넘어오지 않았을 때 처리 */
	}
})
.error(function(data, status, headers, config) {
	/* 서버와의 연결이 정상적이지 않을 때 처리 */
	console.log(status);
});




AngularJS 관련 포스팅 더보기