Kas jauns versijā Angular v16?

Angular, ko uztur Google, ir plaši izmantots atvērtā pirmkoda ietvars tīmekļa lietojumprogrammu izstrādei. Tas piedāvā spēcīgu rīku komplektu un virkni funkciju, kas ļauj izveidot dinamiskas, atsaucīgas un mērogojamas tīmekļa lietojumprogrammas.

Nesenā versija Angular 16 ievieš aizraujošus atjauninājumus un uzlabojumus izstrādes pieredzē, kā arī labāku lietojumprogrammu veiktspēju un stabilitāti.

1. Leņķiskie signāli

Leņķiskie signāli ir bibliotēka, kas ļauj definēt reaktīvās vērtības un izveidot atkarības starp tām. Šeit ir vienkāršs piemērs, kā izmantot leņķiskos signālus lietojumprogrammā Angular:

@Komponents ({
 atlasītājs: "mana lietotne",
 savrups: taisnība,
 veidne: `
{{ pilnais vārds() }} "setName('Jānis')">Noklikšķiniet</button>
`,
})
eksportētklasē Lietotne {
 vārds = signāls("Džeina");
 uzvārds = signāls('Dirlīte');
 fullName = aprēķināts(() =>`${šis.vārds()}${šis.uzvārds()}`);
konstruktors() {

instagram viewer


 efekts (() =>konsole.log('Vārds mainīts:', šis.pilnais vārds()));
 }
 setName (newName: stīga) {
šis.firstName.set (newName);
 }
}

Iepriekš minētais koda fragments izveido aprēķinātu vērtību ar nosaukumu fullName, kas balstās uz signāliem firstName un LastName. Turklāt tas definē efektu, atzvanīšanas funkciju, kas darbojas ikreiz, kad mainās tā nolasīto signālu vērtība.

Šajā gadījumā fullName vērtība ir atkarīga no FirstName un LastName, tāpēc, mainot kādu no tiem, tiek aktivizēts efekts. Ja vārda firstName vērtība ir iestatīta uz Jānis, pārlūkprogramma konsolē reģistrē šādu ziņojumu:

 Vārds mainīts: John Doe.

2. Atsevišķa Ng jaunā kolekcija

Sākot no Angular v16, jūs varat izveidot jaunus atsevišķus projektus jau no paša sākuma! Lai izmēģinātu atsevišķu shēmu izstrādātāja priekšskatījumu, pārliecinieties, vai esat instalējis Angular CLI v16, un palaidiet šo komandu:

jauns — savrups

To darot, jūs iegūsit vienkāršāku projekta struktūru bez NgModuliem. Turklāt visi projekta ģeneratori ražos atsevišķas direktīvas, komponentus un caurules!

3. Automātiska maršruta parametru kartēšana

Apsveriet maršrutēšanas konfigurāciju šādi:

eksportētkonst maršruti: maršruti = [{
 ceļš: 'meklēt:/id',
 komponents: SearchComponent,
 atrisināt: {
 meklētDetaļas: searchResolverFn
 }
}];

Pirms Angular 16 jums bija jāievada pakalpojums ActivatedRoute, lai izgūtu URL parametrus, vaicājuma parametrus vai saistītos datus konkrētam URL.

Šeit ir piemērs, kā jums tas bija jādara:

@Komponents({
 ...
})
eksportētklasē SearchComponent {
 tikai lasāms #activatedRoute = inject (ActivatedRoute);
 tikai lasāms id$ = šis.#activatedRoute.paramMap (map(parametri => params.get('id')));
 tikai lasāmi dati$ = šis.#activatedRoute.data.map(({
 meklētDetaļas
 }) => meklētDetaļas);
}

Izmantojot Angular 16, jums vairs nav jāievada pakalpojums ActivatedRoute, lai izgūtu dažādus maršruta parametrus, jo jūs varat tos saistīt tieši ar komponentu ievadiem.

Lai aktivizētu šo funkcionalitāti lietojumprogrammā, kas izmanto moduļu sistēmu, iestatiet atbilstošo vērtību RouterModule opcijās:

RouterModule.forRoot (routes, {
 bindComponentInputs: taisnība
})

Atsevišķai lietojumprogrammai tā vietā ir jāizsauc funkcija:

nodrošinātRoutes (maršruti, withComponentInputBinding());

Kad aktivizējat šo funkcionalitāti, komponents kļūst daudz vienkāršāks:

@Komponents({
 ...
})
eksportētklasē SearchComponent {
@Ievade() id!: stīga;
@Ievade() searchDetails!: SearchDetails;
}

4. Nepieciešamā ievade

Ļoti gaidīta Angular kopienas funkcija ir iespēja atzīmēt noteiktas ievades pēc vajadzības. Līdz šim jums bija jāizmanto dažādi risinājumi, piemēram, NgOnInit kļūdas parādīšana. dzīves cikls, ja mainīgais nav definēts vai komponenta atlasītāja modificēšana, lai iekļautu obligāto ievades.

Tomēr abiem šiem risinājumiem bija savas priekšrocības un trūkumi. Sākot no 16. versijas, nepieciešamās ievades noteikšana ir tikpat vienkārša kā konfigurācijas objekta nodrošināšana ievades anotācijas metadatos:

@Ievade({
 nepieciešams: taisnība
}) vārds!: stīga;

5. Vite kā izstrādātāja serveris

Angular 14 ieviesa jaunu JavaScript komplektētāju ar nosaukumu EsBuild, kas ievērojami uzlaboja izveides laiku par aptuveni 40%. Tomēr šo veiktspējas pieaugumu varēja realizēt tikai veidošanas fāzē, nevis izstrādes laikā ar izstrādātāju serveri.

Gaidāmajā Angular izlaidumā Vite veidošanas rīks ļauj izmantot EsBuild arī izstrādes laikā.

Lai aktivizētu šo līdzekli, atjauniniet veidotāja konfigurāciju failā angular.json šādi:

"arhitekts": {
"būvēt": {
"celtnieks": "@angular-devkit/build-angular: browser-esbuild",
"iespējas": {
 ...
 }
 }

Lūdzu, ņemiet vērā, ka šī funkcionalitāte joprojām ir eksperimentāla.

Attīstības pieredzes un veiktspējas uzlabošana

Angular versija 16 nodrošina aizraujošus atjauninājumus, piemēram, Angular Signals datu pārvaldībai, savrupu projektu izveide, automātiska maršruta parametru kartēšana, nepieciešamās ievades un Vites integrācija, lai uzlabotu attīstību. Šie uzlabojumi uzlabo izstrādes pieredzi un palielina lietojumprogrammu veiktspēju.