AngularJS에서 $http 서비스를 이용하여 json 데이터를 컨트롤러에 갖고 와 화면에 표시해 본다. AngularJS를 사용하기 위해서 아래와 같이 angularJS CDN을 script 태그에 추가한다.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
div 태그에 ng-app 속성을 만들고 "myApp" 으로 정의하고 ng-controller 속성을 만들고 "myCtrl"이라고 정의한다.
<div ng-app="myApp" ng-controller="myCtrl">
컨트롤러 코드를 살펴보면 $http.get()으로 파일경로를 입력하면 파일 내용을 response에 담아온다.
JSON 파일경로나 JSON 데이터를 넘겨주는 URL을 기재한다.
json 데이터를 보면 date 이름으로 배열형태로 담겨 있어서 response.data로 했다.
$http.get("./data.json").success(
function(response) {
$scope.data = response.data;
});
});
예제의 전체코드이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AngularJS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("./data.json").success(
function(response) {
$scope.data = response.data;
}
);
});
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
Book List :
<ul>
<li ng-repeat="x in data">{{ x.id+ ', ' + x.name}}</li>
</ul>
</div>
<hr>
</body>
</html>
위의 코드에서 사용한 data.json 파일이다.
실제 프로젝트에서는 코드로 데이터를 사용하겠지만 여기서는 예제를 위해 파일로 생성해 두었다.
{
"data" : [ {
"id" : "1",
"name" : "MongoDB"
}, {
"id" : "2",
"name" : "Express"
}, {
"id" : "3",
"name" : "AngularJS"
}, {
"id" : "4",
"name" : "Node.js"
}, {
"id" : "5",
"name" : "jQuery Mobile"
} ]
}
컨트롤러에서 $http 서비스로 받아온 데이터를 아래와 같이 표시한다.
지난번 정렬 필터의 내용을 복습할 겸 해서 "name" 필드로 정렬해 보았다.
<li ng-repeat="x in data | orderBy:'name'">{{ x.id+ ', ' + x.name}}</li>
'■ Front-End ■ > AngularJs' 카테고리의 다른 글
| [AngularJS] ng-disabled 속성으로 버튼을 활성화/비활성화 (0) | 2023.02.22 |
|---|---|
| [AngularJS] $http 서비스로 받아온 데이터에 필터를 적용해보자. (0) | 2023.02.22 |
| [AngularJS] 출력된 목록에 필터(Filter)를 적용해보자. (0) | 2023.02.22 |
| [AngularJS] 표시되는 데이터를 정렬(orderBy) 해보자. (0) | 2023.02.22 |
| [AngularJS] ng-controller에서 $scope 를 사용해보자. (0) | 2023.02.22 |
댓글