Vad är nytt i Angular v16?

Angular, som underhålls av Google, är ett allmänt använt ramverk med öppen källkod för att utveckla webbapplikationer. Den erbjuder dig en robust verktygslåda och en rad funktioner som låter dig skapa dynamiska, lyhörda och skalbara webbapplikationer.

Den senaste lanseringen av Angular version 16 introducerar spännande uppdateringar och förbättringar av utvecklingsupplevelsen, samt bättre applikationsprestanda och stabilitet.

1. Vinkelsignaler

Vinkelsignaler är ett bibliotek som möjliggör definition av reaktiva värden och upprättande av beroenden mellan dem. Här är ett enkelt exempel på hur man använder Angular Signals i en Angular-applikation:

@Komponent ({
 väljare: 'min-app',
 fristående: Sann,
 mall: `
{{ fullständiga namn() }} "setName('John')">Klicka</button>
`,
})
exporteraklass App {
 förnamn = signal("Jane");
 efternamn = signal('Hind');
 fullnamn = beräknat(() =>`${detta.förnamn()}${detta.efternamn()}`





instagram viewer
);
konstruktör() {
 effekt(() =>trösta.logga('Namn ändrat:', detta.fullständiga namn()));
 }
 setName (newName: sträng) {
detta.firstName.set (nyttnamn);
 }
}

Ovanstående kodsnutt skapar ett beräknat värde som kallas fullName, som bygger på signalerna firstName och lastName. Dessutom definierar den en effekt, en återuppringningsfunktion som körs när värdet på signalerna den läser ändras.

I det här fallet beror fullName-värdet på firstName och lastName, så att ändra någon av dem utlöser effekten. När värdet för firstName är satt till John loggar webbläsaren följande meddelande till konsolen:

 Namn ändrat: John Doe.

2. Fristående Ng Ny kollektion

Från Angular v16 kan du skapa nya fristående projekt redan från början! För att prova utvecklarförhandsvisningen av det fristående schemat, se till att du har Angular CLI v16 installerat och kör följande kommando:

ng ny --fristående

Genom att göra detta får du en enklare projektstruktur utan några NgModules. Dessutom kommer alla generatorer i projektet att producera fristående direktiv, komponenter och rör!

3. Automatisk kartläggning av ruttparametrar

Överväg en routingkonfiguration enligt följande:

exporterakonst rutter: Rutter = [{
 väg: 'search:/id',
 komponent: SearchComponent,
 lösa: {
 searchDetails: searchResolverFn
 }
}];

Före Angular 16 behövde du injicera ActivatedRoute-tjänsten för att hämta URL-parametrar, frågeparametrar eller tillhörande data för en viss URL.

Här är ett exempel på hur du var tvungen att göra det:

@Komponent({
 ...
})
exporteraklass Sökkomponent {
 skrivskyddad #activatedRoute = injicera (ActivatedRoute);
 skrivskyddad id$ = detta.#activatedRoute.paramMap (karta(params => params.get('id')));
 skrivskyddad data$ = detta.#activatedRoute.data.map(({
 sökdetaljer
 }) => sökdetaljer);
}

Med Angular 16 behöver du inte längre injicera ActivatedRoute-tjänsten för att hämta olika ruttparametrar eftersom du kan binda dem direkt till komponentingångar.

För att aktivera den här funktionen i en applikation som använder modulsystemet, ställ in motsvarande värde i RouterModule-alternativen:

RouterModule.forRoot (rutter, {
 bindComponentInputs: Sann
})

För en fristående applikation måste du anropa en funktion istället:

provideRoutes (rutter, withComponentInputBinding());

När du aktiverar den här funktionen blir komponenten mycket enklare:

@Komponent({
 ...
})
exporteraklass Sökkomponent {
@Inmatning() id!: sträng;
@Inmatning() searchDetails!: SearchDetails;
}

4. Obligatorisk ingång

En mycket efterlängtad funktion för Angular-communityt är möjligheten att markera vissa ingångar efter behov. Fram till nu har du behövt använda olika lösningar för att uppnå detta, som att ta upp ett fel i NgOnInit livscykel om variabeln inte var definierad eller modifiering av komponentens väljare för att inkludera det obligatoriska ingångar.

Båda dessa lösningar hade dock sina fördelar och nackdelar. Från och med version 16 är det så enkelt att kräva att en inmatning krävs som att tillhandahålla ett konfigurationsobjekt i metadata för ingångskommentaren:

@Inmatning({
 nödvändig: Sann
}) namn!: sträng;

5. Vite som Dev Server

Angular 14 introducerade en ny JavaScript-bundler kallad EsBuild, som avsevärt förbättrade byggtiderna med cirka 40 %. Du kunde dock bara realisera denna prestandavinst under byggfasen och inte under utveckling med utvecklarservern.

I den kommande releasen av Angular, byggverktyget Vite möjliggör användning av EsBuild även under utveckling.

För att aktivera den här funktionen uppdaterar du byggarkonfigurationen i filen angular.json enligt följande:

"arkitekt": {
"bygga": {
"byggare": "@angular-devkit/build-angular: browser-esbuild",
"alternativ": {
 ...
 }
 }

Observera att denna funktion fortfarande är experimentell.

Förbättra utvecklingsupplevelse och prestanda

Angular version 16 ger spännande uppdateringar som Angular Signals för att hantera data, fristående projekt skapande, automatisk kartläggning av ruttparametrar, nödvändiga indata och integration av Vite för förbättrad utveckling. Dessa förbättringar förbättrar utvecklingsupplevelsen och ökar applikationens prestanda.