Services

Services

Un service est une classe qui contient de la logique ou des données réutilisables (appels HTTP, état partagé, fonctions utilitaires...), indépendante de tout composant. Cette page couvre la création d'un service injectable, avec cours, exemple et exercice.

Prérequis : avoir lu la page Formulaires. Pour la suite (utiliser ce service dans un composant), voir la page Injection-de-dependances.

C'est quoi, à quoi ça sert, pourquoi ?

• C'est quoi ? Une classe TypeScript classique, décorée avec @Injectable(), qui ne s'occupe pas d'affichage mais uniquement de logique ou de données (appels API, calculs, état partagé...).
• À quoi ça sert ? À regrouper du code qui doit être utilisé par plusieurs composants à un seul endroit, plutôt que de le dupliquer dans chaque composant.
• Pourquoi ? Un composant doit rester concentré sur l'affichage. Sans service, la logique métier et les composants deviennent étroitement liés, ce qui rend le code difficile à réutiliser, à tester et à faire évoluer.

Sommaire

1. Création d'un service injectable

---

1. Création d'un service injectable

Cours

On crée un service avec le décorateur @Injectable(). L'option providedIn: 'root' enregistre le service au niveau racine de l'application : Angular crée alors une instance unique partagée (singleton) accessible depuis n'importe quel composant, sans configuration supplémentaire.

ng generate service produit

Exemple

// produit.ts (service)
import { Injectable, signal } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class ProduitService {
  private produits = signal([
    { id: 1, nom: 'Clavier' },
    { id: 2, nom: 'Souris' },
  ]);

  getProduits() {
    return this.produits.asReadonly();
  }

  ajouterProduit(nom: string) {
    this.produits.update(liste => [...liste, { id: liste.length + 1, nom }]);
  }
}

Exercice

Crée un service PanierService (providedIn: 'root') avec un signal privé total initialisé à 0, et deux méthodes : ajouterMontant(montant: number) qui incrémente le total, et getTotal() qui retourne le signal en lecture seule.

Solution

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

@Injectable({
  providedIn: 'root',
})
export class PanierService {
  private total = signal(0);

  ajouterMontant(montant: number) {
    this.total.update(valeur => valeur + montant);
  }

  getTotal() {
    return this.total.asReadonly();
  }
}

---