AngularJS AJAX - $http
$http is een AngularJS-service voor het lezen van gegevens van externe servers.
AngularJS $http
De AngularJS $http-service doet een verzoek aan de server en retourneert een antwoord.
Voorbeeld
Doe een eenvoudig verzoek aan de server en toon het resultaat in een 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>
Methoden:
In het bovenstaande voorbeeld wordt de .getmethode van de $http
service gebruikt.
De .get-methode is een snelkoppelingsmethode van de $http-service. Er zijn verschillende sneltoetsen:
.delete().get().head().jsonp().patch().post().put()
De bovenstaande methoden zijn allemaal snelkoppelingen voor het aanroepen van de $ http-service:
Voorbeeld
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;
});
});
In het bovenstaande voorbeeld wordt de $http-service uitgevoerd met een object als argument. Het object specificeert de HTTP-methode, de url, wat te doen bij succes en wat te doen bij mislukking.
Eigenschappen
Het antwoord van de server is een object met deze eigenschappen:
.confighet object dat is gebruikt om het verzoek te genereren..dataeen string, of een object, dat het antwoord van de server draagt..headerseen functie om te gebruiken om koptekstinformatie op te halen..statuseen nummer dat de HTTP-status definieert..statusTexteen tekenreeks die de HTTP-status definieert.
Voorbeeld
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;
});
});
Om fouten af te handelen, voegt u nog een functie toe aan de .thenmethode:
Voorbeeld
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
De gegevens die u uit het antwoord krijgt, zijn naar verwachting in JSON-indeling.
JSON is een geweldige manier om gegevens te transporteren en is gemakkelijk te gebruiken binnen AngularJS of een ander JavaScript.
Voorbeeld: op de server hebben we een bestand dat een JSON-object retourneert met 15 klanten, allemaal verpakt in een array met de naam records.
Klik hier om het JSON-object te bekijken.
Voorbeeld
De ng-repeatrichtlijn is perfect voor het doorlopen van een 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>
Toepassing uitgelegd:
De applicatie definieert de customersCtrlcontroller, met een
$scopeen
$httpobject.
$httpis een XMLHttpRequest-object voor het opvragen van externe gegevens.
$http.get()leest JSON-gegevens van
https://www.w3schools.com/angular/customers.php .
Bij succes maakt de controller een eigenschap, myData, in het bereik, met JSON-gegevens van de server.