Co je nového v Angular v16?

Angular, spravovaný společností Google, je široce používaný open-source framework pro vývoj webových aplikací. Nabízí vám robustní sadu nástrojů a řadu funkcí, které vám umožní vytvářet dynamické, responzivní a škálovatelné webové aplikace.

Nedávné uvedení Angular verze 16 představuje vzrušující aktualizace a vylepšení vývojového prostředí a také lepší výkon a stabilitu aplikací.

1. Úhlové signály

Úhlové signály je knihovna, která umožňuje definici reaktivních hodnot a vytváření závislostí mezi nimi. Zde je jednoduchý příklad, jak využít úhlové signály v aplikaci Angular:

@Komponent ({
 volič: 'moje aplikace',
 samostatný: skutečný,
 šablona: `
{{ celé jméno() }} "setName('John')">Klikněte</button>
`,
})
vývoznítřída Aplikace {
 jméno = signál('Jane');
 prijmeni = signal('Srna');
 celé jméno = vypočítané (() =>`${tento.jméno()}${tento.příjmení()}`);
konstruktér() {
 účinek(() =>řídicí panel.log('Jméno změněno:', tento.celé jméno()));
 }
 setName (newName: tětiva) {
tento.firstName.set (newName);
 }
}

Výše uvedený fragment kódu vytvoří vypočítanou hodnotu nazvanou celé jméno, která se opírá o signály jméno a příjmení. Navíc definuje efekt, funkci zpětného volání, která se spustí vždy, když se změní hodnota čtených signálů.

V tomto případě závisí hodnota fullName na křestním jménu a příjmení, takže změna kteréhokoli z nich spustí efekt. Když je hodnota firstName nastavena na Jan, prohlížeč zaprotokoluje do konzole následující zprávu:

 Jméno změněno: John Doe.

2. Samostatná Ng Nová kolekce

Od Angular v16 můžete vytvářet nové samostatné projekty hned od začátku! Chcete-li vyzkoušet vývojářský náhled samostatných schémat, ujistěte se, že máte nainstalovaný Angular CLI v16, a spusťte následující příkaz:

ng nové --samostatné

Tímto způsobem získáte jednodušší strukturu projektu bez jakýchkoliv modulů NgModules. Kromě toho budou všechny generátory v projektu produkovat samostatné směrnice, komponenty a potrubí!

3. Automatické mapování parametrů trasy

Zvažte konfiguraci směrování takto:

vývozníkonst routes: Routes = [{
 cesta: 'hledat:/id',
 komponenta: SearchComponent,
 vyřešit: {
 searchDetails: searchResolverFn
 }
}];

Před Angular 16 jste potřebovali vložit službu ActivatedRoute k načtení parametrů URL, parametrů dotazu nebo přidružených dat pro konkrétní URL.

Zde je příklad, jak jste to museli udělat:

@Komponent({
 ...
})
vývoznítřída SearchComponent {
 readonly #activatedRoute = inject (ActivatedRoute);
 id pouze pro čtení $ = tento.#activatedRoute.paramMap (map(parametry => params.get('id')));
 data pouze pro čtení$ = tento.#activatedRoute.data.map(({
 hledatPodrobnosti
 }) => hledatPodrobnosti);
}

S Angular 16 již nemusíte vkládat službu ActivatedRoute k načtení různých parametrů trasy, protože je můžete svázat přímo se vstupy komponent.

Chcete-li aktivovat tuto funkci v aplikaci, která používá modulový systém, nastavte odpovídající hodnotu v možnostech RouterModule:

RouterModule.forRoot (trasy, {
 bindComponentInputs: skutečný
})

U samostatné aplikace musíte místo toho zavolat funkci:

poskytovatRoutes (trasy, withComponentInputBinding());

Jakmile tuto funkci aktivujete, komponenta se stane mnohem jednodušší:

@Komponent({
 ...
})
vývoznítřída SearchComponent {
@Vstup() id!: tětiva;
@Vstup() searchDetails!: SearchDetails;
}

4. Požadovaný vstup

Velmi očekávanou funkcí pro komunitu Angular je možnost označit určité vstupy jako požadované. Až dosud jste k dosažení tohoto cíle museli používat různá řešení, jako je vyvolání chyby v NgOnInit životního cyklu, pokud proměnná nebyla definována, nebo úpravou selektoru komponenty tak, aby zahrnoval povinné vstupy.

Obě tato řešení však měla své výhody i nevýhody. Počínaje verzí 16 je vyžadování vstupu stejně jednoduché jako poskytnutí konfiguračního objektu v metadatech vstupní anotace:

@Vstup({
 Požadované: skutečný
}) název!: tětiva;

5. Vite jako Dev Server

Angular 14 představil nový balíček JavaScriptu nazvaný EsBuild, který výrazně zkrátil dobu sestavení přibližně o 40 %. Tento nárůst výkonu však můžete realizovat pouze během fáze sestavení a nikoli během vývoje s dev serverem.

V nadcházející verzi Angular, sestavení nástroje Vite umožňuje použití EsBuild i během vývoje.

Chcete-li tuto funkci aktivovat, aktualizujte konfiguraci builderu v souboru angular.json následovně:

"architekt": {
"stavět": {
"stavitel": "@angular-devkit/build-angular: browser-esbuild",
"možnosti": {
 ...
 }
 }

Upozorňujeme, že tato funkce je stále experimentální.

Zlepšení zkušeností s vývojem a výkonu

Angular verze 16 přináší vzrušující aktualizace jako Angular Signals pro správu dat, samostatný projekt vytvoření, automatické mapování parametrů trasy, požadované vstupy a integrace Vite pro vylepšené rozvoj. Tato vylepšení zlepšují vývojové prostředí a zvyšují výkon aplikací.