Store di signal nei servizi
Gestire lo stato dell'app in servizi basati su signal
Store di signal nei servizi è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Angular Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Angular Academy include 4 lezioni in totale.
I signal come stato
I signal di Angular sono valori reattivi che notificano i consumer quando cambiano. Un signal contiene un valore e riesegue ogni computazione o template che lo legge.
Memorizzare i signal all'interno di un servizio @Injectable consente a più componenti di condividere lo stesso stato reattivo.
Uno store di signal minimale
Crei un servizio e memorizzi lo stato in un signal(). Mantenga privato il signal scrivibile ed esponga una vista in sola lettura.
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); }
}Perché providedIn root
providedIn: 'root' rende il servizio un singleton nell'intera app. Ogni componente che lo inietta condivide esattamente la stessa istanza del signal, mantenendo lo stato sincronizzato.
Lettura del signal
Chiami il signal come una funzione per leggerne il valore. All'interno di un template Angular tiene traccia della lettura e aggiorna automaticamente il DOM quando il valore cambia.
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 protegge lo stato
asReadonly() restituisce un signal che può essere letto ma non modificato. I componenti non possono chiamare accidentalmente set() o update() su di esso, quindi tutte le modifiche passano attraverso i metodi dello store.
set e update
Usi set(value) quando dispone direttamente del valore successivo. Usi update(fn) quando il valore successivo dipende da quello corrente.
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); }Più signal per store
Uno store può contenere diversi signal che rappresentano porzioni differenti dello stato. Mantenga privati i signal scrivibili ed esponga le controparti in sola lettura.
private _items = signal<Item[]>([]);
private _loading = signal(false);
readonly items = this._items.asReadonly();
readonly loading = this._loading.asReadonly();I metodi incapsulano la logica
Le regole di business risiedono nei metodi dello store, non nei componenti. I componenti chiamano metodi che esprimono l'intento, come addToCart(item), e lo store decide come modificare lo stato.
addToCart(item: Item) {
this._items.update(list => [...list, item]);
}
removeFromCart(id: string) {
this._items.update(list => list.filter(i => i.id !== id));
}Nessuna sottoscrizione necessaria
A differenza dei servizi basati su RxJS, gli store di signal non richiedono subscribe() né la disiscrizione manuale. Leggere un signal in un template configura la reattività e Angular la rimuove quando il componente viene distrutto.
Iniezione con inject()
La funzione inject() funziona nei costruttori, negli inizializzatori dei campi e nelle factory function. È il modo moderno per ottenere l'istanza dello store.
export class CartComponent {
private store = inject(CartStore);
items = this.store.items; // read-only signal
}Testare uno store di signal
Gli store di signal sono semplici classi, quindi i test sono semplici: crei un'istanza, chiami un metodo e legga sincronicamente il valore del signal. Non serve alcuna gestione asincrona.
it('increments', () => {
const store = new CounterStore();
store.increment();
expect(store.count()).toBe(1);
});Verifica rapida
Verifichi la Sua comprensione degli store di signal.
Riepilogo
Ha imparato a costruire uno store basato sui signal: mantenere privati i signal scrivibili, esporre viste asReadonly(), modificare lo stato tramite set/update all'interno dei metodi e iniettare il singleton con inject(). Nessuna sottoscrizione, test semplici e stato reattivo condiviso.
Impara HTML con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 38
- Lezioni
- 144
Domande Frequenti
La lezione «Store di signal nei servizi» è gratuita?
Sì — il testo completo di «Store di signal nei servizi» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Angular Academy, passa a CoddyKit PRO. Il corso Angular Academy include 4 lezioni in totale.
Cosa imparerò in «Store di signal nei servizi»?
Gestire lo stato dell'app in servizi basati su signal Eserciti Angular Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Angular Academy?
Non è richiesta alcuna esperienza precedente. Angular Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.
Quanto tempo richiede la lezione «Store di signal nei servizi»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Angular Academy?
Sì. Ogni lezione Angular Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Store di signal nei servizi
- Derivare lo stato con computed
- Aggiornare lo stato in modo immutabile
- Collegare Signals e RxJS