Imaginez un grand restaurant. Si chaque client devait aller en cuisine pour préparer son repas, ce serait le chaos total. Les Services, ce sont les serveurs : ils font les allers-retours avec la base de données (l'API HTTP) et distribuent les données à vos différents composants.
Un composant est très isolé. Si deux pages différentes ont besoin de la même liste d'utilisateurs, c'est le Service qui va stocker cette liste et la partager partout pour éviter la redondance.
Règle d'or en Angular : on ne fait jamais de requêtes vers le serveur directement dans un composant (bouton, formulaire). C'est le rôle exclusif du Service.
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
// Le décorateur @Injectable permet à ce service d'être distribué ('root') dans toute l'application
@Injectable({
providedIn: 'root'
})
export class ProductService {
private apiUrl = 'https://fakestoreapi.com/products';
// Le service s'équipe de l'outil HttpClient pour parler au web
constructor(private http: HttpClient) {}
// Méthode pour récupérer tous les produits
getProducts(): Observable<any[]> {
return this.http.get<any[]>(this.apiUrl);
}
// Méthode pour récupérer un produit spécifique
getProductById(id: number): Observable<any> {
return this.http.get<any>(`${this.apiUrl}/${id}`);
}
}