Az Angular v16 újdonságai?

A Google által fenntartott Angular egy széles körben használt nyílt forráskódú keretrendszer webes alkalmazások fejlesztésére. Robusztus eszközkészletet és számos funkciót kínál, amelyek lehetővé teszik dinamikus, érzékeny és méretezhető webalkalmazások létrehozását.

Az Angular 16-os verzió nemrégiben való megjelenése izgalmas frissítéseket és fejlesztéseket vezet be a fejlesztési élménybe, valamint jobb alkalmazásteljesítményt és stabilitást.

1. Szögjelek

Szögjelek egy olyan könyvtár, amely lehetővé teszi a reaktív értékek meghatározását és a köztük lévő függőségek létrehozását. Íme egy egyszerű példa a szögjelek szöges alkalmazáson belüli használatára:

@Összetevő ({
 választó: "my-app",
 önálló: igaz,
 sablon: `
{{ teljes név() }} "setName('János')">Kattintson</button>
`,
})
exportosztály App {
 keresztnév = jel("Jane");
 vezetéknév = jel('Dámvadtehén');
 fullName = computed(() =>`${ez.keresztnév()}${ez.vezetéknév()}`





instagram viewer
);
konstruktőr() {
 hatás(() =>konzol.log('Név megváltozott:', ez.teljes név()));
 }
 setName (newName: húr) {
ez.firstName.set (newName);
 }
}

A fenti kódrészlet létrehoz egy fullName nevű kiszámított értéket, amely a firstName és LastName jelekre támaszkodik. Ezenkívül meghatároz egy effektust, egy visszahívási funkciót, amely akkor fut le, amikor az olvasott jelek értéke megváltozik.

Ebben az esetben a fullName értéke a keresztnévtől és a vezetéknévtől függ, így bármelyik módosítása kiváltja a hatást. Ha a firstName értéke János, a böngésző a következő üzenetet naplózza a konzolon:

 A név megváltozott: John Doe.

2. Önálló Ng új kollekció

Az Angular v16-tól kezdve már a kezdetektől új önálló projekteket hozhat létre! Az önálló séma fejlesztői előnézetének kipróbálásához ellenőrizze, hogy telepítve van-e az Angular CLI v16, és futtassa a következő parancsot:

új -- önálló

Ezzel egyszerűbb projektstruktúrát kapunk NgModulek nélkül. Ezenkívül a projektben részt vevő összes generátor önálló direktívákat, alkatrészeket és csöveket állít elő!

3. Automatikus útvonalparaméterek feltérképezése

Fontolja meg az útválasztási konfigurációt az alábbiak szerint:

exportconst útvonalak: Routes = [{
 pálya: 'keresés:/id',
 összetevő: SearchComponent,
 megoldani: {
 keresésRészletek: searchResolverFn
 }
}];

Az Angular 16 előtt be kellett illesztenie az ActivatedRoute szolgáltatást egy adott URL-hez tartozó URL-paraméterek, lekérdezési paraméterek vagy kapcsolódó adatok lekéréséhez.

Íme egy példa, hogyan kellett ezt megtennie:

@Összetevő({
 ...
})
exportosztály SearchComponent {
 csak olvasható #activatedRoute = injektálás (ActivatedRoute);
 csak olvasható id$ = ez.#activatedRoute.paramMap (map(params => params.get("azonosító")));
 csak olvasható adatok$ = ez.#activatedRoute.data.map(({
 keresés Részletek
 }) => keresésRészletek);
}

Az Angular 16-tal többé nem kell beadnia az ActivatedRoute szolgáltatást a különféle útvonalparaméterek lekéréséhez, mert közvetlenül az összetevő bemenetekhez kötheti őket.

Ennek a funkciónak a modulrendszert használó alkalmazásban történő aktiválásához állítsa be a megfelelő értéket a RouterModule beállításaiban:

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

Egy önálló alkalmazás esetén inkább egy függvényt kell meghívnia:

provideRoutes (útvonalak, withComponentInputBinding());

Ha aktiválja ezt a funkciót, az összetevő sokkal egyszerűbbé válik:

@Összetevő({
 ...
})
exportosztály SearchComponent {
@Bemenet() azonosító!: húr;
@Bemenet() keresésRészletek!: SearchDetails;
}

4. Kötelező bemenet

Az Angular közösség nagyon várt funkciója, hogy bizonyos bemeneteket szükség szerint megjelölhet. Eddig különféle megoldásokat kellett használnia ennek eléréséhez, mint például a hiba feltárása az NgOnInitben életciklus, ha a változó nincs definiálva, vagy módosítja az összetevő választóját, hogy tartalmazza a kötelezőt bemenetek.

Azonban mindkét megoldásnak megvoltak a maga előnyei és hátrányai. A 16-os verziótól kezdve a szükséges bevitel olyan egyszerű, mint egy konfigurációs objektum megadása a bemeneti megjegyzés metaadatai között:

@Bemenet({
 kívánt: igaz
}) név!: húr;

5. Vite fejlesztői szerverként

Az Angular 14 bemutatta az EsBuild nevű új JavaScript-csomagolót, amely jelentősen, körülbelül 40%-kal javította a felépítési időt. Ezt a teljesítménynövekedést azonban csak a felépítési fázisban tudta megvalósítani, a fejlesztői kiszolgálóval végzett fejlesztés során nem.

Az Angular hamarosan megjelenő kiadásában a Vite építőeszköz lehetővé teszi az EsBuild használatát a fejlesztés során is.

A funkció aktiválásához frissítse az építő konfigurációját az angular.json fájlban az alábbiak szerint:

"építészmérnök": {
"épít": {
"építész": "@angular-devkit/build-angular: browser-esbuild",
"lehetőségek": {
 ...
 }
 }

Felhívjuk figyelmét, hogy ez a funkció még kísérleti jellegű.

A fejlesztési tapasztalat és teljesítmény javítása

Az Angular 16-os verzió olyan izgalmas frissítéseket tartalmaz, mint az Angular Signals az adatok kezeléséhez, önálló projekt létrehozása, automatikus útvonalparaméter-leképezés, szükséges bemenetek és a Vite integrációja a továbbfejlesztéshez fejlesztés. Ezek a fejlesztések javítják a fejlesztési élményt és növelik az alkalmazások teljesítményét.