AngularJS AJAX - $http
$http to usługa AngularJS do odczytywania danych ze zdalnych serwerów.
AngularJS $http
Usługa AngularJS $httpwysyła żądanie do serwera i zwraca odpowiedź.
Przykład
Wyślij proste żądanie do serwera i wyświetl wynik w nagłówku:
<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>
Metody
Powyższy przykład wykorzystuje .getmetodę $http
usługi.
Metoda .get to skrótowa metoda usługi $http. Istnieje kilka metod skrótów:
.delete().get().head().jsonp().patch().post().put()
Powyższe metody to skróty do wywołania usługi $http:
Przykład
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;
});
});
Powyższy przykład wykonuje usługę $http z obiektem jako argumentem. Obiekt określa metodę HTTP, adres URL, co zrobić w przypadku sukcesu i co zrobić w przypadku niepowodzenia.
Nieruchomości
Odpowiedzią z serwera jest obiekt o następujących właściwościach:
.configobiekt użyty do wygenerowania żądania..dataciąg znaków lub obiekt przenoszący odpowiedź z serwera..headersfunkcja używana do uzyskania informacji nagłówka..statusliczba określająca status HTTP..statusTextciąg znaków określający stan HTTP.
Przykład
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;
});
});
Aby obsłużyć błędy, dodaj jeszcze jedną funkcję do .thenmetody:
Przykład
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
Oczekuje się, że dane otrzymane z odpowiedzi będą w formacie JSON.
JSON to świetny sposób na transport danych i jest łatwy w użyciu w AngularJS lub dowolnym innym JavaScript.
Przykład: Na serwerze mamy plik, który zwraca obiekt JSON zawierający 15 klientów, wszystko opakowane w tablicę o nazwie records.
Kliknij tutaj, aby przyjrzeć się obiektowi JSON.
Przykład
Dyrektywa ng-repeatjest idealna do przechodzenia przez tablicę:
<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>
Wyjaśnienie aplikacji:
Aplikacja definiuje customersCtrlkontroler za pomocą
obiektu $scopei
$http.
$httpjest obiektem XMLHttpRequest do żądania danych zewnętrznych.
$http.get()odczytuje dane JSON z
https://www.w3schools.com/angular/customers.php .
Po pomyślnym zakończeniu kontroler tworzy właściwość , myDataw zakresie, z danymi JSON z serwera.