AngularJS는 원격 서버와의 HTTP 기반 통신을 위해 $http서비스를 제공한다.
$http는 브라우저의 XMLHttpRequest 객체나 JOSNP를 이용하여 원격 서버와 통신하기 위한 AngularJS의 서비스다.
이번 글에서는, $http서비스를 이용한 비동기 통신의 기본적 샘플을 구현해 보겠는데, 서버는 간단히 REST API 구현이 가능한 Node.JS를 사용한다.
* 서버 측 코드
- 먼저 Node.JS 기반으로 동작하는 HTTP 서버를 생성한다. express와 bodyParser 등 확장 라이브러리를 npm을 통해 먼저 설치해 둔다.
서버는 간단한 REST 기반 API 3개를 정의하고 있다.
사용자 목록(/users)과 단일사용자(/users/사용자id) 에 대한 GET API와 사용자등록(/users)을 위한 POST API로 구성되어 있다. 파일을 server.js로 저장하고, 쉘을 통해 server.js를 실행한다.
나머지 사항은 주석을 보면 이해될 정도로 심플하다.
var url = require("url");
//post 데이터의 body 속성 접근 및 json파싱 위한 bodyParser 미들웨어 사용
var bodyParser = require("body-parser");
app.use(bodyParser.urlencoded({extended:true}));
app.use(bodyParser.json());
//루트에 대한 get 요청에 응답
app.get("/", function(req, res){
console.log("get:chatClient.html");
//최초 루트 get 요청에 해대, 서버에 존재하는 client.html 파일 전송
res.sendFile("client.html", {root: __dirname});
});
//GET API(http://127.0.0.1:3000/users), 전체사용자 목록
app.get('/users', function(req, res) {
//임의의 사용자 리스트 생성(실제 환경에서는 db 등 연동 결과로 생성)
var tempUsers = [{id:'park', city:'pusan'}, {id:'kim', city:'seoul'}];
//클라이언트에 반환
res.send(tempUsers);
});
//GET API(http://127.0.0.1:3000/users/1), 특정 사용자 id를 지정하여 한명의 사용자 정보 호출
app.get('/users/:id', function(req, res) {
//매개변수로 전달된 사용자 id 값 추출
var id = req.params.id;
//전달받은 사용자 id 그대로 다시 반환
res.send([{id:id, city:'pusan'}]);
});
//POST API, 새로운 사용자 생성
app.post('/users', function(req, res){
//POST 데이터로 넘어온 JSON 추출
var postData = req.body;
console.log(postData);
//클라이언트에 그대로 다시 반환(실제 환경에서는 db 삽입 등 작업)
res.send([postData]);
});
//3000포트로 http 서버 리스닝 시키기
app.listen(3000);
console.log("Listening on port 3000");
* 클라이언트 측 코드
- 자바스크립트와 HTML을 분리하면 좋지만, 글 작성 편의를 위해 하나의 파일로 만든다. 그리고 서버코드에서 지정한 대로, client.html로 저장한다.
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
//원격 서버 URL 지정
var url = "http://127.0.0.1:3000/users/";
//AngularJS 메인모듈 생성
var app = angular.module('myApp', []);
app.controller('userController', function($http) {
//현재 컨텍스트의 this 참조저장
var userCtrl = this;
//GET 요청
//'http://127.0.0.1:3000/users' 또는 'http://127.0.0.1:3000/users/특정ID' 형태의 rest api 호출
userCtrl.getUser = function(userID){
//사용자 id가 매개변수로 넘어온 경우 url에 id 매개변수 붙이기
var id = userID || "";
$http.get(url + id)
.then(function(response){
//응답 성공 시 실행
userCtrl.users = response.data;
userCtrl.response = response;
})
.catch(function(error){
//실패시 실행
console.log('오류 발생');
userCtrl.response = error;
})
.finally(function() {
//성공, 실패 어떤 경우에도 실행
console.log('finish getUser()');
});
};
//POST 요청
userCtrl.postUser = function(data){
//post로 보낼 json 데이터 임의생성
var postData = JSON.stringify({id:'newID', city:'newCity'});
//http 요청객체 생성
var req = {
method: 'POST',
url: url,
headers: { 'Content-Type': 'application/json; charset=UTF-8'},
data: postData
};
$http(req)
.then(function(response){
userCtrl.users = response.data;
userCtrl.response = response;
})
.catch(function(error){
console.log('오류 발생');
userCtrl.response = error;
})
.finally(function() {
console.log('finish postUser()');
});
};
});
</script>
<body>
<div ng-app="myApp" ng-controller="userController as userCtrl">
<button ng-click='userCtrl.getUser();'>1.GET</button>
<button ng-click='userCtrl.getUser("777");'>1.GET(using ID)</button>
<button ng-click="userCtrl.postUser();">1.POST</button>
<!-- 사용자 리스트 -->
<ul>
<li ng-repeat="user in userCtrl.users">
{{ user.id + ', ' + user.city }}
</li>
</ul>
<!-- 응답 객체 정보 출력 -->
<p>
response status: {{userCtrl.response}}
</p>
</div>
</body>
</html>
설명은 주석으로 충분한 듯 보이고, 실행화면은 다음과 같다.
- GET, http://127.0.0.1:3000/users/ 요청
- GET, http://127.0.0.1:3000/users/777 요청
- POST, http://127.0.0.1:3000/users/ 요청
'모바일 > Javascript' 카테고리의 다른 글
| [AngularJS] 폼(form)과 유효성 검사 (12) | 2016.07.18 |
|---|---|
| [Node.js] CORS 설정(Cross Domain 요청 허용) (10) | 2016.07.15 |
| [Node.js] socket.io를 활용한 웹채팅 구현 (1052) | 2016.07.15 |
| [AngularJS] Route (20) | 2016.07.14 |
| [AngularJS] Directive (12) | 2016.07.13 |
