Angular 17 Träningskurs

Introduktion till Angular 17

• Vad är Angular?
• Angular vs React vs Vue
• Översikt över Angular 17:s funktioner och arkitektur
• Installation av utvecklingsmiljön

Kom igång

• Skapa ett nytt Angular 17-projekt med Angular CLI
• Utforska projektstrukturen och filerna
• Köra och servera applikationen
• Visa data med interpolation och uttryck

Komponenter

• Förstå rollen för komponenter i Angular 17
• Skapa och använda komponenter
• Överföra data mellan komponenter med inputs och outputs
• Använda komponentlifecycle-hakar

Direktiv

• Förstå skillnaden mellan strukturella och attributdirektiv
• Skapa och använda inbyggda direktiv som ngIf, ngFor, ngSwitch m.fl.
• Skapa och använda egna direktiv

Filter

• Förstå syftet med filter i Angular 17
• Skapa och använda inbyggda filter som date, currency, json m.fl.
• Skapa och använda egna filter

Tjänster

• Förstå rollen för tjänster i Angular 17
• Skapa och använda tjänster
• Injicera beroenden med providers

Moduler

• Förstå rollen för moduler i Angular 17
• Skapa och använda moduler
• Importera och exportera moduler

Databindning

• Förstå skillnaden mellan envägs- och tvåvägsbindning
• Skapa och använda egenskapsbindning, händelsbindning och banana-in-a-box-syntax
• Använda mallreferensvariabler

Rutning

• Förstå rollen för rutning i Angular 17
• Skapa och konfigurera rutter
• Navigera mellan rutter med routerLink och router.navigate()
• Använda route-parametrar, query-parametrar och fragment

Formulär

• Förstå skillnaden mellan mallstyrda och reaktiva formulär
• Skapa och validera formulär med formulärkontroller, formulärgrupper, formularmatriser m.fl.
• Använda inbyggda validerare som required, minLength, maxLength m.fl.
• Skapa och använda egna validerare

HTTP-klient

• Förstå rollen för HTTP-klienten i Angular 17
• Skapa och använda HTTP-begäranden för att kommunicera med bakändetjänster
• Använda observables för att hantera asynkrona dataströmmar
• Använda interceptors för att ändra eller hantera HTTP-begäranden eller svar

Nytt, deklarativ kontrollflöde

• Förklara den nya syntaxen för mallkontrollblock och hur den förenklar vanliga uppgifter som villkorlig rendering, slingor och hantering av tomma samlingar
• Ge exempel på användning av nya block, såsom @if, @else, @switch, @case, @default, @for och @empty
• Jämför den nya syntaxen med den tidigare, såsom *ngIf, *ngSwitch och *ngFor
• Nämna hur nya kontrollblock stöder zoneless-applikationer med signals

Block för sen laddning

• Förklara konceptet med sen laddning och hur det kan förbättra prestanda och användarupplevelse i webbapparationer
• Introducera det nya @defer-blocket som aktiverar sen laddning av blokkinnehållet och dess beroenden
• Ge exempel på användning av @defer-blocket för olika scenarier, såsom laddning av komponenter, direktiv, filter, animationer och stilar
• Nämna hur @defer-blocket fungerar med det nya API:et för vyövergångar

API för vyövergångar

• Förklara syftet och fördelarna med API:t för vyövergångar, som tillåter utvecklare att anpassa animationer och övergångar mellan vyer
• Introducera det nya withViewTransitions-direktivet som möjliggör användning av API:t för vyövergångar
• Ge exempel på användning av withViewTransitions-direktivet med olika övergångstyper, såsom fade, slide, zoom och flip
• Nämna hur API:t för vyövergångar fungerar med Angular-router och webbläsarhistoriken

Övriga funktioner och förbättringar

• Sammanfatta kortfattat några av de andra funktioner och förbättringar som Angular 17 erbjuder, såsom:
• Stöd för att skicka in @Component.styles som en sträng
• Angulurs animationskod kan laddas sen
• Stöd för TypeScript 5.2
• Signal-API:et är nu stabilt
• Stöd för Node.js v16 har tagits bort och minsta stödda version är v18.13.0
• Esbuild blir standardbyggaren och standardutvecklingsservern kommer att använda Vite