본문 바로가기
Web/AngularJs

[AngularJS 시작-2] JAVASCRIPT FRAMEWORK / 비동기통신 $HTTP

by 나비와꽃기린 2016. 10. 7.
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.


ajax 통신을 이용해 controller를 호출하여 (비즈니스 로직)데이터를 주고받고, 화면에 그려보는걸 해본다.

AngularJs에서는 ajax를 대신해 앵귤러의 내장객체인 $http를 사용하여 백그라운드 데이터 통신을 구현할 수 있다. $http는 jQuery와 상당히 유사한 구조를 가지고 있기에

ajax를 많이 사용해본 사람이면 쉽게 이해할 수 있다.


화면단 소스는 다음과 같다.

controller는 뷰와 데이터 모델 사이를 연결해주는 작업을 수행해준다.

$scope와 $http를 controller에 인젝션하여 사용한다.

<!DOCTYPE html>
<html lang="ko" ng-app="angularStart">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
    <title>angularStart</title>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <script>
    var module = angular.module("angularStart", []);

    module.controller("MainController", ['$scope','$http', function($scope,$http) {
    	$scope.getItemList = function(){
    	    $http({
    	      method  : 'get',
    	      url     : '/sts/getBoardList',
    	      headers : {'Content-Type': 'application/json; charset=utf-8'} 
    	    }).success(function(data){
    	      $scope.items = data.items;
    	      console.log($scope.items);
    	    });
    	  };
    }]);
    </script>
  </head>
 
  <body>
    <div ng-controller="MainController">
     
      <button type="button" ng-click="getItemList()">load item list</button>

		<li ng-repeat="item in items" >
        <span class="title">{{item.ITEM}}</span>
        <span>{{item.PRICE}}</span>
        </li>
		
    </div>
  </body>
</html>

controller에서는 response로 줄 test data를 생성했다.

일반적으로 service,dao를 통해 비즈니스 로직을 처리하고 데이터를 받아와 return해주면 된다.

@RequestMapping(value = "/getBoardList") public @ResponseBody Map getBoardList(Locale locale, Model model) { /* TEST DATA 생성 */ List list = new ArrayList(); Map map1 = new HashMap(); map1.put("ITEM", "blouse"); map1.put("PRICE","1500000000"); map1.put("LINK", "blouse@naver.com"); Map map2 = new HashMap(); map2.put("ITEM", "Tshirt"); map2.put("PRICE","1000000000"); map2.put("LINK", "Tshirt@naver.com"); Map map3 = new HashMap(); map3.put("ITEM", "Jeans"); map3.put("PRICE","2500000000"); map3.put("LINK", "Jeans@naver.com"); list.add(0, map1); list.add(1, map2); list.add(2, map3); Map result = new HashMap(); result.put("items", list); return result; }