Scroll Infinito con Angular 6 y Firestore
Scroll Infinito con Angular 6 y Firestore


Las peticiones HTTP en Angular nos permiten enviar peticiones normalmente desde nuestro cliente a un servidor.

En versiones anteriores de Angular teníamos disponible la clase Http (import {Http} from ‘@angular/http’), la cual ya ha deprecado y no debe utilizarse, en su lugar, en Angular 5 ha aparecido HttpClient (import {HttpClient} from ‘@angular/common/http’), que presenta varias mejoras que paso a detallar.

  • Los interceptores permiten que la lógica del middleware se inserte en la tubería.
  • Objetos de solicitud / respuesta inmutables.
  • Eventos de progreso para carga de solicitud y descarga de respuesta.

La clase HttpClient en Angular 5 está representada de la siguiente forma.

Cómo puedes ver, todos los métodos devuelven un Observable y podemos realizar cualquier petición HTTP, además, gracias al método request podemos realizar cualquier petición ya que el primer parámetro es el método (GET, POST, PUT, DELETE).

Crud con Angular 5 y HttpClient

Nuestro ejemplo va a ser completo, haremos las peticiones HTTP más tipicas para poder leer, editar, actualizar y eliminar, es decir, un CRUD.

Para poder utilizar HttpClient en Angular 5 primero debemos añadir el módulo HttpClientModule a la sección imports de nuestro módulo de la siguiente forma.

Desarrollar un servicio con HttpClient

Ahora vamos a crear un servicio para poder consumir una API de forma completa, yo estaré trabajando con Angular CLI así que ejecutando el siguiente comando tengo suficiente.

Una vez hemos creado nuestro servicio, recuerda añadirlo a la clave providers de tu módulo o no funcionará.

Una API normalmente tiene una ruta que ofrece acceso a todos los datos, es lo que siempre se espera, para nuestro caso será algo parecido a lo siguiente.

  • Obtener todos los clusters: [GET] http://localhost:8000/clusters
  • Obtener un cluster: [GET] http://localhost:8000/clusters/{id}
  • Añadir un cluster: [POST] http://localhost:8000/clusters
  • Actualizar un cluster: [PUT] http://localhost:8000/clusters/{id}
  • Eliminar un cluster: [DELETE] http://localhost:8000/clusters/{id}

Cómo puedes ver, he añadido el verbo HTTP que utilizaremos delante de cada url, esta url será con la que yo estaré trabajando, simplemente deberás modificarla por la de tu servidor.

Ahora sí, vamos al lío, abre tu archivo clusters.service.ts y añade el siguiente código que paso a comentar detalladamente.

  1. Importamos las dependencias que vamos a necesitar.
  2. Con la clase HttpClient realizaremos todas las peticiones HTTP.
  3. Con la clase HttpHeaders podremos definir los encabezados de nuestras peticiones.
  4. Importamos Observable y los operadores que vamos a necesitar para procesar las peticiones.
  5. Definimos una interfaz para poder dar tipado a nuestros datos.
  6. El decorador @Injectable() ayudará a que Angular sepa resolver las dependencias de nuestra clase, en este caso resolverá la clase HttpClient.
  7. Inyectamos HttpClient con ámbito privado para que pueda ser usado en toda la clase.

Hasta ahí creo que queda claro todo lo que estamos haciendo para iniciar nuestro servicio, ahora voy a explicar qué hace cada método de nuestra clase.

  • getClusters: Obtiene todos los clusters y retorna un Observable
  • getClusterNo404: Obtiene un cluster, si no lo encuentra retorna undefined, con el operador map retornamos el primer elemento [0] para que esté disponible en el siguiente método.
  • addCluster: Añade un cluster haciendo una petición POST.
  • deleteCluster: Elimina un cluster haciendo una petición DELETE.
  • updateCluster: Actualiza un cluster con una petición PUT.

Consumir un servicio HttpClient en Angular 5

Ahora vamos a abrir un componente y vamos a consumir todos los métodos de nuestro servicio para acceder a toda la información y poder manipularla.

Para ejecutar cualquier método de nuestro servicio debemos utilizar el método subscribe, éste retornará la respuesta que hemos definido en cada método, de esta forma tan sencilla podemos ejecutar nuestro CRUD.

Finalmente, vamos a abrir el archivo .html de nuestro componente y vamos a añadir el siguiente código, el cual accede a todos los clusters para imprimirlos en pantalla, pero además, ejecuta todas las operaciones de nuestro componente.

Cursos de Angular

Si estás interesado en Angular, visita Cursosdesarrolloweb, tenemos varios cursos sobre Angular que seguro te interesan.

Todos los cursos tienen acceso de forma indefinida 24/7, así que puedes seguirlos adecuando el horario a tus necesidades.