AngularJS HTTP
$http은 원격 서버에서 데이터를 읽는 데 사용되는 AngularJS의 핵심 서비스입니다.
JSON 파일 읽기
다음은 웹 서버에 저장된 JSON 파일입니다.
http://www.php.cn/try/angularjs/data/Customers_JSON.php
{
"records":
[
{
"Name" : "Alfreds Futterkiste",
"City" : "Berlin",
"Country" : "Germany"
},
{
"Name" : "Berglunds snabbköp",
"도시" : "Luleå",
"국가" : "스웨덴"
},
{
"이름" : "Centro commercialal Moctezuma",
"City" : "México D.F.",
"Country" : "Mexico"
},
{
"Name" : "Ernst Handel",
"City" : "Graz",
"Country" : "Austria"
},
{
"Name" : "FISSA Fabrica Inter. Salchichas S.A.",
"City" : "마드리드",
"국가" : "스페인"
},
{
"Name" : "Galería del gastrónomo",
"City" : "바르셀로나",
"국가" : "스페인"
},
{
"이름" : "섬 무역",
"City" : "소",
"Country" : "UK"
},
{
"Name" : "Königlich Essen",
"City" : "Brandenburg",
"Country" : "Germany"
},
{
"Name" : "Laughing Bacchus Wine Cellars",
"City" : "Vancouver",
"Country" : "Canada"
},
{
"Name" : "Magazzini Alimentari Riuniti",
"City" : "Bergamo",
"Country" : "Italy"
},
{
"Name": "North/South",
"City" : "런던",
"Country" : "UK"
},
{
"Name" : "Paris spécialités",
"City" : "Paris",
"국가 " : "France"
},
{
"Name" : "Rattlesnake Canyon Grocery",
"City" : "Albuquerque",
"Country" : "USA"
},
{
"Name" : "Simons bistro",
"City" : "København",
"Country" : "Denmark"
},
{
"Name" : "The Big Cheese",
"City" : "Portland",
"Country" : "USA"
},
{
"Name" : "Vaffeljernet",
"City" : "Århus",
"Country" : "덴마크"
},
{
" 이름" : "월스키 Zajazd",
"City" : "Warszawa",
"Country" : "Poland"
}
]
}
"records":
[
{
"Name" : "Alfreds Futterkiste",
"City" : "Berlin",
"Country" : "Germany"
},
{
"Name" : "Berglunds snabbköp",
"도시" : "Luleå",
"국가" : "스웨덴"
},
{
"이름" : "Centro commercialal Moctezuma",
"City" : "México D.F.",
"Country" : "Mexico"
},
{
"Name" : "Ernst Handel",
"City" : "Graz",
"Country" : "Austria"
},
{
"Name" : "FISSA Fabrica Inter. Salchichas S.A.",
"City" : "마드리드",
"국가" : "스페인"
},
{
"Name" : "Galería del gastrónomo",
"City" : "바르셀로나",
"국가" : "스페인"
},
{
"이름" : "섬 무역",
"City" : "소",
"Country" : "UK"
},
{
"Name" : "Königlich Essen",
"City" : "Brandenburg",
"Country" : "Germany"
},
{
"Name" : "Laughing Bacchus Wine Cellars",
"City" : "Vancouver",
"Country" : "Canada"
},
{
"Name" : "Magazzini Alimentari Riuniti",
"City" : "Bergamo",
"Country" : "Italy"
},
{
"Name": "North/South",
"City" : "런던",
"Country" : "UK"
},
{
"Name" : "Paris spécialités",
"City" : "Paris",
"국가 " : "France"
},
{
"Name" : "Rattlesnake Canyon Grocery",
"City" : "Albuquerque",
"Country" : "USA"
},
{
"Name" : "Simons bistro",
"City" : "København",
"Country" : "Denmark"
},
{
"Name" : "The Big Cheese",
"City" : "Portland",
"Country" : "USA"
},
{
"Name" : "Vaffeljernet",
"City" : "Århus",
"Country" : "덴마크"
},
{
" 이름" : "월스키 Zajazd",
"City" : "Warszawa",
"Country" : "Poland"
}
]
}
AngularJS $http
AngularJS $http는 웹 서버의 데이터를 읽는 서비스입니다.
$http.get(url)은 서버 데이터를 읽는 데 사용되는 함수입니다.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="siteCtrl">
<ul>
<li ng-repeat="x in names">
{{ x.Name + ', ' + x.Country }}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('siteCtrl', function($scope, $http) {
$http.get("http://www.runoob.com/try/angularjs/data/sites.php")
.success(function (response) {$scope.names = response.sites;});
});
</script>
</body>
</html>Run Instance»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
애플리케이션 분석:
참고: 위 코드의 가져오기 요청은 다음의 서버입니다. 이 사이트를 로컬에 직접 복사하여 실행하면 도메인 간 문제가 발생할 수 있습니다. 해결 방법은 Customers_JSON.php의 데이터를 자신의 서버에 복사하는 것입니다. PHP에 가장 적합한 솔루션입니다. Ajax 크로스 도메인 문제.
AngularJS 애플리케이션은 ng-app을 통해 정의됩니다. 애플리케이션은 <div> 내에서 실행됩니다.
ng-controller 지시어 세트 controller 개체 이름.
함수 customersController는 표준 JavaScript 객체 생성자입니다.
컨트롤러 개체에는 $scope.names 속성이 있습니다.
$http.get() 웹 서버에서 정적 JSON 데이터를 읽습니다.
서버 데이터 파일은 http://www.php.cn/try/angularjs/data/Customers_JSON.php입니다.
서버에서 JSON 데이터를 로드할 때 $scope.names는 배열이 됩니다.
 | 위 코드는 데이터베이스 데이터를 읽는 데에도 사용할 수 있습니다. |
|---|
