En aquest tema, aprendrem sobre el client HTTP d'Angular, una eina poderosa per fer sol·licituds HTTP a servidors remots. Aquest mòdul és essencial per a qualsevol aplicació Angular que necessiti comunicar-se amb una API backend per obtenir dades, enviar informació o interactuar amb serveis externs.

• Comprendre què és el client HTTP d'Angular.
• Aprendre a configurar el client HTTP en una aplicació Angular.
• Conèixer els conceptes bàsics de les sol·licituds HTTP.

El client HTTP d'Angular és un servei que proporciona mètodes per fer sol·licituds HTTP. Aquest servei es basa en l'API HttpClient i ofereix una interfície senzilla i intuïtiva per treballar amb sol·licituds HTTP.

• Simplificació de sol·licituds HTTP: Proporciona mètodes per a sol·licituds GET, POST, PUT, DELETE, etc.
• Interceptors: Permet la manipulació de sol·licituds i respostes HTTP.
• Tipat fort: Utilitza tipus de dades de TypeScript per millorar la seguretat i la robustesa del codi.
• Observables: Utilitza la llibreria RxJS per gestionar sol·licituds asíncrones.

Per utilitzar el client HTTP en una aplicació Angular, primer hem d'importar el mòdul HttpClientModule en el nostre mòdul principal (normalment AppModule).

Un cop hem importat HttpClientModule, podem injectar HttpClient en qualsevol servei o component per començar a fer sol·licituds HTTP.

• Importació de HttpClient: Importem HttpClient des de @angular/common/http.
• Injectable: Marquem la classe DataService com a injectable perquè Angular pugui gestionar la seva instància.
• Constructor: Injectem HttpClient en el constructor del servei.
• Mètode getData: Definim un mètode getData que fa una sol·licitud GET a l'URL especificada i retorna un observable.

• Component DataDisplayComponent: Creem un component que mostrarà les dades obtingudes del servei.
• Injectar DataService: Injectem DataService en el constructor del component.
• Mètode ngOnInit: Utilitzem el mètode ngOnInit per fer la sol·licitud GET quan el component s'inicialitza.
• Plantilla: Utilitzem una plantilla simple per mostrar les dades en format JSON.

Crear un servei que faci una sol·licitud GET a una API pública i mostrar les dades en un component.

1. Crear un nou servei:

   ng generate service services/public-api
   

2. Implementar el servei:

   // src/app/services/public-api.service.ts
   import { Injectable } from '@angular/core';
   import { HttpClient } from '@angular/common/http';
   import { Observable } from 'rxjs';
   
   @Injectable({
     providedIn: 'root'
   })
   export class PublicApiService {
   
     private apiUrl = 'https://jsonplaceholder.typicode.com/posts';
   
     constructor(private http: HttpClient) { }
   
     getPosts(): Observable<any> {
       return this.http.get<any>(this.apiUrl);
     }
   }
   

3. Crear un nou component:

   ng generate component components/post-list
   

4. Implementar el component:

   // src/app/components/post-list/post-list.component.ts
   import { Component, OnInit } from '@angular/core';
   import { PublicApiService } from '../../services/public-api.service';
   
   @Component({
     selector: 'app-post-list',
     template: `
       <div *ngIf="posts">
         <ul>
           <li *ngFor="let post of posts">
             {{ post.title }}
           </li>
         </ul>
       </div>
     `,
     styles: []
   })
   export class PostListComponent implements OnInit {
   
     posts: any;
   
     constructor(private publicApiService: PublicApiService) { }
   
     ngOnInit(): void {
       this.publicApiService.getPosts().subscribe(
         (response) => this.posts = response,
         (error) => console.error('Error fetching posts', error)
       );
     }
   }
   

5. Afegir el component a l'aplicació:

   <!-- src/app/app.component.html -->
   <app-post-list></app-post-list>
   

Un cop seguiu els passos anteriors, hauríeu de veure una llista de títols de posts obtinguts de l'API pública https://jsonplaceholder.typicode.com/posts.

En aquest tema, hem après què és el client HTTP d'Angular, com configurar-lo i com fer sol·licituds HTTP bàsiques. També hem vist un exemple pràctic de com utilitzar el client HTTP en un servei i un component. En els següents temes, aprofundirem en com gestionar respostes HTTP, errors i utilitzar observables per a sol·licituds asíncrones.