Čo je nové v Angular v16?

Angular, spravovaný spoločnosťou Google, je široko používaný open-source framework na vývoj webových aplikácií. Ponúka vám robustnú súpravu nástrojov a celý rad funkcií, ktoré vám umožnia vytvárať dynamické, responzívne a škálovateľné webové aplikácie.

Nedávne spustenie Angular verzie 16 predstavuje vzrušujúce aktualizácie a vylepšenia vývoja, ako aj lepší výkon a stabilitu aplikácií.

1. Uhlové signály

Uhlové signály je knižnica, ktorá umožňuje definovanie reaktívnych hodnôt a vytváranie závislostí medzi nimi. Tu je jednoduchý príklad, ako využiť uhlové signály v rámci aplikácie Angular:

@Component ({
 selektor: „moja aplikácia“,
 samostatný: pravda,
 šablóna: `
{{ celé meno() }} "setName('John')">Kliknite</button>
`,
})
exporttrieda Aplikácia {
 krstné meno = signál('Jane');
 priezvisko = signál('Laň');
 celé meno = vypočítané (() =>`${toto.krstné meno()}${toto.priezvisko()}`);
konštruktér() {
 efekt(





instagram viewer

() =>konzoly.log('Názov zmenený:', toto.celé meno()));
 }
 setName (newName: reťazec) {
toto.firstName.set (newName);
 }
}

Vyššie uvedený útržok kódu vytvorí vypočítanú hodnotu s názvom fullName, ktorá sa spolieha na signály meno a priezvisko. Okrem toho definuje efekt, funkciu spätného volania, ktorá sa spustí vždy, keď sa zmení hodnota signálov, ktoré číta.

V tomto prípade hodnota fullName závisí od krstného mena a priezviska, takže zmena ktoréhokoľvek z nich spustí efekt. Keď je hodnota firstName nastavená na John, prehliadač zaznamená do konzoly nasledujúcu správu:

 Meno zmenené: John Doe.

2. Samostatná nová kolekcia Ng

Od Angular v16 môžete vytvárať nové samostatné projekty hneď od začiatku! Ak chcete vyskúšať náhľad vývojára na samostatné schémy, uistite sa, že máte nainštalovaný Angular CLI v16 a spustite nasledujúci príkaz:

ng nové --samostatné

Týmto spôsobom získate jednoduchšiu štruktúru projektu bez akýchkoľvek modulov NgModules. Okrem toho všetky generátory v projekte vytvoria samostatné smernice, komponenty a potrubia!

3. Automatické mapovanie parametrov trasy

Zvážte konfiguráciu smerovania nasledovne:

exportkonšt trasy: Trasy = [{
 cesta: 'hľadať:/id',
 komponent: SearchComponent,
 vyriešiť: {
 searchDetails: searchResolverFn
 }
}];

Pred Angular 16 ste potrebovali vložiť službu ActivatedRoute na získanie parametrov URL, parametrov dotazu alebo súvisiacich údajov pre konkrétnu adresu URL.

Tu je príklad, ako ste to museli urobiť:

@Component({
 ...
})
exporttrieda SearchComponent {
 readonly #activatedRoute = inject (ActivatedRoute);
 ID iba na čítanie $ = toto.#activatedRoute.paramMap (map(parametre => params.get('id')));
 údaje len na čítanie $ = toto.#activatedRoute.data.map(({
 hľadaťPodrobnosti
 }) => hľadaťPodrobnosti);
}

S Angular 16 už nemusíte vkladať službu ActivatedRoute na získanie rôznych parametrov trasy, pretože ich môžete naviazať priamo na vstupy komponentov.

Ak chcete aktivovať túto funkciu v aplikácii, ktorá používa modulový systém, nastavte príslušnú hodnotu v možnostiach RouterModule:

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

Pre samostatnú aplikáciu musíte namiesto toho zavolať funkciu:

provideRoutes (trasy, withComponentInputBinding());

Po aktivácii tejto funkcie sa komponent stane oveľa jednoduchším:

@Component({
 ...
})
exporttrieda SearchComponent {
@Vstup() id!: reťazec;
@Vstup() searchDetails!: SearchDetails;
}

4. Požadovaný vstup

Veľmi očakávanou funkciou pre komunitu Angular je možnosť označiť určité vstupy podľa potreby. Doteraz ste na dosiahnutie tohto cieľa museli používať rôzne riešenia, ako napríklad vyvolanie chyby v NgOnInit životný cyklus, ak premenná nebola definovaná, alebo úpravou selektora komponentu tak, aby obsahoval povinné vstupy.

Obe tieto riešenia však mali svoje výhody aj nevýhody. Počnúc verziou 16 je vyžadovanie vstupu také jednoduché ako poskytnutie konfiguračného objektu v metadátach anotácie vstupu:

@Vstup({
 požadovaný: pravda
}) názov!: reťazec;

5. Vite ako Dev Server

Angular 14 predstavil nový balík JavaScript s názvom EsBuild, ktorý výrazne skrátil dobu zostavovania približne o 40 %. Tento nárast výkonu však môžete realizovať iba počas fázy zostavovania a nie počas vývoja s dev serverom.

V nadchádzajúcom vydaní Angular, nástroj na zostavovanie Vite umožňuje používať EsBuild aj počas vývoja.

Ak chcete aktivovať túto funkciu, aktualizujte konfiguráciu nástroja Builder v súbore angular.json takto:

"architekt": {
"stavať": {
"staviteľ": "@angular-devkit/build-angular: browser-esbuild",
"možnosti": {
 ...
 }
 }

Upozorňujeme, že táto funkcia je stále experimentálna.

Zlepšenie skúseností s vývojom a výkonu

Angular verzia 16 prináša vzrušujúce aktualizácie, ako sú Angular Signals pre správu dát, samostatný projekt vytváranie, automatické mapovanie parametrov trasy, požadované vstupy a integrácia Vite pre vylepšenie rozvoj. Tieto vylepšenia zlepšujú skúsenosti s vývojom a zvyšujú výkon aplikácií.