¡Esta es una revisión vieja del documento!
El servicio $http permite hacer peticiones AJAX al servidor. Es realmente como el objeto XMLHttpRequest o el método ajax() de JQuery. La diferencia con éstos dos últimos es que está integrado con Angular como un servicio (con todas las ventajas de ellos conlleva) pero principalmente porque notifica a AngularJS que ha habido un cambio en el modelo de JavaScript y actualiza la vista y el resto de dependencias adecuadamente.
$http
para que AngularJS sepa que se han modificado los datos.
Para explicar el servicio de $http
vamos a seguir con nuestro ejemplo del seguro médico en el que vamos a obtener un String JSON del servidor , desde la url datos.json
. Este fichero contendrá simplemente un String en formato JSON para que podamos obtener la información del servidor.Mas adelante en el curso , obtendremos los datos mediante REST desde la base de datos , pero por ahora y para aprender a usar $http
será simplemente un fichero estático.
Lo primero que tenemos que hacer es obtener una referencia al servicio $http
. Como ya hemos explicado en el tema anterior, tenemos que incluirlo como parámetro de nuestro controlador para que nos lo inyecte al crearlo.
var app=angular.module("app",[]); app.controller("SeguroController",['$scope','$log','$http',function($scope,$log,$http) { }]);
No hemos mostrado el resto de líneas del controlador para mejorar la legibilidad
$http
. Fíjate como hemos puesto el nombre del servicio como parámetro de la función y como tercer parámetro del array.
$http acepta como parámetro un único objeto llamado config
con todas las propiedades que necesita para la petición.
Veamos ahora alguna de las propiedades:
GET
, POST
, PUT
, DELETE
, etc.POST
o PUT
aquí pondremos los datos a mandar en el body de la petición HTTP
config
contiene mas propiedades pero no vamos a explicarlas en este curso. Puedes ver la lista completa en $http Usage
Ahora vamos a hacer una llamada mediante GET
a la URL datos.json
y sin parámetros.
var app=angular.module("app",[]); app.controller("SeguroController",['$scope','$log','$http',function($scope,$log,$http) { var config={ method:"GET", url:"datos.json" } }]);
No hemos mostrado el resto de líneas del controlador para mejorar la legibilidad
config
.method
para indicar que el método HTTP es GET
.datos.json
Teniendo el objeto config
ya podemos llamar al servicio $http
. La llamada nos retornará un objeto response
.
var app=angular.module("app",[]); app.controller("SeguroController",['$scope','$log','$http',function($scope,$log,$http) { var config={ method:"GET", url:"datos.json" } var response=$http(config); }]);No hemos mostrado el resto de líneas del controlador para mejorar la legibilidad
$http
al que se le pasa toda la configuración y nos responde con un objeto response
.
response
sino con un objeto promise pero ya veremos más adelante en el curso los objetos promise
.