Angular 18 släpptes den 22 maj 2024! Den nya versionen erbjuder ett antal förbättringar och en massa nya funktioner som avsevärt förbättrar hur man bygger webbapplikationer med Angular. Version innehåller många stabiliserade APIer och introducerar nya funktioner som är utformade för att förenkla användningen av ramverket, effektivisera utvecklarens arbetsflöden och öka prestandan. I den här artikeln kommer vi att gå igenom de viktigaste funktionerna i Angular 18 och hur de kan förändra och förbättra dina webbprojekt.
Ny kontrollflödessyntax
En av de största förändringarna i Angular 18 är den nya kontrollflödessyntaxen. Detta förenklar hanteringen av mallar genom att integrera kontrollflödet direkt i Angulars mallkompilator. Traditionella strukturdirektiv som ngIf, ngFor och ngSwitch kan nu ersättas med en mer intuitiv syntax.
Exempel:
<!- Tidigare ->
<div *ngIf="user">{{ user.name }}</div>
<!- Angular 18 ->
@if(user) {
<div>{{ user.name }}</div>
}Detsamma gäller ngSwitch och ngFor :
Exempel:
@switch (condition) {
@case (caseA) {
Case A.
}
@case (caseB) {
Case B.
}
@default {
Default case.
}
}Fördelar:
– Kräver inte ett containerelement för att hålla villkorsuttrycket eller varje villkorsmall
– Stöder typkontroll av mallar, inklusive typbegränsning inom varje gren.
Exempel:
@for (item of items; track item.name) {
<li>{{ item.name }}</li>
} @empty {
<li>There are no items.</li>
}Fördelar:
– spårningsuttryck (beräkning av nycklar som motsvarar objektidentiteter) är obligatoriskt men har bättre ergonomi (det räcker att skriva ett uttryck istället för att skapa trackBy-metoden)
– använder en ny optimerad algoritm för att beräkna ett minimalt antal DOM-operationer som ska utföras som svar på ändringar i en samling, istället för Angular’s anpassningsbara diffing-implementering (IterableDiffer)
– har stöd för @empty block.
Migration:
För att migrera till denna nya syntax, använd de tillhandahållna schemana:
ng g @angular/core:control-flow
Dessutom förbättrar den nya @for-syntaxen, som ersätter ngFor, effektiviteten i list-rendering genom att använda en spårningsnyckel för att undvika onödiga DOM-uppdateringar.
Förbättrad defer-syntax
@defer-syntaxen har också nått stabilitet i Angular 18, vilket möjliggör för utvecklare att villkorligt ladda innehåll med “lazy-loading”. Denna funktion är särskilt användbar för att optimera laddningstider och hantera resurser effektivt.
@defer(when user.name === 'Angular') {
<app-angular-details />
} @placeholder {
<div>Loading...</div>
} @loading(after: 100ms; minimum 1s) {
<app-loader />
} @error {
<app-error />
}Denna syntax tillåter specifikation av platshållare, laddningstillstånd och felhantering direkt i mallen, vilket erbjuder ett kraftfullt sätt att hantera asynkront innehåll.
Zonlös förändringsdetektering med signaler
Angular 18 introducerar en banbrytande men ännu experimentell funktion: zonlös förändringsdetektering med signaler. Tidigare förlitade sig Angular på Zone.js för förändringsdetektering, vilket kunde innebära overhead. Den nya zonlösa metoden använder signaler, lätta observables som triggar förändringsdetektering endast när det är nödvändigt, vilket leder till betydande prestandaförbättringar.
Aktivera zonlös förändringsdetektering
För att använda den nya schemaläggaren utan Zone.js:
Exempel:
bootstrapApplication(AppComponent, {
providers: [provideExperimentalZonelessChangeDetection()]
});Denna förändring minskar beroenden och förbättrar responsiviteten i Angular-applikationer.
Funktionsbaserade omdirigeringar i router
Routning i Angular blir mer dynamisk med funktionsbaserade omdirigeringar. Denna funktion tillåter utvecklare att använda funktioner för redirectTo-egenskapen, vilket möjliggör mer flexibel och kontextmedveten navigering.
Exempel:
const routes: Routes = [
{ path: '', redirectTo: (route: ActivatedRouteSnapshot) => {
const queryParams = route.queryParams;
return queryParams['mode'] === 'legacy' ? '/home-legacy' : '/home';
}, pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'home-legacy', component: HomeLegacyComponent }
];
Denna funktionalitet tillåter hämtning av parametrar och query-parametrar, vilket ger en mer granulär kontroll över navigeringslogiken.
HttpClientModule ersätts av provideHttpClient
HttpClientModule är nu borttagen och ersatt med den nya funktionen provideHttpClient. Denna förändring förenklar inställningen av HTTP-klienter och ligger i linje med Angulars övergång till fristående komponenter.
Migration:
bootstrapApplication(AppComponent, {
providers: [provideHttpClient()]
});Denna uppdatering minskar modulberoenden och förenklar applikationskonfigurationen.
Förbättrad ng-content med fallback
Angulars ng-content-tagg stöder nu standardinnehåll, som visas när inget innehåll tillhandahålls. Denna förbättring är särskilt användbar för att skapa mer robusta och användarvänliga komponenter.
Exempel:
<button>
<ng-content select=".icon">
<i aria-hidden="true" class="material-icons">send</i>
</ng-content>
<ng-content>Default Button Text</ng-content>
</button>Denna funktion säkerställer att komponenter alltid visar meningsfullt innehåll, även om det inte uttryckligen tillhandahålls.
Enhetliga formhändelser
Angular 18 introducerar en enhetlig händelseegenskap för formulärkontroller, som grupperar händelser som pristine, touched, status change, reset och submit till en enda observable. Denna förbättring förenklar hanteringen av formulärhändelser och förbättrar reaktiviteten.
Exempel:
@Component()
export class AppComponent {
login = new FormControl(null);
constructor() {
this.login.events.subscribe(event => {
if (event instanceof TouchedChangeEvent) {
console.log(event.touched);
} else if (event instanceof PristineChangeEvent) {
console.log(event.pristine);
} else if (event instanceof StatusChangeEvent) {
console.log(event.status);
} else if (event instanceof ValueChangeEvent) {
console.log(event.value);
} else if (event instanceof FormResetEvent) {
console.log('Reset');
} else if (event instanceof FormSubmitEvent) {
console.log('Submit');
}
});
}
}Denna enhetliga metod förbättrar utvecklarens upplevelse genom att erbjuda ett konsekvent och enkelt sätt att hantera formulärrelaterade händelser.
Förbättringar i server-side rendering
Angular 18 introducerar två viktiga förbättringar för server-side rendering (SSR): händelseuppspelning och internationalisering (i18n) support. Händelseuppspelning säkerställer att användarinteraktioner under hydreringen fångas och spelas upp när applikationen är fullt interaktiv, vilket förbättrar användarupplevelsen. Dessutom säkerställer i18n-support i SSR sömlös internationalisering, vilket gör det enklare att bygga globalt redo applikationer.
Aktivera SSR-förbättringar:
providers: [
provideClientHydration(withReplayEvents()),
provideClientHydration(withI18nSupport())
]Dessa funktioner förbättrar stabiliteten och användbarheten av SSR i Angular-applikationer.
Förbättrade utvecklarverktyg
Angular 18 har förbättrar utvecklarverktygen med bättre förståelse och felsökningsmöjligheter. Angular DevTools-tillägget erbjuder nu förbättrade prestandamått, beroendehantering och spårning av statusändringar, vilket gör det enklare att felsöka och optimera applikationer.
Uppgradera till Angular 18
För att uppdatera från tidigare versioner av Angular till Angular 18 behöver du först kontrollera kompatibiliteten hos alla beroenden och tredjepartspaket. Därefter uppdaterar du Angular CLI och Angular Core, hanterar avskrivningen av HttpClientModule genom att byta till provideHttpClient-funktionen, och migrerar din kod till den nya kontrollflödessyntaxen. Om du vill kan du nu implementera zonlös förändringsdetektering för att förbättra prestandan. Det är också viktigt att uppdatera till funktionsbaserade omdirigeringar för mer flexibel routing och förbättra komponenterna med fallback-innehåll i ng-content. Förbättringar i server-side rendering bör också övervägas, inklusive händelseuppspelning och internationalisering. Se till att använda den senaste versionen av TypeScript som stöds av Angular 18, testa din applikation noggrant efter uppdateringen och bygg och distribuera den slutligen när allt fungerar som det ska.
Sammanfattning Angular 18
Angular 18 är en omfattande release som erbjuder en mängd nya funktioner och förbättringar designade för att förbättra utvecklarupplevelsen och applikationens prestanda. Från den nya kontrollflödes- och defer-syntaxen till zonlös förändringsdetektering och förbättrad SSR, dessa uppdateringar ger utvecklare verktygen för att bygga mer effektiva, robusta och användarvänliga applikationer. Att uppgradera till Angular 18 lovar att strömlinjeforma ditt utvecklingsarbete och låsa upp nya möjligheter för dina webbprojekt.
Genom att integrera dessa nya funktioner kan utvecklare dra full nytta av Angular 18 kapaciteter, vilket säkerställer att deras applikationer är moderna, skalbara och redo att möta dagens webbplatsanvändares krav. Oavsett om du arbetar på ett nytt projekt eller uppgraderar ett befintligt, erbjuder Angular 18 de verktyg och förbättringar som behövs för att ta din webbapplikationsutveckling till nästa nivå.
Eftersom jag inte är säker på översättning av en del tekniska termer från engelska vill jag be om ursäkt på förhand om jag missat något. Jag är tacksam för feedback. Jag vill också tacka för hjälp med teknisk feedback från min duktige indiske medarbetare Aravind. Men eftersom han inte förstår svenska så är eventuella språkfel helt och hållet mina!
Behöver du hjälp?
Om du behöver hjälp med att uppgradera till Angular, tveka inte att kontakta oss på Gislen Software. Vi har expertkompetens och erfarenhet som krävs för att säkerställa en smidig och effektiv uppdateringsprocess. Oavsett om du står inför tekniska utmaningar eller behöver strategisk vägledning, finns vi här för att hjälpa dig att nå dina mål. Kontakta oss idag för att diskutera hur vi kan stödja din uppgradering!