이번에는 자체적으로 배열을 선언하는 것이 아닌, 외부에서 json 객체를 가져와서 이를 목록에 뿌려주는 예제를 살펴보자.
jQuery의 ajax 통신과 상당히 유사한 구조를 보이고 있으며, 앵귤러 내장 객체인 $http 객체를 사용해서 백그라운드 데이터 통신을 구현하고 있다.
이미 jQuery의 $ajax에 익숙해져 있다면, 아래의 소스를 살펴보는 것만으로도 비동기 통신 방법을 이해할 수 있을 것이다.
직접 테스트해볼 수 있도록 Plunker 링크도 남긴다.
Plunker
http://plnkr.co/edit/KF3vdSqEW9xpjbUZGQ8n
위의 예제는 간단하게 json 파일을 가져오는 예제이다.
저렇게 가져왔을 뿐인데, 앵귤러JS는 자동적으로 JSON 파일임을 인지해서 파싱하는 섬세함을 지니고 있다.
보다 범용적으로 사용할 수 있는 형태로 $http 사용 예를 만들어 봤다.
성공했을 때와 실패했을 때 처리와, 특별한 컨텐트 타입으로 통신할 때를 위해서 헤더 등도 설정할 수 있도록 했다.
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);
});
