AngularJS Http

AngularJS XMLHttpRequest

$http AngularJS의 핵심 서비스로, 원격 서버의 데이터를 읽는 데 사용됩니다.

사용 방식：

//　간단한 GET 요청을 POST로 변경할 수 있습니다
$http({
　　　　method: 'GET',
　　　　url:/someUrl'
}).then(function successCallback(response) {
　　　　　　　　//　요청 성공 시 실행 코드
　　　　}, function errorCallback(response) {
　　　　　　　　//　요청 실패 시 실행 코드
});

간단한 메서드

POST와 GET 간단한 메서드 형식：

$http.get('/someUrl',　config).then(successCallback,　errorCallback);
$http.post('/someUrl',　data,　config).then(successCallback,　errorCallback);

또한 다음과 같은 간단한 메서드도 있습니다：

• $http.get

• $http.head

• $http.post

• $http.put

• $http.delete

• $http.jsonp

• $http.patch

자세한 내용은 다음을 참조하세요：https://docs.angularjs.org/api/ng/service/$http

JSON 파일 읽기

웹 서버에 저장된 JSON 파일은 다음과 같습니다：

{
　　　　"sites": [
　　　　　　　　{
　　　　　　　　　　　　"Name": "기본 튜토리얼 웹",
　　　　　　　　　　　　"Url": "www."3"Url": "www.w
　　　　　　　　　　　　"Country": "CN"
　　　　　　　　}
　　　　　　　　{
　　　　　　　　　　　　"Name": "Google",
　　　　　　　　　　　　"Url": "www.google.com",
　　　　　　　　　　　　"Country": "USA"
　　　　　　　　}
　　　　　　　　{
　　　　　　　　　　　　"Name": "Facebook",
　　　　　　　　　　　　"Url": "www.facebook.com",
　　　　　　　　　　　　"Country": "USA"
　　　　　　　　}
　　　　　　　　{
　　　　　　　　　　　　"Name": "微博",
　　　　　　　　　　　　"Url": "www.weibo.com",
　　　　　　　　　　　　"Country": "CN"
　　　　　　　　}
　　　　]
}

AngularJS $http

AngularJS $http는 웹 서버에서 데이터를 읽는 서비스입니다。

$http.get(url)는 서버 데이터를 읽는 함수입니다。

폐지 선언 (v1.5)

v1.5 안에$http 의 success 와 error 메서드는 더 이상 사용되지 않습니다. 사용해야 할 메서드: then 메서드 대신 사용.

일반 메서드 예제

AngularJS1.5 위 버전 - 예제

var app = angular.module('myApp', []);
　　　　
app.controller('siteCtrl', function($scope, $http) {
　　　　$http({
　　　　　　　　method: 'GET',
　　　　　　　　url: 'https://ko.oldtoolbag.com/try/angularjs/data/sites.php
　　　　}).then(function successCallback(response) {
　　　　　　　　　　　　$scope.names = response.data.sites;
　　　　　　　　}, function errorCallback(response) {
　　　　　　　　　　　　//　요청 실패 시 실행 코드
　　　　});
　　
});

간단한 메서드 예제

AngularJS1.5 위 버전 - 예제

<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("https:")//ko.oldtoolbag.com/run/angularjs/data/("sites.php")
　　.then(function(response) {$scope.names = response.data.sites;});
});<//script>

AngularJS1.5 다음 버전 - 예제

<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("https:")//ko.oldtoolbag.com/try/angularjs/data/("sites.php")
　　.success(function　(response)　{$scope.names　=　response.sites;});
});
</script>

애플리케이션 분석:

주의: 위 코드의 get 요청은 이 사이트의 서버이며, 직접 로컬에서 실행할 수 없습니다. 크로스 도메인 문제가 발생할 수 있습니다. 해결책은 Customers_JSON.php의 데이터를 자신의 서버에 복사하는 것입니다.

AngularJS 애플리케이션은 다음으로 ng-app 정의. <div>에서 실행.

ng-controller 지시어는 설정하였습니다 controller 객체 이름.

함수 customersController 기본적인 JavaScript 객체 생성자。

컨트롤러 객체는 하나의 속성을 가집니다: $scope.names。

$http.get() 웹 서버에서 정적 　JSON 데이터。

서버 데이터 파일은 다음과 같습니다：　https://ko.oldtoolbag.com/run/angularjs/data/sites.php。

서버에서 JSON 데이터를 로드할 때$scope.names 배열로 변환됩니다.