$ http es un servicio AngularJS para leer datos desde servidores remotos.
AngularJS $ http
El AngularJS $http servicio realiza una solicitud al servidor, y devuelve una respuesta.
Ejemplo
Hacer una simple solicitud al servidor, y mostrar 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>
Inténtalo tú mismo " métodos
El ejemplo anterior utiliza el .get método de la $http servicio.
El método .get es un método de acceso directo del servicio $ http. Hay varios métodos de acceso directo:
-
.delete() -
.get() -
.head() -
.jsonp() -
.patch() -
.post() -
.put()
Los métodos anteriores son todos los accesos directos de llamar al servicio de $ http:
Ejemplo
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;
});
}); Inténtalo tú mismo " El ejemplo anterior se ejecuta el servicio http $ con un objeto como un argumento. El objeto se especifica el método HTTP, la url, qué hacer en caso de éxito, y qué hacer en caso de fallo.
propiedades
La respuesta del servidor es un objeto con estas propiedades:
-
.configel objeto que se utiliza para generar la solicitud. -
.datauna cadena, o un objeto, que lleva la respuesta del servidor. -
.headersuna función a utilizar para obtener información de la cabecera. -
.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;
});
}); Inténtalo tú mismo " Para controlar los errores, agregar uno más funciones a la .then mé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";
});
}); Inténtalo tú mismo " JSON
Los datos que se obtiene de la respuesta se espera que sea en formato JSON.
JSON es una gran 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, todo ello envuelto en la matriz denominada records .
Echar un vistazo a el objeto JSON.
Ejemplo
El ng-repeat directiva es perfecta para recorrer a través de 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>
Inténtalo tú mismo " Aplicación explicó:
La aplicación define el customersCtrl controlador, con un $scope y $http objeto.
$http es un objeto XMLHttpRequest para solicitar datos externos.
$http.get() lee los datos JSON de http://www.w3ii.com/angular/customers.php .
En caso de éxito, el controlador crea una propiedad, myData , en el ámbito de aplicación, con datos JSON desde el servidor.