Angular Academy · Les

Angular zonder Zone.js

Voer Angular uit zonder Zone.js

Les 3 van 413 stappen

Angular zonder Zone.js is een gratis Angular Academy-les op CoddyKit. Dit is les 3 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Angular Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Angular Academy bevat in totaal 4 lessen.

Voorbij Zone.js

Zone.js brengt overhead met zich mee en past globale API's aan. Modern Angular biedt een zoneless-modus waarin wijzigingsdetectie wordt aangestuurd door signals en expliciete meldingen, in plaats van door patches van zones.

Zoneless inschakelen

Voeg de provider voor zoneless-wijzigingsdetectie toe aan je bootstrapconfiguratie.

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

Zone.js verwijderen

In de zoneless-modus verwijder je ook de zone.js-polyfill uit je buildconfiguratie, waardoor de bundel kleiner wordt en het opstarten minder kost.

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

Wat start detectie nu?

Zonder zones plant Angular wijzigingsdetectie in wanneer: een in een template gelezen signal verandert, een async-pipe een waarde uitzendt, een gebeurteniskoppeling wordt geactiveerd of markForCheck() wordt aangeroepen.

Signals staan centraal

Zoneless-apps steunen sterk op signals voor hun status. Als je een signal in een template leest, ontstaat er een afhankelijkheid; wanneer je het bijwerkt, krijgt Angular een melding om die weergave te vernieuwen.

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

Gebeurtenissen geven nog steeds meldingen

Gebeurteniskoppelingen in templates melden dit rechtstreeks aan Angular, zodat interacties van gebruikers de gebruikersinterface zonder zones blijven bijwerken.

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

Async zonder zones

Ruwe setTimeout of asynchrone code die geen signal gebruikt, start niet langer automatisch detectie. Verpak zulke status in signals of roep markForCheck() aan.

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

Compatibiliteit van de async-pipe

De async-pipe blijft werken in de zoneless-modus omdat deze de weergave bij elke waarde-uitzending expliciet voor controle markeert.

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

Bibliotheken van derden

Sommige bibliotheken gingen ervan uit dat Zone.js automatisch detectie uitvoert. In de zoneless-modus moet je hun callbacks mogelijk verpakken om een signal bij te werken of handmatig markForCheck() aan te roepen.

Voordelen

De zoneless-modus betekent kleinere bundels, sneller opstarten, minder onverwachte extra tikken en een duidelijker mentaal model: de gebruikersinterface wordt alleen bijgewerkt wanneer de status die je volgt daadwerkelijk verandert.

Experimentele status

De provider heet provideExperimentalZonelessChangeDetection omdat de API nog wordt gestabiliseerd. Gebruik deze voor nieuwe apps die primair op signals zijn gebaseerd en test grondig.

Korte controle

Test je begrip van Angular zonder zones.

Beantwoord dit in de interactieve les

Samenvatting

Je hebt geleerd dat provideExperimentalZonelessChangeDetection() de noodzaak van Zone.js wegneemt en updates aanstuurt via signals, gebeurtenissen, de async-pipe en markForCheck(), voor kleinere, snellere en voorspelbaardere apps.

Gratis beginnen

Leer HTML met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 38
Lessen: 144

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Angular zonder Zone.js” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad Angular Academy, waaronder “Angular zonder Zone.js”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Angular Academy bevat in totaal 4 lessen.

Wat leer ik in “Angular zonder Zone.js”?

Voer Angular uit zonder Zone.js Je oefent met Angular Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Angular Academy te beginnen?

Ervaring vooraf is niet nodig. Angular Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.

Hoe lang duurt de les “Angular zonder Zone.js”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Angular Academy?

Ja. Elke les over Angular Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar Angular Academy