Angular Academy · Lektion

Angular utan zoner

Kör Angular utan Zone.js.

Lektion 3 av 413 steg

Angular utan zoner är en gratis lektion i Angular Academy på CoddyKit. Detta är lektion 3 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Angular Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Angular Academy innehåller totalt 4 lektioner.

Bortom Zone.js

Zone.js medför overhead och patchar globala API:er. Moderna Angular erbjuder ett zoneless-läge där ändringsdetektering drivs av signals och explicita notifieringar i stället för zone-patchning.

Aktivera zoneless

Ange providern för zoneless ändringsdetektering i din bootstrap-konfiguration.

bootstrapApplication(AppComponent, {
  providers: [
    provideExperimentalZonelessChangeDetection()
  ]
});

Ta bort Zone.js

I zoneless-läge tar du även bort zone.js-polyfillen från din build-konfiguration, vilket minskar paketstorleken och kostnaden för uppstart.

// angular.json: remove "zone.js" from polyfills
// main.ts: do not import 'zone.js'

Vad utlöser detektering nu?

Utan zones schemalägger Angular ändringsdetektering när: en signal som läses i en template ändras, en async-pipe skickar ut ett värde, en event binding utlöses eller markForCheck() anropas.

Signals är centrala

Zoneless-appar förlitar sig i hög grad på signals för tillståndshantering. När en signal läses i en template skapas ett beroende; när den uppdateras meddelas Angular så att vyn uppdateras.

count = signal(0);
// template: {{ count() }}
this.count.set(5); // schedules CD

Händelser meddelar fortfarande

Händelsebindningar i templates meddelar Angular direkt, så användarinteraktioner fortsätter att uppdatera användargränssnittet utan zones.

<button (click)="count.update(c => c + 1)">+</button>

Async utan zones

Råa anrop till setTimeout eller asynkron kod som inte använder signals utlöser inte längre detektering automatiskt. Omslut sådant tillstånd i signals eller anropa markForCheck().

setTimeout(() => this.ready.set(true), 1000);

Kompatibilitet med async-pipen

async-pipen fortsätter att fungera i zoneless-läge eftersom den uttryckligen markerar vyn för kontroll vid varje utskick.

<p>{{ data$ | async }}</p>

Bibliotek från tredje part

Vissa bibliotek förutsatte att Zone.js detekterade ändringar automatiskt. I zoneless-läge kan du behöva omsluta deras callbacks så att en signal uppdateras eller anropa markForCheck() manuellt.

Fördelar

Zoneless-läge innebär mindre paket, snabbare uppstart, färre oväntade extra ticks och en tydligare mental modell: användargränssnittet uppdateras endast när det tillstånd du följer faktiskt ändras.

Experimentell status

Providern heter provideExperimentalZonelessChangeDetection eftersom API:et håller på att stabiliseras. Använd det i nya appar som i första hand bygger på signals och testa noggrant.

Snabbtest

Testa dina kunskaper om zoneless Angular.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Du har lärt dig att provideExperimentalZonelessChangeDetection() eliminerar behovet av Zone.js och driver uppdateringar via signals, händelser, async-pipen och markForCheck() för mindre, snabbare och mer förutsägbara appar.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 38
Lektioner: 144

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Angular utan zoner” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Angular Academy, inklusive ”Angular utan zoner”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Angular Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Angular utan zoner”?

Kör Angular utan Zone.js. Ni övar på Angular Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Angular Academy?

Du behöver inga förkunskaper. Utbildningen i Angular Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.

Hur lång tid tar lektionen ”Angular utan zoner”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Angular Academy-lektionen?

Ja. Varje Angular Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Angular Academy