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; }
'Web > AngularJs' 카테고리의 다른 글
| [AngularJS 시작-3] JAVASCRIPT FRAMEWORK / Filters (0) | 2016.10.07 |
|---|---|
| [AngularJS 시작-1] Javascript Framework/angularJs 예제 (0) | 2016.09.30 |