Angular Academy · Lektion

Angular uden Zone.js

Kør Angular uden Zone.js.

Lektion 3 af 413 trin

Angular uden Zone.js er en gratis Angular Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Angular Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Angular Academy-kurset indeholder 4 lektioner i alt.

Ud over Zone.js

Zone.js har ekstra omkostninger og ændrer globale API'er. Moderne Angular tilbyder en zoneless-tilstand, hvor ændringsregistrering styres af signals og eksplicitte notifikationer i stedet for zone-ændringer.

Aktivering af zoneless

Angiv udbyderen til zoneless-ændringsregistrering i din bootstrap-konfiguration.

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

Fjern Zone.js

I zoneless-tilstand fjerner du også zone.js-polyfillen fra din build-konfiguration, hvilket reducerer bundtstørrelsen og opstartsomkostningen.

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

Hvad udløser registreringen nu?

Uden zones planlægger Angular ændringsregistrering, når: et signal, der læses i en skabelon, ændres, en async-pipe udsender en værdi, en hændelsesbinding udløses, eller markForCheck() kaldes.

Signals er centrale

Zoneless-apps er i høj grad afhængige af signals til tilstand. Når du læser et signal i en skabelon, oprettes en afhængighed; når det opdateres, får Angular besked om at opdatere den pågældende visning.

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

Hændelser giver stadig besked

Hændelsesbindinger i skabelonen giver Angular direkte besked, så brugerinteraktioner fortsat opdaterer brugerfladen uden zones.

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

Async uden zones

Rå setTimeout eller asynkron kode, der ikke bruger signals, udløser ikke længere automatisk registrering. Indpak sådan tilstand i signals, eller kald markForCheck().

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

Kompatibilitet med async-pipen

async-pipen fungerer stadig i zoneless-tilstand, fordi den eksplicit markerer visningen til kontrol ved hver udsendelse.

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

Tredjepartsbiblioteker

Nogle biblioteker forventede automatisk registrering fra Zone.js. I zoneless-tilstand kan du være nødt til at indpakke deres callbacks, så de opdaterer et signal eller manuelt kalder markForCheck().

Fordele

Zoneless-tilstand betyder mindre bundter, hurtigere opstart, færre uventede ekstra ticks og en tydeligere mental model: Brugerfladen opdateres kun, når den tilstand, du holder øje med, faktisk ændres.

Eksperimentel status

Udbyderen hedder provideExperimentalZonelessChangeDetection, fordi API'et stadig er under stabilisering. Tag det i brug i nye apps, der primært bruger signals, og test grundigt.

Hurtig kontrol

Test din forståelse af Angular uden zones.

Besvar den i den interaktive lektion

Opsummering

Du har lært, at provideExperimentalZonelessChangeDetection() fjerner behovet for Zone.js og driver opdateringer via signals, hændelser, async-pipen og markForCheck(), så apps bliver mindre, hurtigere og mere forudsigelige.

Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 38
Lektioner: 144

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Angular uden Zone.js” gratis?

Ja — alle 3 lektioner i læringssporet Angular Academy, inklusive “Angular uden Zone.js”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Angular Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Angular uden Zone.js”?

Kør Angular uden Zone.js. Du øver dig i Angular Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Angular Academy?

Der kræves ingen tidligere erfaring. Angular Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.

Hvor lang tid tager lektionen “Angular uden Zone.js”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Angular Academy-lektion?

Ja. Alle Angular Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til Angular Academy