Angular 17 Treningskurs

Introduksjon til Angular 17

• Hva er Angular?
• Angular vs React vs Vue
• Oversikt over funksjoner og arkitektur i Angular 17
• Oppsett av utviklingsmiljø

Kom i gang

• Oppretting av et nytt Angular 17-prosjekt ved hjelp av Angular CLI
• Eksplisitering av prosjektstruktur og filer
• Kjører og serverer applikasjonen
• Vising av data ved hjelp av interpolasjon og uttrykk

Komponenter

• Forståelse av rollen til komponenter i Angular 17
• Oppretting og bruk av komponenter
• Overføring av data mellom komponenter ved hjelp av inputs og outputs
• Bruke komponent-livssyklus-haeker

Direkter

• Forståelse av forskjellen mellom strukturelle og attributt-direkter
• Oppretting og bruk av innebygde direkter som ngIf, ngFor, ngSwitch, osv.
• Oppretting og bruk av tilpassede direkter

Pipes

• Forståelse formålet med pipes i Angular 17
• Oppretting og bruk av innebygde pipes som date, currency, json, osv.
• Oppretting og bruk av tilpassede pipes

Tjenester

• Forståelse av rollen til tjenester i Angular 17
• Oppretting og bruk av tjenester
• Injeksjon av avhengigheter ved hjelp av providers

Moduler

• Forståelse av rollen til moduler i Angular 17
• Oppretting og bruk av moduler
• Importering og eksportering av moduler

Databinding

• Forståelse av forskjellen mellom énetretts og to-rettet databinding
• Oppretting og bruk av eigenskapbinding, hendelsesbinding og banana-in-a-box syntaks
• Bruke templates referansvariabler

Ruting

• Forståelse av rollen til ruting i Angular 17
• Oppretting og konfigurering av ruter
• Navigering mellom ruter ved hjelp av routerLink og router.navigate()
• Bruke rute-parametre, spørringsparametre og fragmenter

Formularer

• Forståelse av forskjellen mellom mal-drevne og reaktive formularer
• Oppretting og validering av formularer ved hjelp av formularkontroller, formulargrupper, formularrader, osv.
• Bruke innebygde validerere som required, minLength, maxLength, osv.
• Oppretting og bruk av tilpassede validerere

HTTP-klient

• Forståelse av rollen til HTTP-klienten i Angular 17
• Oppretting og bruk av HTTP-forespørsler for å kommunisere med bakkant-tjenester
• Bruke observables for å håndtere asynkrone datastrømmer
• Bruke interceptors for å endre eller håndtere HTTP-forespørsler eller respons

Den nye, deklarativen kontrollstrømmen

• Forklar den nye templatesyntaksen for kontrollblokker og hvordan den forenkler vanlige oppgaver som kondisjonell visning, looping og håndtering av tomme samlinger
• Gir eksempler på bruk av de nye blokkene, som @if, @else, @switch, @case, @default, @for og @empty
• Sammenligner den nye syntaksen med den forrige, som *ngIf, *ngSwitch og *ngFor
• Nevner hvordan de nye kontrollblokkene støtter zoneless applikasjoner med signals

Deferred loading blokker

• Forklar konseptet om late loading og hvordan det kan forbedre ytelsen og brukeropplevelsen av webapplikasjoner
• Innfører den nye @defer-kontrollblokken som muliggjør late loading av blokkens innhold og dens avhengigheter
• Gir eksempler på bruk av @defer-blokk for ulike scenarier, som lasting av komponenter, direkter, pipes, animasjoner og stiler
• Nevner hvordan @defer-blokk fungerer med den nye view transitions API

View Transitions API

• Forklar formålet og fordelene med view transitions API, som lar utviklere tilpasse animasjoner og overganger mellom visninger
• Innfører den nye withViewTransitions-direkten som muliggjør bruk av view transitions API
• Gir eksempler på bruk av withViewTransitions-direkten med ulike overgangstyper, som fade, slide, zoom og flip
• Nevner hvordan view transitions API fungerer med Angular-routeren og nettleserhistorikk

Andre funksjoner og forbedringer

• Kort oppsummerer noen av de andre funksjonene og forbedringene som Angular 17 tilbyr, som:
• Støtte for å overføre @Component.styles som en streng
• Angulards animasjonskode er late-loadable
• Støtte for TypeScript 5.2
• Kjernesignal-API er nå stabil
• Støtte for Node.js v16 er fjernet, og minste støttede versjon er v18.13.0
• Esbuild vil være standard builder og standard dev server vil bruke Vite