최신 웹 개발 튜토리얼
 

AngularJS AJAX - $ HTTP

❮ 이전 다음 장 ❯

$ HTTP는 원격 서버로부터 데이터를 판독하는 AngularJS와 서비스이다.

AngularJS와 $ HTTP

AngularJS와 $http 서비스 서버에 요청을하고 응답을 리턴한다.

예

서버에 대한 간단한 요청을 확인하고 헤더에 결과를 표시합니다

<div ng-app="myApp" ng-controller="myCtrl">

<p>Today's welcome message is:</p>
<h1>{{myWelcome}}</h1>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http.get("welcome.htm")
    .then(function(response) {
        $scope.myWelcome = response.data;
    });
});
</script>
»그것을 자신을 시도

행동 양식

이 예는 위의 사용 .get 의 방법 $http 서비스를.

갔지 방법은 $의 HTTP 서비스의 바로 가기 방법이다. 몇 가지 바로 가기 방법이 있습니다 :

  • .delete()
  • .get()
  • .head()
  • .jsonp()
  • .patch()
  • .post()
  • .put()

방법은 위의 $의 HTTP 서비스를 호출하는 모든 바로 가기입니다 :

예

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http({
        method : "GET",
        url : "welcome.htm"
    }).then(function mySucces(response) {
        $scope.myWelcome = response.data;
    }, function myError(response) {
        $scope.myWelcome = response.statusText;
    });
});
»그것을 자신을 시도

위의 예는 인수로 객체는 $ HTTP 서비스를 실행합니다. 개체가 성공하려면 실패에서 무엇을 어떤 HTTP 메소드, URL을, 지정된다.

속성

서버에서 응답은 이러한 속성을 가진 객체입니다

  • .config 요청을 생성하는 데 사용되는 개체.
  • .data 문자열, 또는 서버의 응답을 들고 객체.
  • .headers 헤더 정보를 얻기 위해 사용하는 기능입니다.
  • .status HTTP 상태를 정의 할 수있다.
  • .statusText HTTP 상태를 정의하는 문자열입니다.

예

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http.get("welcome.htm")
    .then(function(response) {
        $scope.content = response.data;
        $scope.statuscode = response.status;
        $scope.statustext = response.statustext;
    });
});
»그것을 자신을 시도

받는 또 하나의 기능을 추가, 오류를 처리하려면 .then 방법 :

예

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http.get("wrongfilename.htm")
    .then(function(response) {
        //First function handles success
        $scope.content = response.data;
    }, function(response) {
        //Second function handles error
        $scope.content = "Something went wrong";
    });
});
»그것을 자신을 시도

JSON

만약 응답하여 얻은 데이터는 JSON 형식으로 될 것으로 예상된다.

JSON은 데이터를 전송하는 가장 좋은 방법이며, AngularJS와 내에 사용하기 쉬운, 또는 임의의 다른 자바 스크립트이다.

예 : 서버에서 우리는 (15) 고객을 포함하는 JSON 개체, 모든 배열이라고에 싸여 반환하는 파일이 records .

JSON 객체를 살펴 보자.

×

customers.php 

 {{데이터 | JSON}}

예

ng-repeat 지시자는 배열을 통해 반복에 적합합니다 :

<div ng-app="myApp" ng-controller="customersCtrl">

<ul>
  <li ng-repeat="x in myData">
    {{ x.Name + ', ' + x.Country }}
  </li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $http.get("customers.php").then(function(response) {
        $scope.myData = response.data.records;
    });
});
</script>
»그것을 자신을 시도

응용 프로그램 설명 :

응용 프로그램은 정의 customersCtrl 로모그래퍼, 컨트롤러를 $scope 및 $http 객체입니다.

$http 외부 데이터를 요청하는 XMLHttpRequest 객체입니다.

$http.get() 에서 JSON 데이터를 판독 http://www.w3ii.com/angular/customers.php .

성공시, 상기 제어기는 특성 생성 myData 서버로부터 JSON 데이터로 범위를.


❮ 이전 다음 장 ❯