[AngularJS] REST API 통신(with Node.js)

Posted in 모바일/Javascript // Posted at 2016. 7. 15. 20:35
728x90

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 app = require("express")();
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로 저장한다.

<!DOCTYPE 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/ 요청