Ce este nou în Angular v16?

Angular, întreținut de Google, este un cadru open-source utilizat pe scară largă pentru dezvoltarea de aplicații web. Vă oferă un set de instrumente robust și o gamă de caracteristici care vă permit să creați aplicații web dinamice, receptive și scalabile.

Lansarea recentă a Angular versiunea 16 introduce actualizări interesante și îmbunătățiri ale experienței de dezvoltare, precum și performanțe și stabilitate mai bune ale aplicației.

1. Semnale unghiulare

Semnale unghiulare este o bibliotecă care permite definirea valorilor reactive și stabilirea dependențelor între ele. Iată un exemplu simplu despre cum să utilizați semnalele unghiulare într-o aplicație unghiulară:

@Component ({
 selector: „aplicația mea”,
 de sine stătătoare: Adevărat,
 șablon: `
{{ Numele complet() }} „setName(‘Ioan’)”>Faceți clic pe</button>
`,
})
exportclasă Aplicația {
 prenume = semnal(„Jane”);
 prenume = semnal('Căprioară'

instagram viewer
);
 fullName = calculat(() =>`${acest.Nume()}${acest.nume()}`);
constructor() {
 efect(() =>consolă.Buturuga(„Nume schimbat:”, acest.Numele complet()));
 }
 setName (nume nou: şir) {
acest.firstName.set (newName);
 }
}

Fragmentul de cod de mai sus creează o valoare calculată numită fullName, care se bazează pe semnalele firstName și lastName. În plus, definește un efect, o funcție de apel invers care rulează ori de câte ori valoarea semnalelor pe care le citește se modifică.

În acest caz, valoarea fullName depinde de firstName și lastName, așa că schimbarea oricăreia dintre ele declanșează efectul. Când valoarea firstName este setată la John, browserul înregistrează următorul mesaj pe consolă:

 Numele schimbat: John Doe.

2. Standalone Ng New Collection

Începând de la Angular v16, puteți crea noi proiecte independente chiar de la început! Pentru a încerca previzualizarea dezvoltatorului a schemelor independente, asigurați-vă că aveți instalat Angular CLI v16 și rulați următoarea comandă:

ng new --standalone

Făcând acest lucru, veți obține o structură de proiect mai simplă, fără NgModules. În plus, toți generatorii din proiect vor produce directive, componente și conducte de sine stătătoare!

3. Maparea automată a parametrilor rutei

Luați în considerare o configurație de rutare după cum urmează:

exportconst rute: Rute = [{
 cale: „căutare:/id”,
 componentă: SearchComponent,
 rezolva: {
 căutareDetalii: searchResolverFn
 }
}];

Înainte de Angular 16, trebuia să injectați serviciul ActivatedRoute pentru a prelua parametrii URL, parametrii de interogare sau datele asociate pentru o anumită adresă URL.

Iată un exemplu despre cum a trebuit să o faci:

@Component({
 ...
})
exportclasă SearchComponent {
 readonly #activatedRoute = injectare (ActivatedRoute);
 numai citire id$ = acest.#activatedRoute.paramMap (map(parametrii => params.get('id')));
 date numai în citire$ = acest.#activatedRoute.data.map(({
 căutareDetalii
 }) => căutareDetalii);
}

Cu Angular 16, nu mai trebuie să injectați serviciul ActivatedRoute pentru a prelua diferiți parametri de rută, deoarece îi puteți lega direct la intrările componente.

Pentru a activa această funcționalitate într-o aplicație care utilizează sistemul de module, setați valoarea corespunzătoare în opțiunile RouterModule:

RouterModule.forRoot (rute, {
 bindComponentInputs: Adevărat
})

Pentru o aplicație autonomă, trebuie să apelați în schimb o funcție:

provideRoutes (rute, cuComponentInputBinding());

Odată ce activați această funcționalitate, componenta devine mult mai simplă:

@Component({
 ...
})
exportclasă SearchComponent {
@Intrare() id!: şir;
@Intrare() Detalii de căutare!: Detalii de căutare;
}

4. Intrare necesară

O caracteristică foarte așteptată pentru comunitatea Angular este capacitatea de a marca anumite intrări după cum este necesar. Până acum, a trebuit să utilizați diverse soluții pentru a realiza acest lucru, cum ar fi apariția unei erori în NgOnInit ciclu de viață dacă variabila nu a fost definită sau modificarea selectorului componentei pentru a include obligatoriu intrări.

Cu toate acestea, ambele soluții au avut avantajele și dezavantajele lor. Începând cu versiunea 16, solicitarea unei intrări este la fel de simplă ca furnizarea unui obiect de configurare în metadatele adnotării de intrare:

@Intrare({
 necesar: Adevărat
}) Nume!: şir;

5. Vite ca Dev Server

Angular 14 a introdus un nou bundler JavaScript numit EsBuild, care a îmbunătățit semnificativ timpul de construcție cu aproximativ 40%. Cu toate acestea, puteți realiza acest câștig de performanță doar în timpul fazei de construire și nu în timpul dezvoltării cu serverul de dezvoltare.

În viitoarea lansare a lui Angular, instrumentul Vite build permite utilizarea EsBuild și în timpul dezvoltării.

Pentru a activa această caracteristică, actualizați configurația constructorului în fișierul angular.json, după cum urmează:

"arhitect": {
"construi": {
"constructor": „@angular-devkit/build-angular: browser-esbuild”,
"Opțiuni": {
 ...
 }
 }

Vă rugăm să rețineți că această funcționalitate este încă experimentală.

Îmbunătățirea experienței de dezvoltare și a performanței

Versiunea Angular 16 aduce actualizări interesante, cum ar fi Angular Signals pentru gestionarea datelor, proiect de sine stătător crearea, maparea automată a parametrilor rutei, intrările necesare și integrarea Vite pentru îmbunătățire dezvoltare. Aceste îmbunătățiri îmbunătățesc experiența de dezvoltare și măresc performanța aplicației.