Servicios en Angular con HttpClient

Vamos a ver cómo implementar sercicios en Angular usando HttpClient

Vamos a conectar dos aplicaciones, una en Angular y otra en Spring Boot, para que el servidor pase datos a nuestro cliente mediante una API.

Primero nos vamos a app.module.ts y agregamosel módulo HttpClient que nos permite en nuestra clase Service poder conectarnos con el servidor. En imports añadimos HttpClientModule.

Ya lo podemos utilizar en la clase Service. Ahora, nos vamos a cliente.service.ts. Tenemos que modificar esta clase para que retorne ‘Clientes’ (los Clientes son nuestros Objetos en este caso) de forma remota. Primero importamos HttpClient.

import { HttpClient } from '@angular/common/http';

Veamos cómo esta cliente.service.ts antes de ser modificado.

Veamos como queda cliente.service.ts después de inyectar el objeto http.

El servicio también puede realizarse mediante map. Primero realizamos la importación.

import { map } from 'rxjs/operators';

El método getClientes quedaría así:

  getClientes(): Observable<Cliente[]> {
    // return of(CLIENTES);
    // return this.http.get<Cliente[]>(this.urlEndPoint);
    return this.http.get(this.urlEndPoint).pipe(
      map((response) => response as Cliente[])
      // function(response) {return response as Cliente[]} Otra forma de escribirlo antes de ECMAScript 6
    );

  }

Ahora ya sólo nos queda arrancar primero nuestro backend de Spring Boot primero y nuestro frontend con Atom segundo.