25. Préparation à la communication backend : Module HttpClient

Presque toute application Angular moderne doit communiquer avec une API backend (généralement REST ou GraphQL) pour récupérer, créer, mettre à jour ou supprimer des données. Angular fournit le service HttpClient à cet effet.

1. Importer HttpClientModule

Le service HttpClient est fourni par le HttpClientModule. Nous devons importer ce module dans notre module racine (AppModule) pour rendre le service disponible pour l'injection.

typescript // app.module.ts import { HttpClientModule } from '@angular/common/http';

@NgModule({ declarations: [AppComponent, ...], imports: [ BrowserModule, HttpClientModule, // <-- Ajoutez cette ligne // ... ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

2. Créer un service de données

Nous encapsulons généralement toute la communication API dans des services dédiés pour garder les composants propres.

typescript // api.service.ts import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http';

@Injectable({ providedIn: 'root' }) export class ApiService { private baseUrl = 'https://jsonplaceholder.typicode.com';

// Injection de HttpClient dans le constructeur constructor(private http: HttpClient) { }

// Méthodes pour les verbes HTTP getUsers() { // Implémentation à venir }

createPost(data: any) { // Implémentation à venir } }

Concept clé : Les Observables

Les méthodes de HttpClient (.get(), .post(), etc.) ne renvoient pas directement les données. À la place, elles renvoient un Observable. C'est le mécanisme préféré d'Angular pour gérer les opérations asynchrones. Nous explorerons les Observables et RxJS en profondeur bientôt, mais pour le HTTP, retenez ceci :

• Un Observable représente un flux de données potentielles.
• La requête ne s'exécute pas tant que personne ne s' abonne (subscribe) à l'Observable.