¡Hola de nuevo! Tras un largo periodo en que mi vida personal y laboral ha dado un giro de 180º, es momento de desempolvar el blog y continuar escribiendo algo.

En el último artículo de AngularJS vimos una pequeña introducción a la Inyección de Dependencias. Esta vez, siguiendo el “hilo argumental”,  y antes de volver a la serie de Ionic Framework, vamos a ver cómo podemos realizar peticiones por AJAX desde un controlador de AngularJS.

Objetivo del ejemplo

En este sencillo ejemplo vamos a ver cómo realizar peticiones asíncronas por medio del servicio $http. Al hacer click sobre un botón, se lanzará una petición contra el servicio localizado en http://www.programandoconrupert.com/ws/servicio-gatos.php. Dicho servicio contiene el siguiente código:

Por lo tanto, recuperaremos un array en formato JSON, que nosostros mostraremos en nuestro HTML.

Preparación del ejemplo

Para comenzar con este ejemplo vamos a tener un módulo llamado AppGatos y un controlador llamado ControladorGatos. En el $scope de ese controlador tendremos una colección que llamaremos gatos, además de una función llamada obtenerGatos, que llamaremos desde un botón en el HTML.

Y este sería el HTML que utilizaremos para llamar a la función obtenerGatos y mostrar el modelo gatos:

Servicio $http

Para realizar la llamada por AJAX al servicio que devolverá el JSON con el array, utilizaremos el servicio de AngularJS $http. Se trata de una API que permite realizar peticiones asíncronas al servidor por medio de XMLHttpRequest o por medio de JSONP.

Para utilizarlo necesitamos inyectarlo al controlador:

Llamada explícita

Como en la mayoría de frameworks Javascript con soporte AJAX, disponemos de una función general donde se pueden específicar todas las peculiaridades de la petición, y por otro lado disponemos de métodos de abreviatura que nos permiten realizar llamadas más genéricas pero de una manera más rápida.

Para utilizar la función general, se le pasa un objeto de configuración con ciertas propiedades, entre las que pueden estar:

  • method – Método HTTP con el que se realiza la petición
  • url – URL a la que realizamos la petición
  • params – Listado de parámetros GET
  • data – Listado de parámetros que se envían en la petición
  • headers – Cabeceras de la petición
  • withCredentials – Indica si la petición requiere credenciales
  • responseType – Tipo de datos que se esperan en la respuesta

Mediante el método .then() especificamos los callbacks que recibirán la respuesta, bien de success o bien de error. El objeto que recibimos tiene estas propiedades:

  • data – Contenido de la respuesta
  • status – Código de estado HTTP
  • headers – Getter del Header
  • config – Objecto de configuración que se utilizó para crear la petición
  • statusText – Texto de estado

De esta manera, en nuestro ejemplo, la llamada para recibir el listado de gatos sería así:

Métodos abreviados

Por el lado contrario tenemos los métodos abreviados para realizar peticiones. Estos métodos ahorran bastante tiempo de desarrollo, permitiendo además añadir el objeto de configuración para especificaciones adicionales. Estos métodos son:

  • $http.get
  • $http.post
  • $http.put
  • $http.delete
  • $http.head
  • $http.jsonp

Con esto hemos visto lo básico para poder comunicarnos con el servidor desde nuestra aplicación Ionic mediante AngularJS.

¡Hasta la próxima!

Rupert.