tutorial pengembangan web terbaru
 

AngularJS AJAX - $ http

❮ Sebelumnya Berikutnya Bab ❯

$ http adalah layanan AngularJS untuk membaca data dari remote server.

AngularJS $ http

The AngularJS $http layanan membuat permintaan ke server, dan mengembalikan respon.

Contoh

Membuat permintaan sederhana untuk server, dan menampilkan hasilnya di header:

<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>
Cobalah sendiri "

metode

Contoh di atas menggunakan .get metode yang $http layanan.

Metode .get adalah metode pintas dari layanan $ http. Ada beberapa metode shortcut:

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

Metode di atas semua cara pintas memanggil layanan $ http:

Contoh

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;
    });
});
Cobalah sendiri "

Contoh di atas mengeksekusi layanan http $ dengan objek sebagai argumen. Tujuannya adalah menentukan metode HTTP, url, apa yang harus dilakukan pada keberhasilan, dan apa yang harus dilakukan pada kegagalan.

properti

Respon dari server adalah obyek dengan sifat ini:

  • .config objek yang digunakan untuk menghasilkan permintaan.
  • .data string, atau benda, yang membawa respon dari server.
  • .headers fungsi untuk menggunakan untuk mendapatkan informasi header.
  • .status sejumlah mendefinisikan status HTTP.
  • .statusText string mendefinisikan status HTTP.

Contoh

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;
    });
});
Cobalah sendiri "

Untuk menangani kesalahan, menambahkan satu fungsi lagi untuk .then metode:

Contoh

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";
    });
});
Cobalah sendiri "

JSON

Data yang Anda dapatkan dari respon diharapkan dalam format JSON.

JSON adalah cara yang bagus untuk mengangkut data, dan mudah untuk digunakan dalam AngularJS, atau lainnya JavaScript.

Contoh: Pada server kami memiliki file yang mengembalikan objek JSON yang mengandung 15 pelanggan, semua dibungkus dalam array disebut records .

Lihatlah objek JSON.

×

customers.php 

 {{Data | json}}

Contoh

The ng-repeat direktif sempurna untuk perulangan melalui array:

<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>
Cobalah sendiri "

Aplikasi menjelaskan:

Aplikasi ini mendefinisikan customersCtrl controller, dengan $scope dan $http objek.

$http adalah obyek XMLHttpRequest untuk meminta data eksternal.

$http.get() membaca data JSON dari http://www.w3ii.com/angular/customers.php .

Pada keberhasilan, controller menciptakan properti, myData , di ruang lingkup, dengan data JSON dari server.


❮ Sebelumnya Berikutnya Bab ❯