Kaj je novega v Angular v16?

Angular, ki ga vzdržuje Google, je široko uporabljeno odprtokodno ogrodje za razvoj spletnih aplikacij. Ponuja vam robusten nabor orodij in vrsto funkcij, ki vam omogočajo ustvarjanje dinamičnih, odzivnih in razširljivih spletnih aplikacij.

Nedavna izdaja Angular različice 16 uvaja vznemirljive posodobitve in izboljšave razvojne izkušnje ter boljšo zmogljivost in stabilnost aplikacij.

1. Kotni signali

Kotni signali je knjižnica, ki omogoča definiranje reaktivnih vrednosti in vzpostavljanje odvisnosti med njimi. Tukaj je preprost primer, kako uporabiti Angular Signals v Angular aplikaciji:

@Komponenta ({
 selektor: 'moja-aplikacija',
 samostojno: prav,
 predloga: `
{{ polno ime() }} "setName('Janez')">Klikni</button>
`,
})
izvozrazred Aplikacija {
 firstName = signal('Jane');
 priimek = signal('srna');
 fullName = izračunano(() =>`${to.ime()}${to.priimek()}`);
konstruktor() {
 učinek(() =>konzola.log(

instagram viewer

'Ime spremenjeno:', to.polno ime()));
 }
 setName (novoIme: vrvica) {
to.firstName.set (novoIme);
 }
}

Zgornji delček kode ustvari izračunano vrednost, imenovano fullName, ki se opira na signala firstName in lastName. Poleg tega definira učinek, funkcijo povratnega klica, ki se zažene vsakič, ko se spremeni vrednost signalov, ki jih bere.

V tem primeru je vrednost fullName odvisna od firstName in lastName, zato sprememba enega od njiju sproži učinek. Ko je vrednost firstName nastavljena na John, brskalnik v konzolo zabeleži naslednje sporočilo:

 Ime spremenjeno: John Doe.

2. Samostojna Ng Nova zbirka

Začenši z Angular v16, lahko ustvarite nove samostojne projekte že od samega začetka! Če želite preizkusiti razvijalski predogled samostojnih shem, zagotovite, da imate nameščen Angular CLI v16 in zaženite naslednji ukaz:

ng novo --samostojno

S tem boste pridobili preprostejšo strukturo projekta brez kakršnih koli NgModules. Poleg tega bodo vsi generatorji v projektu proizvajali samostojne direktive, komponente in cevi!

3. Samodejno preslikavo parametrov poti

Razmislite o konfiguraciji usmerjanja, kot sledi:

izvozkonst poti: Poti = [{
 pot: 'iskanje:/id',
 komponenta: SearchComponent,
 razreši: {
 searchDetails: searchResolverFn
 }
}];

Pred Angular 16 ste morali vstaviti storitev ActivatedRoute za pridobitev parametrov URL-ja, parametrov poizvedbe ali povezanih podatkov za določen URL.

Tukaj je primer, kako ste morali to storiti:

@Komponenta({
 ...
})
izvozrazred SearchComponent {
 samo za branje #activatedRoute = inject (ActivatedRoute);
 samo za branje id$ = to.#activatedRoute.paramMap (zemljevid(params => params.get('id')));
 podatki samo za branje$ = to.#activatedRoute.data.map(({
 searchDetails
 }) => searchDetails);
}

Z Angular 16 vam ni več treba vbrizgati storitve ActivatedRoute za pridobivanje različnih parametrov poti, ker jih lahko povežete neposredno z vhodi komponent.

Za aktiviranje te funkcije v aplikaciji, ki uporablja sistem modulov, nastavite ustrezno vrednost v možnostih RouterModule:

RouterModule.forRoot (routes, {
 bindComponentInputs: prav
})

Za samostojno aplikacijo morate namesto tega poklicati funkcijo:

provideRoutes (routes, withComponentInputBinding());

Ko aktivirate to funkcijo, postane komponenta veliko enostavnejša:

@Komponenta({
 ...
})
izvozrazred SearchComponent {
@Vnos() id!: vrvica;
@Vnos() searchDetails!: SearchDetails;
}

4. Obvezen vnos

Težko pričakovana funkcija za skupnost Angular je možnost označevanja določenih vnosov po potrebi. Do zdaj ste morali uporabiti različne rešitve, da ste to dosegli, na primer prikazovanje napake v NgOnInit življenjskega cikla, če spremenljivka ni bila definirana, ali spreminjanje izbirnika komponente tako, da vključuje obvezno vložki.

Vendar sta imeli obe rešitvi svoje prednosti in slabosti. Od različice 16 naprej je uvedba zahtevanega vnosa tako preprosta kot zagotavljanje konfiguracijskega objekta v metapodatkih vhodne opombe:

@Vnos({
 obvezno: prav
}) ime!: vrvica;

5. Vite kot strežnik za razvijalce

Angular 14 je predstavil nov JavaScript bundler, imenovan EsBuild, ki je občutno izboljšal čas gradnje za približno 40 %. Vendar pa bi to povečanje zmogljivosti lahko spoznali le med fazo gradnje in ne med razvojem s strežnikom za razvijalce.

V prihajajoči izdaji Angular, orodje za gradnjo Vite omogoča uporabo EsBuild-a tudi med razvojem.

Če želite aktivirati to funkcijo, posodobite konfiguracijo graditelja v datoteki angular.json, kot sledi:

"arhitekt": {
"zgraditi": {
"graditelj": "@angular-devkit/build-angular: brskalnik-esbuild",
"opcije": {
 ...
 }
 }

Upoštevajte, da je ta funkcija še poskusna.

Izboljšanje razvojnih izkušenj in uspešnosti

Angular različica 16 prinaša razburljive posodobitve, kot so Angular Signals za upravljanje podatkov, samostojni projekt ustvarjanje, samodejno preslikavo parametrov poti, zahtevani vnosi in integracija Vite za izboljšano razvoj. Te izboljšave izboljšajo razvojno izkušnjo in povečajo zmogljivost aplikacije.