Angular Academy · leksjon

Angular uten Zone.js

Kjør Angular uten Zone.js.

Leksjon 3 av 413 trinn

Angular uten Zone.js er en gratis leksjon i Angular Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Angular Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Angular Academy inneholder totalt 4 leksjoner.

Videre enn Zone.js

Zone.js medfører ekstra kostnader og endrer globale API-er. Moderne Angular tilbyr en zoneless-modus der endringsdeteksjon drives av signaler og eksplisitte varsler i stedet for zone-patching.

Aktivere zoneless

Registrer leverandøren for zoneless-endringsdeteksjon i bootstrap-konfigurasjonen.

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

Fjerne Zone.js

I zoneless-modus fjerner De også zone.js-polyfillen fra byggkonfigurasjonen, noe som reduserer pakkestørrelsen og oppstartskostnaden.

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

Hva utløser deteksjon nå?

Uten soner planlegger Angular endringsdeteksjon når: et signal som er lest i en mal, endres, en async-pipe sender en verdi, en hendelsesbinding utløses, eller markForCheck() kalles.

Signaler står sentralt

Zoneless-apper er i stor grad avhengige av signaler for tilstand. Når De leser et signal i en mal, opprettes en avhengighet. Når signalet oppdateres, varsles Angular om å oppdatere visningen.

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

Hendelser varsler fortsatt

Hendelsesbindinger i maler varsler Angular direkte, slik at brukerinteraksjoner fortsatt oppdaterer brukergrensesnittet uten soner.

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

Asynkronitet uten soner

Rå setTimeout eller asynkronitet som ikke bruker signaler, utløser ikke lenger deteksjon automatisk. Pakk slik tilstand inn i signaler, eller kall markForCheck().

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

async-pipe-kompatibilitet

async-pipen fungerer fortsatt i zoneless-modus fordi den eksplisitt merker visningen for sjekking ved hver verdi som sendes.

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

Tredjepartsbiblioteker

Noen biblioteker forutsatte automatisk deteksjon fra Zone.js. I zoneless-modus må De kanskje pakke inn callback-funksjonene deres slik at de oppdaterer et signal eller kaller markForCheck() manuelt.

Fordeler

Zoneless-modus betyr mindre pakker, raskere oppstart, færre uventede ekstra klokkeslag og en tydeligere mental modell: Brukergrensesnittet oppdateres bare når tilstanden De følger, faktisk endres.

Eksperimentell status

Leverandøren heter provideExperimentalZonelessChangeDetection fordi API-et fortsatt stabiliseres. Ta det i bruk i nye, signalbaserte apper og test grundig.

Rask sjekk

Test forståelsen Deres av Angular uten soner.

Besvar den i den interaktive leksjonen

Oppsummering

De har lært at provideExperimentalZonelessChangeDetection() fjerner behovet for Zone.js og driver oppdateringer via signaler, hendelser, async-pipen og markForCheck(), noe som gir mindre, raskere og mer forutsigbare apper.

Gratis å komme i gang

Lær deg HTML med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 38
Leksjoner: 144

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Angular uten Zone.js» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Angular Academy, inkludert «Angular uten Zone.js», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Angular Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Angular uten Zone.js»?

Kjør Angular uten Zone.js. Du øver på Angular Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Angular Academy?

Ingen tidligere erfaring er nødvendig. Angular Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.

Hvor lang tid tar leksjonen «Angular uten Zone.js»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Angular Academy-leksjonen?

Ja. Alle Angular Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til Angular Academy