Angular senza zone
Eseguire Angular senza Zone.js
Angular senza zone è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 3 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.
Oltre Zone.js
Zone.js introduce un overhead e modifica le API globali. Angular moderno offre una modalità zoneless, in cui il rilevamento delle modifiche è guidato dai signals e da notifiche esplicite, invece che dalle patch delle zone.
Abilitare la modalità zoneless
Fornite il provider per il rilevamento delle modifiche zoneless nella configurazione di bootstrap.
bootstrapApplication(AppComponent, {
providers: [
provideExperimentalZonelessChangeDetection()
]
});Rimuovere Zone.js
In modalità zoneless dovete anche rimuovere il polyfill zone.js dalla configurazione della build, riducendo le dimensioni del bundle e il costo di avvio.
// angular.json: remove "zone.js" from polyfills
// main.ts: do not import 'zone.js'Che cosa attiva ora il rilevamento?
Senza le zone, Angular pianifica il rilevamento delle modifiche quando: cambia un signal letto nel template, emette una pipe async, si attiva un event binding oppure viene chiamato markForCheck().
I signals sono centrali
Le app zoneless si affidano fortemente ai signals per lo stato. La lettura di un signal nel template crea una dipendenza; il suo aggiornamento notifica ad Angular di aggiornare quella vista.
count = signal(0);
// template: {{ count() }}
this.count.set(5); // schedules CDGli eventi inviano ancora notifiche
Gli event binding del template notificano direttamente Angular, quindi le interazioni dell'utente continuano ad aggiornare l'interfaccia senza le zone.
<button (click)="count.update(c => c + 1)">+</button>Async senza zone
Un setTimeout usato direttamente o le operazioni asincrone non basate sui signals non attivano più automaticamente il rilevamento. Racchiudete questo stato in signals oppure chiamate markForCheck().
setTimeout(() => this.ready.set(true), 1000);Compatibilità della pipe async
La pipe async continua a funzionare in modalità zoneless perché contrassegna esplicitamente la vista per il controllo a ogni emissione.
<p>{{ data$ | async }}</p>Librerie di terze parti
Alcune librerie presuppongono il rilevamento automatico di Zone.js. In modalità zoneless, potrebbe essere necessario racchiudere le loro callback per aggiornare un signal o chiamare manualmente markForCheck().
Vantaggi
La modalità zoneless significa bundle più piccoli, avvio più rapido, meno tick aggiuntivi imprevisti e un modello mentale più chiaro: l'interfaccia si aggiorna solo quando cambia effettivamente lo stato che state monitorando.
Stato sperimentale
Il provider si chiama provideExperimentalZonelessChangeDetection perché l'API è in fase di stabilizzazione. Adottatelo per le nuove app basate innanzitutto sui signals e testate accuratamente.
Verifica rapida
Verificate la vostra comprensione di Angular zoneless.
Riepilogo
Avete imparato che provideExperimentalZonelessChangeDetection() elimina la necessità di Zone.js e gestisce gli aggiornamenti tramite signals, eventi, la pipe async e markForCheck(), per app più piccole, rapide e prevedibili.
Domande Frequenti
La lezione «Angular senza zone» è gratuita?
Sì — il testo completo di «Angular senza zone» è 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 «Angular senza zone»?
Eseguire Angular senza Zone.js 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 3 di 4.
Quanto tempo richiede la lezione «Angular senza zone»?
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
- Come funziona il rilevamento delle modifiche
- Rilevamento delle modifiche OnPush
- Angular senza zone
- Ottimizzare liste e rendering