Angular Academy · Oppitunti

Zoneless Angular

Suorittakaa Angular ilman Zone.js:ää

Oppitunti 3/413 vaihetta

Zoneless Angular on ilmainen Angular Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Angular Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Angular Academy-kurssilla on yhteensä 4 oppituntia.

Zone.js:n tuolle puolen

Zone.js aiheuttaa ylimääräistä kuormitusta ja muokkaa yleisiä rajapintoja. Moderni Angular tarjoaa zoneless-tilan, jossa muutoksentunnistus perustuu signaaleihin ja eksplisiittisiin ilmoituksiin zonen tekemien muutosten sijaan.

Zoneless-tilan käyttöönotto

Lisää zoneless-muutoksentunnistuksen tarjoaja bootstrap-konfiguraatioon.

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

Zone.js:n poistaminen

Zoneless-tilassa poistat myös zone.js-polyfillin build-konfiguraatiosta, mikä pienentää paketin kokoa ja nopeuttaa käynnistystä.

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

Mikä käynnistää tunnistuksen nyt?

Ilman zoneja Angular ajastaa muutoksentunnistuksen, kun: templatessa luetun signaalin arvo muuttuu, async-putki lähettää arvon, tapahtumasidonta käynnistyy tai markForCheck()-metodia kutsutaan.

Signaalit ovat keskiössä

Zoneless-sovellukset tukeutuvat tilanhallinnassa vahvasti signaaleihin. Signaalin lukeminen templatessa luo riippuvuuden, ja sen päivittäminen ilmoittaa Angularille, että kyseinen näkymä on päivitettävä.

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

Tapahtumat ilmoittavat edelleen

Templaten tapahtumasidonnat ilmoittavat Angularille suoraan, joten käyttäjän vuorovaikutus päivittää käyttöliittymää edelleen ilman zoneja.

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

Asynkronisuus ilman zoneja

Raaka setTimeout tai muu kuin signaaleihin perustuva asynkronisuus ei enää käynnistä tunnistusta automaattisesti. Kääri tällainen tila signaaleihin tai kutsu markForCheck()-metodia.

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

async-putken yhteensopivuus

async-putki toimii edelleen zoneless-tilassa, koska se merkitsee näkymän eksplisiittisesti tarkistettavaksi jokaisen lähetyksen yhteydessä.

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

Kolmansien osapuolten kirjastot

Jotkin kirjastot olettavat Zone.js:n tunnistavan muutokset automaattisesti. Zoneless-tilassa niiden callback-funktiot on ehkä käärittävä niin, että ne päivittävät signaalia tai kutsuvat markForCheck()-metodia manuaalisesti.

Hyödyt

Zoneless-tila tarkoittaa pienempiä paketteja, nopeampaa käynnistystä, vähemmän yllättäviä ylimääräisiä päivityskierroksia ja selkeämpää ajatusmallia: käyttöliittymä päivittyy vain, kun seuraamasi tila todella muuttuu.

Kokeellinen tila

Tarjoajan nimi on provideExperimentalZonelessChangeDetection, koska rajapintaa vakautetaan parhaillaan. Ota se käyttöön uusissa, ensisijaisesti signaaleihin perustuvissa sovelluksissa ja testaa huolellisesti.

Pikatarkistus

Testaa, miten hyvin ymmärrät zoneless Angularin.

Vastaa interaktiivisessa oppitunnissa

Kertaus

Opit, että provideExperimentalZonelessChangeDetection() poistaa Zone.js:n tarpeen ja ohjaa päivityksiä signaalien, tapahtumien, async-putken ja markForCheck()-metodin avulla, mikä tekee sovelluksista pienempiä, nopeampia ja ennakoitavampia.

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 38
Oppitunnit: 144

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Zoneless Angular” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Angular Academy-oppimispolun 3 oppituntia, myös oppitunnin “Zoneless Angular”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Angular Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Zoneless Angular”?

Suorittakaa Angular ilman Zone.js:ää Harjoittelet Angular Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Angular Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Angular Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.

Kuinka kauan ”Zoneless Angular”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Angular Academy-oppitunnilla?

Kyllä. Jokainen Angular Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: Angular Academy