AngularJS AJAX - $http
$http adalah layanan AngularJS untuk membaca data dari server jarak jauh.
AngularJS $http
Layanan AngularJS $httpmembuat permintaan ke server, dan mengembalikan respons.
Contoh
Buat permintaan sederhana ke server, dan tampilkan 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>
Metode
Contoh di atas menggunakan .getmetode $http
layanan.
Metode .get adalah metode pintasan dari layanan $http. Ada beberapa cara pintas:
.delete().get().head().jsonp().patch().post().put()
Metode di atas adalah semua pintasan untuk memanggil layanan $http:
Contoh
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $http) {
$http({
method : "GET",
url : "welcome.htm"
}).then(function mySuccess(response) {
$scope.myWelcome = response.data;
}, function myError(response)
{
$scope.myWelcome =
response.statusText;
});
});
Contoh di atas mengeksekusi layanan $http dengan objek sebagai argumen. Objek menentukan metode HTTP, url, apa yang harus dilakukan jika berhasil, dan apa yang harus dilakukan jika gagal.
Properti
Respons dari server adalah objek dengan properti ini:
.configobjek yang digunakan untuk menghasilkan permintaan..datastring, atau objek, yang membawa respons dari server..headersfungsi yang digunakan untuk mendapatkan informasi header..statusnomor yang menentukan status HTTP..statusTextstring yang 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;
});
});
Untuk menangani kesalahan, tambahkan satu fungsi lagi ke .thenmetode:
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";
});
});
JSON
Data yang Anda dapatkan dari respons diharapkan dalam format JSON.
JSON adalah cara yang bagus untuk mengangkut data, dan mudah digunakan dalam AngularJS, atau JavaScript lainnya.
Contoh: Di server kami memiliki file yang mengembalikan objek JSON yang berisi 15 pelanggan, semuanya dibungkus dalam array yang disebut records.
Klik di sini untuk melihat objek JSON.
Contoh
Arahan ng-repeatini sempurna untuk mengulang 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>
Aplikasi menjelaskan:
Aplikasi mendefinisikan customersCtrlcontroller, dengan a
$scopedan
$httpobjek.
$httpadalah objek XMLHttpRequest untuk meminta data eksternal.
$http.get()membaca data JSON dari
https://www.w3schools.com/angular/customers.php .
Jika berhasil, pengontrol membuat properti, myData, dalam cakupan, dengan data JSON dari server.