Magasins de signaux dans les services
Conservez l’état de l’application dans des services fondés sur des signaux
Magasins de signaux dans les services est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.
Les signaux comme état
Les signaux Angular sont des valeurs réactives qui avertissent les utilisateurs lorsqu’elles changent. Un signal contient une valeur et réexécute tout calcul ou modèle qui le lit.
Stocker des signaux dans un service @Injectable permet à plusieurs composants de partager le même état réactif.
Un magasin de signaux minimal
Créez un service et stockez l’état dans un signal(). Gardez le signal modifiable privé et exposez une vue en lecture seule.
import { Injectable, signal } from '@angular/core';
@Injectable({ providedIn: 'root' })
export class CounterStore {
private _count = signal(0);
readonly count = this._count.asReadonly();
increment() { this._count.update(c => c + 1); }
}Pourquoi providedIn root
providedIn: 'root' fait du service un singleton dans toute l’application. Chaque composant qui l’injecte partage exactement la même instance de signal, ce qui maintient l’état synchronisé.
Lire le signal
Appelez le signal comme une fonction pour lire sa valeur. Dans un modèle, Angular suit cette lecture et met automatiquement à jour le DOM lorsque la valeur change.
import { Component, inject } from '@angular/core';
import { CounterStore } from './counter.store';
@Component({
selector: 'app-counter',
template: '<button (click)="store.increment()">{{ store.count() }}</button>'
})
export class CounterComponent {
store = inject(CounterStore);
}asReadonly protège l’état
asReadonly() renvoie un signal qui peut être lu, mais pas modifié. Les composants ne peuvent pas appeler accidentellement set() ou update() dessus ; toutes les modifications passent donc par les méthodes du magasin.
set ou update
Utilisez set(value) lorsque vous disposez directement de la valeur suivante. Utilisez update(fn) lorsque la valeur suivante dépend de la valeur actuelle.
private _user = signal<User | null>(null);
setUser(u: User) { this._user.set(u); }
clearUser() { this._user.set(null); }
touch() { this._user.update(u => u ? { ...u, seen: true } : u); }Plusieurs signaux par magasin
Un magasin peut contenir plusieurs signaux représentant différentes portions de l’état. Gardez chaque signal modifiable privé et exposez les équivalents en lecture seule.
private _items = signal<Item[]>([]);
private _loading = signal(false);
readonly items = this._items.asReadonly();
readonly loading = this._loading.asReadonly();Les méthodes encapsulent la logique
Les règles métier résident dans les méthodes du magasin, et non dans les composants. Les composants appellent des méthodes explicites comme addToCart(item), puis le magasin décide comment l’état évolue.
addToCart(item: Item) {
this._items.update(list => [...list, item]);
}
removeFromCart(id: string) {
this._items.update(list => list.filter(i => i.id !== id));
}Aucun abonnement nécessaire
Contrairement aux services fondés sur RxJS, les magasins de signaux n’ont besoin ni de subscribe() ni de désabonnement manuel. Lire un signal dans un modèle met en place la réactivité, et Angular la nettoie lorsque le composant est détruit.
Injecter avec inject()
La fonction inject() fonctionne dans les constructeurs, les initialisateurs de champs et les fonctions fabrique. C’est la méthode moderne pour obtenir l’instance du magasin.
export class CartComponent {
private store = inject(CartStore);
items = this.store.items; // read-only signal
}Évaluer un magasin de signaux
Les magasins de signaux sont de simples classes, leurs évaluations sont donc simples : créez une instance, appelez une méthode et lisez immédiatement la valeur du signal. Aucun mécanisme asynchrone n’est nécessaire.
it('increments', () => {
const store = new CounterStore();
store.increment();
expect(store.count()).toBe(1);
});Vérification rapide
Évaluez votre compréhension des magasins de signaux.
Récapitulatif
Vous avez appris à créer un magasin fondé sur les signaux : garder les signaux modifiables privés, exposer des vues asReadonly(), modifier l’état via set/update dans les méthodes et injecter le singleton avec inject(). Aucun abonnement, une évaluation simple et un état réactif partagé.
Questions Fréquemment Posées
La leçon « Magasins de signaux dans les services » est-elle gratuite ?
Oui — le texte complet de « Magasins de signaux dans les services » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Magasins de signaux dans les services » ?
Conservez l’état de l’application dans des services fondés sur des signaux Tu pratiques Angular Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Angular Academy ?
Aucune expérience préalable n'est requise. Angular Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « Magasins de signaux dans les services » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Angular Academy ?
Oui. Chaque leçon Angular Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Magasins de signaux dans les services
- Dériver l’état avec computed
- Mettre à jour l’état de manière immuable
- Relier les signaux et RxJS