Što je novo u Angularu v16?

Angular, koji održava Google, široko je korišten okvir otvorenog koda za razvoj web aplikacija. Nudi vam robustan skup alata i niz značajki koje vam omogućuju stvaranje dinamičnih, responzivnih i skalabilnih web aplikacija.

Nedavno lansiranje Angular verzije 16 uvodi uzbudljiva ažuriranja i poboljšanja iskustva razvoja, kao i bolju izvedbu i stabilnost aplikacije.

1. Kutni signali

Kutni signali je biblioteka koja omogućuje definiranje reaktivnih vrijednosti i uspostavljanje ovisnosti među njima. Evo jednostavnog primjera kako koristiti Angular signale unutar Angular aplikacije:

@Komponenta ({
 selektor: 'moja-aplikacija',
 samostalan: pravi,
 predložak: `
{{ puno ime() }} "setName('Ivan')">Klikni</button>
`,
})
izvozrazreda Aplikacija {
 Ime = signal('Jane');
 prezime = signal('srna');
 puno ime = izračunato(() =>`${ovaj.ime()}${ovaj.prezime()}`);
konstruktor() {
 posljedica(() =>konzola.log('Ime promijenjeno:', ovaj.puno ime()));
 }
 setName (novoIme: niz) {
ovaj.firstName.set (novoIme);
 }
}

Gornji isječak koda stvara izračunatu vrijednost pod nazivom fullName, koja se oslanja na signale firstName i lastName. Dodatno, definira učinak, funkciju povratnog poziva koja se pokreće kad god se promijeni vrijednost signala koje očitava.

U ovom slučaju, vrijednost fullName ovisi o firstName i lastName, tako da promjena bilo kojeg od njih pokreće učinak. Kada je vrijednost firstName postavljena na John, preglednik zapisuje sljedeću poruku na konzolu:

 Ime promijenjeno: John Doe.

2. Samostalna nova kolekcija

Počevši od Angular v16, možete stvarati nove samostalne projekte od samog početka! Da biste isprobali razvojni pregled samostalnih shema, provjerite imate li instaliran Angular CLI v16 i pokrenite sljedeću naredbu:

ng novo --samostalno

Time ćete dobiti jednostavniju strukturu projekta bez ikakvih NgModula. Nadalje, svi generatori u projektu će proizvoditi samostalne direktive, komponente i cijevi!

3. Automatsko mapiranje parametara rute

Razmotrite konfiguraciju usmjeravanja kako slijedi:

izvozkonst rute: Rute = [{
 staza: 'traži:/id',
 komponenta: SearchComponent,
 razriješi: {
 searchDetails: searchResolverFn
 }
}];

Prije Angulara 16, morali ste ubaciti uslugu ActivatedRoute za dohvat URL parametara, parametara upita ili povezanih podataka za određeni URL.

Evo primjera kako ste to morali učiniti:

@Komponenta({
 ...
})
izvozrazreda SearchComponent {
 samo za čitanje #activatedRoute = inject (ActivatedRoute);
 samo za čitanje id$ = ovaj.#activatedRoute.paramMap (map(parametri => params.get('iskaznica')));
 podaci samo za čitanje$ = ovaj.#activatedRoute.data.map(({
 searchDetails
 }) => searchDetails);
}

Uz Angular 16 više ne morate ubacivati ​​uslugu ActivatedRoute za dohvaćanje različitih parametara rute jer ih možete vezati izravno na ulaze komponenti.

Za aktiviranje ove funkcije u aplikaciji koja koristi sustav modula, postavite odgovarajuću vrijednost u opcijama RouterModule:

RouterModule.forRoot (rute, {
 bindComponentInputs: pravi
})

Za samostalnu aplikaciju, trebate pozvati funkciju umjesto:

provideRoutes (rute, withComponentInputBinding());

Nakon što aktivirate ovu funkcionalnost, komponenta postaje puno jednostavnija:

@Komponenta({
 ...
})
izvozrazreda SearchComponent {
@Ulazni() iskaznica!: niz;
@Ulazni() searchDetails!: SearchDetails;
}

4. Potreban unos

Vrlo očekivana značajka za Angular zajednicu je mogućnost označavanja određenih unosa prema potrebi. Do sada ste morali koristiti različita rješenja da biste to postigli, poput pokretanja pogreške u NgOnInit životni ciklus ako varijabla nije definirana ili modificiranje selektora komponente da uključi obavezno ulazi.

Međutim, oba ova rješenja imala su svoje prednosti i nedostatke. Počevši od verzije 16, traženje unosa jednostavno je poput pružanja konfiguracijskog objekta u metapodacima ulazne napomene:

@Ulazni({
 potreban: pravi
}) Ime!: niz;

5. Vite kao razvojni poslužitelj

Angular 14 predstavio je novi JavaScript bundler pod nazivom EsBuild, koji je značajno poboljšao vrijeme izgradnje za približno 40%. Međutim, ovo povećanje performansi možete ostvariti samo tijekom faze izgradnje, a ne tijekom razvoja s razvojnim poslužiteljem.

U nadolazećem izdanju Angulara, alat za izradu Vite omogućuje korištenje EsBuild-a i tijekom razvoja.

Da biste aktivirali ovu značajku, ažurirajte konfiguraciju graditelja u datoteci angular.json na sljedeći način:

"arhitekt": {
"izgraditi": {
"graditelj": "@angular-devkit/build-angular: browser-esbuild",
"opcije": {
 ...
 }
 }

Imajte na umu da je ova funkcija još uvijek eksperimentalna.

Poboljšanje razvojnog iskustva i izvedbe

Angular verzija 16 donosi uzbudljiva ažuriranja kao što su Angular Signals za upravljanje podacima, samostalni projekt stvaranje, automatsko mapiranje parametara rute, potrebni inputi i integracija Vite za poboljšana razvoj. Ova poboljšanja poboljšavaju razvojno iskustvo i povećavaju performanse aplikacije.