menú
buscar
¡Esta es una revisión vieja del documento!
−Tabla de Contenidos
3.2 $http
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 unos datos iniciales del seguro desde el servidor para mostrarlos en el formulario. Los datos se obtiene en formato JSON desde la url datos.json. Este fichero contendrá simplemente texto 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.
La instancia
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.
1 2 3 4 5 6 | 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
- Línea 3: Vemos como ahora se inyecta el nuevo servicio ,
$http. Fíjate como hemos puesto el nombre del servicio como parámetro de la función y como tercer parámetro del array.
config
$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:
- method: El método HTTP para hacer la petición. Sus posibles valores son:
GET,POST,PUT,DELETE, etc. - url: La URL de donde queremos obtener los datos.
- data: Si usamos el método
POSToPUTaquí pondremos los datos a mandar en el body de la petición HTTP - params: Un objeto que se pondrá como parámetros de la URL.
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.
1 2 3 4 5 6 7 8 9 | 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
- Línea 4: Creamos el objeto JavsScript llamado
config. - Línea 5: Añadimos la propiedad
methodpara indicar que el método HTTP esGET. - Línea 6: Indicamos la url al fichero
datos.json
respuesta
Teniendo el objeto config ya podemos llamar al servicio $http. La llamada nos retornará un objeto response.
1 2 3 4 5 6 7 8 9 10 11 | 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); }]); |
- Línea 9: Se llama al servicio
$httpal que se le pasa toda la configuración y nos responde con un objetoresponse.
response sino con un objeto promise pero ya veremos más adelante en el curso los objetos promise.
Los datos
Si todo ha funcionado correctamente podremos obtener el objeto JavaScript correspondiente al String JSON que nos han pasado, para ello llamaremos a la función success(fn) que acepta como único parámetro una función nuestra que será llamada cuando se obtengan los datos.
La función que le pasaremos tendrá 4 argumentos que son los siguientes:
- data: Un objeto JavaScript correspondiente al los datos JSON que ha recibido
- status: Es el estado HTTP que ha retornado. Su valor siempre será entre 200 y 299 ya que si se llama a esta función significa que la petición ha tenido éxito.
- headers:Es una función que acepta como único parámetro el nombre de una cabecera HTTP y nos responde su valor.
- config: El mismo objeto
configque usamos para configurar la petición.
headers no es un objeto con la cabeceras sino una función que permite obtener el valor de una cabecera.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | 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); response.success(function(data, status, headers, config) { $scope.seguro=data; }) }]); |
- Línea 11: Llamamos a la función
successpasandole como parámetro nuestro propia función. - Línea 12: Asignamos los datos del servidor a nuestro objeto
$scope.seguropara que se muestren en el servidor.
data contiene el objeto con los datos del servidor, al asignárselo a la propiedad $scope.seguro modificamos nuestro modelo de datos por lo que automáticamente se modificarán los tag <input> de la página HTML ya que el formato del objeto es exactamente el mismo que el que tenemos en $scope.seguro.
El que se actualice automáticamente el modelo es lo que hace que tengamos que usar $http. Si hubiéramos usado directamente el objeto XMLHttpRequest o el método ajax() de JQuery , AngularJS no se habría enterado de los cambios y no se habría actualizado la página HTML.
