Hva er nytt i Angular v16?

Angular, vedlikeholdt av Google, er et mye brukt åpen kildekode-rammeverk for utvikling av nettapplikasjoner. Den tilbyr deg et robust verktøysett og en rekke funksjoner som lar deg lage dynamiske, responsive og skalerbare nettapplikasjoner.

Den nylige lanseringen av Angular versjon 16 introduserer spennende oppdateringer og forbedringer av utviklingsopplevelsen, samt bedre applikasjonsytelse og stabilitet.

1. Vinkelsignaler

Vinkelsignaler er et bibliotek som muliggjør definisjon av reaktive verdier og etablering av avhengigheter mellom dem. Her er et enkelt eksempel på hvordan du bruker Angular Signals i en Angular-applikasjon:

@Komponent ({
 velger: 'min-appen',
 frittstående: ekte,
 mal: `
{{ fullt navn() }} "setName('John')">Klikk</button>
`,
})
eksportklasse App {
 fornavn = signal('Jane');
 etternavn = signal('Doe');
 fullt navn = beregnet(() =>`${dette.fornavn()}${dette.etternavn()}`);
konstruktør





instagram viewer
() {
 effekt(() =>konsoll.Logg('Navn endret:', dette.fullt navn()));
 }
 setName (newName: streng) {
dette.fornavn.sett (nyttnavn);
 }
}

Kodebiten ovenfor oppretter en beregnet verdi kalt fullName, som er avhengig av signalene fornavn og etternavn. I tillegg definerer den en effekt, en tilbakeringingsfunksjon som kjører hver gang verdien på signalene den leser endres.

I dette tilfellet avhenger fullName-verdien av fornavn og etternavn, så endring av en av dem utløser effekten. Når verdien av fornavn er satt til John, logger nettleseren følgende melding til konsollen:

 Navn endret: John Doe.

2. Frittstående Ng Ny samling

Fra Angular v16 kan du lage nye frittstående prosjekter helt fra begynnelsen! For å prøve utviklerforhåndsvisningen av det frittstående skjemaet, sørg for at du har installert Angular CLI v16 og kjør følgende kommando:

ng ny --frittstående

Ved å gjøre dette får du en enklere prosjektstruktur uten noen NgModules. Videre vil alle generatorene i prosjektet produsere frittstående direktiver, komponenter og rør!

3. Automatisk kartlegging av ruteparametere

Vurder en rutekonfigurasjon som følger:

eksportkonst ruter: Ruter = [{
 sti: 'søk:/id',
 komponent: SearchComponent,
 løse: {
 searchDetails: searchResolverFn
 }
}];

Før Angular 16 måtte du injisere ActivatedRoute-tjenesten for å hente URL-parametere, spørringsparametere eller tilknyttede data for en bestemt URL.

Her er et eksempel på hvordan du måtte gjøre det:

@Komponent({
 ...
})
eksportklasse SearchComponent {
 skrivebeskyttet #activatedRoute = injiser (ActivatedRoute);
 skrivebeskyttet id$ = dette.#activatedRoute.paramMap (kart(params => params.get('id')));
 skrivebeskyttet data$ = dette.#activatedRoute.data.map(({
 søk Detaljer
 }) => søkdetaljer);
}

Med Angular 16 trenger du ikke lenger injisere ActivatedRoute-tjenesten for å hente ulike ruteparametere fordi du kan binde dem direkte til komponentinnganger.

For å aktivere denne funksjonaliteten i en applikasjon som bruker modulsystemet, angi tilsvarende verdi i rutermodulalternativene:

RouterModule.forRoot (ruter, {
 bindComponentInputs: ekte
})

For en frittstående applikasjon må du kalle en funksjon i stedet:

provideRoutes (ruter, withComponentInputBinding());

Når du aktiverer denne funksjonaliteten, blir komponenten mye enklere:

@Komponent({
 ...
})
eksportklasse SearchComponent {
@Input() id!: streng;
@Input() searchDetails!: SearchDetails;
}

4. Nødvendig inndata

En svært etterlengtet funksjon for Angular-fellesskapet er muligheten til å merke visse innganger etter behov. Inntil nå har du måttet bruke ulike løsninger for å oppnå dette, for eksempel å ta opp en feil i NgOnInit livssyklus hvis variabelen ikke var definert eller modifisering av komponentens velger for å inkludere den obligatoriske innganger.

Begge disse løsningene hadde imidlertid sine fordeler og ulemper. Fra og med versjon 16 er det så enkelt å kreve inn en inndata som å gi et konfigurasjonsobjekt i metadataene til inngangsannoteringen:

@Input({
 nødvendig: ekte
}) Navn!: streng;

5. Vite som utviklerserver

Angular 14 introduserte en ny JavaScript-bunter kalt EsBuild, som betydelig forbedret byggetiden med omtrent 40 %. Du kan imidlertid bare realisere denne ytelsesgevinsten under byggefasen og ikke under utvikling med utviklerserveren.

I den kommende utgivelsen av Angular, Vite byggeverktøyet muliggjør bruk av EsBuild under utvikling også.

For å aktivere denne funksjonen, oppdater byggherrekonfigurasjonen i angular.json-filen som følger:

"arkitekt": {
"bygge": {
"bygger": "@angular-devkit/build-angular: nettleser-esbuild",
"alternativer": {
 ...
 }
 }

Vær oppmerksom på at denne funksjonaliteten fortsatt er eksperimentell.

Forbedre utviklingserfaring og ytelse

Angular versjon 16 gir spennende oppdateringer som Angular Signals for håndtering av data, frittstående prosjekt opprettelse, automatisk kartlegging av ruteparametere, nødvendige innganger og integrasjon av Vite for forbedret utvikling. Disse forbedringene forbedrer utviklingsopplevelsen og øker applikasjonsytelsen.