AngularJS AJAX - $http
$http es un servicio de AngularJS para leer datos de servidores remotos.
AngularJS $http
El servicio AngularJS $httprealiza una solicitud al servidor y devuelve una respuesta.
Ejemplo
Realice una solicitud simple al servidor y muestre el resultado en un encabezado:
<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>
Métodos
El ejemplo anterior utiliza el .getmétodo del $http
servicio.
El método .get es un método abreviado del servicio $http. Hay varios métodos abreviados:
.delete().get().head().jsonp().patch().post().put()
Los métodos anteriores son todos atajos para llamar al servicio $http:
Ejemplo
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;
});
});
El ejemplo anterior ejecuta el servicio $http con un objeto como argumento. El objeto especifica el método HTTP, la URL, qué hacer en caso de éxito y qué hacer en caso de falla.
Propiedades
La respuesta del servidor es un objeto con estas propiedades:
.configel objeto utilizado para generar la solicitud..datauna cadena, o un objeto, que lleva la respuesta del servidor..headersuna función para usar para obtener información de encabezado..statusun número que define el estado HTTP..statusTextuna cadena que define el estado HTTP.
Ejemplo
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;
});
});
Para manejar errores, agregue una función más al .thenmétodo:
Ejemplo
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
Se espera que los datos que obtenga de la respuesta estén en formato JSON.
JSON es una excelente manera de transportar datos y es fácil de usar dentro de AngularJS o cualquier otro JavaScript.
Ejemplo: en el servidor tenemos un archivo que devuelve un objeto JSON que contiene 15 clientes, todos envueltos en una matriz llamada records.
Haga clic aquí para echar un vistazo al objeto JSON.
Ejemplo
La ng-repeatdirectiva es perfecta para recorrer una matriz:
<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>
Aplicación explicada:
La aplicación define el customersCtrlcontrolador, con un
objeto $scopey
$http.
$httpes un objeto XMLHttpRequest para solicitar datos externos.
$http.get()lee datos JSON de
https://www.w3schools.com/angular/customers.php .
En caso de éxito, el controlador crea una propiedad, myDataen el ámbito, con datos JSON del servidor.