CHAPITRE 10 : LES SERVICES ET L'INJECTION DE DÉPENDANCES

Un composant doit s'occuper de l'affichage. Dès qu'il s'agit de récupérer ou de partager des données, cela relève d'un service.

1. Pourquoi un service ?

Imaginez trois composants qui ont besoin de la liste des étudiants. Sans service, vous dupliquez le code trois fois. Avec un service, la logique est écrite une fois et partagée.

• Éviter la duplication
• Partager des données entre composants
• Isoler les appels au serveur
• Rendre le code testable

2. Créer un service

ng generate service services/etudiant

# forme abregee
ng g s services/etudiant

import { Injectable } from '@angular/core';

export interface Etudiant {
  id: number;
  nom: string;
  moyenne: number;
}

@Injectable({
  providedIn: 'root'
})
export class EtudiantService {
  private etudiants: Etudiant[] = [
    { id: 1, nom: 'Awa',     moyenne: 15.5 },
    { id: 2, nom: 'Brice',   moyenne: 9.0  },
    { id: 3, nom: 'Chantal', moyenne: 17.2 }
  ];

  obtenirTous(): Etudiant[] {
    return this.etudiants;
  }

  obtenirAdmis(): Etudiant[] {
    return this.etudiants.filter(e => e.moyenne >= 10);
  }

  ajouter(etudiant: Etudiant): void {
    this.etudiants.push(etudiant);
  }
}

providedIn: 'root' signifie : une seule instance pour toute l'application. Tous les composants partagent donc les mêmes données.

3. L'injection de dépendances

Le composant ne crée pas le service : il le demande, et Angular le lui fournit.

import { Component, OnInit } from '@angular/core';
import { EtudiantService, Etudiant } from '../services/etudiant.service';

@Component({
  selector: 'app-liste-etudiants',
  templateUrl: './liste-etudiants.component.html'
})
export class ListeEtudiantsComponent implements OnInit {
  etudiants: Etudiant[] = [];

  constructor(private etudiantService: EtudiantService) { }

  ngOnInit(): void {
    this.etudiants = this.etudiantService.obtenirTous();
  }
}

Deux points à relever :

• Le private dans le constructeur crée la propriété automatiquement : inutile de la déclarer en plus.
• On charge les données dans ngOnInit(), pas dans le constructeur. Le constructeur sert à recevoir les dépendances ; ngOnInit à initialiser.

4. Le cycle de vie

5. Appeler un serveur : HttpClient

Importez d'abord HttpClientModule dans app.module.ts :

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

@NgModule({
  imports: [BrowserModule, HttpClientModule],
  ...
})

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

@Injectable({ providedIn: 'root' })
export class EtudiantService {
  private url = 'https://api.exemple.com/etudiants';

  constructor(private http: HttpClient) { }

  obtenirTous(): Observable<Etudiant[]> {
    return this.http.get<Etudiant[]>(this.url);
  }
}

Dans le composant, on s'abonne au résultat :

ngOnInit(): void {
  this.etudiantService.obtenirTous().subscribe({
    next: (donnees) => this.etudiants = donnees,
    error: (err) => console.error('Echec du chargement', err)
  });
}

Un Observable est une valeur qui arrivera plus tard. Tant qu'on ne s'y abonne pas, rien ne part : c'est l'oubli classique quand une requête ne semble pas s'exécuter.

À retenir

• Le composant affiche ; le service récupère et partage
• providedIn: 'root' donne une instance unique
• On reçoit les services dans le constructeur, on charge dans ngOnInit
• Un Observable n'émet rien sans subscribe()