Angular 17 Training Cursus

Inleiding tot Angular 17

• Wat is Angular?
• Angular versus React versus Vue
• Overzicht van de functies en architectuur van Angular 17
• De ontwikkelomgeving instellen

De eerste stappen

• Een nieuw Angular 17-project maken met Angular CLI
• Het projectstructuur en bestanden verkennen
• De toepassing draaien en serveren
• Data weergeven met interpolatie en expressies

Componenten

• De rol van componenten in Angular 17 begrijpen
• Componenten maken en gebruiken
• Data doorgeven tussen componenten met inputs en outputs
• Gebruikmaken van lifecycle-hooks van componenten

Directieven

• Het verschil tussen structurele en attribuutdirectieven begrijpen
• Ingebouwde directieven zoals ngIf, ngFor, ngSwitch, etc. maken en gebruiken
• Op maat gemaakte directieven maken en gebruiken

Pijpjes (Pipes)

• Het doel van pijpjes in Angular 17 begrijpen
• Ingebouwde pijpjes zoals date, currency, json, etc. maken en gebruiken
• Op maat gemaakte pijpjes maken en gebruiken

Services

• De rol van services in Angular 17 begrijpen
• Services maken en gebruiken
• Afhankelijkheden injecteren met providers

Modules

• De rol van modules in Angular 17 begrijpen
• Modules maken en gebruiken
• Modules importeren en exporteren

Databinding

• Het verschil between eendelige en tweedelige databinding begrijpen
• Eigenschapsbinding, event binding en 'banana-in-a-box'-syntax maken en gebruiken
• Gebruikmaken van template-referentievariables

Routing

• De rol van routing in Angular 17 begrijpen
• Routes maken en configureren
• Navigeren tussen routes met routerLink en router.navigate()
• Gebruikmaken van routeparameters, queryparameters en fragmenten

Formulieren

• Het verschil tussen template-gestuurde en reactieve formulieren begrijpen
• Formulieren maken en valideren met form controls, form groups, form arrays, etc.
• Ingebouwde validatoren zoals required, minLength, maxLength, etc. gebruiken
• Op maat gemaakte validatoren maken en gebruiken

HTTP Client

• De rol van de HTTP client in Angular 17 begrijpen
• HTTP-aanvragen maken en gebruiken om te communiceren met back-endservices
• Observables gebruiken om asynchrone datastromen te verwerken
• Interceptoren gebruiken om HTTP-aanvragen of -antwoorden aan te passen of af te handelen

Nieuwe, declaratieve controlestroom

• Uitleggen van de nieuwe template control block-syntax en hoe deze veelvoorkomende taken vereenvoudigt zoals conditionele weergave, luslogica en het afhandelen van lege collecties
• Voorbeelden geven van het gebruik van de nieuwe blocks, zoals @if, @else, @switch, @case, @default, @for en @empty
• De nieuwe syntax vergelijken met de eerdere, zoals *ngIf, *ngSwitch en *ngFor
• Verwennen hoe de nieuwe control blocks zoneless applicaties met signals ondersteunen

Gedelegeerde laadblokken (Deferred Loading Blocks)

• Het concept van gedelegeerd laden uitleggen en hoe dit de prestaties en gebruikerservaring van webapplicaties kan verbeteren
• Invoering van de nieuwe @defer control block die lazy loading van de block-inhoud en afhankelijkheden mogelijk maakt
• Voorbeelden geven van het gebruik van de @defer-block voor verschillende scenario's, zoals het laden van componenten, directieven, pijpjes, animaties en stijlen
• Verwennen hoe de @defer-block samenwerkt met de nieuwe View Transitions API

View Transitions API

• Het doel en de voordelen van de View Transitions API uitleggen, die ontwikkelaars in staat stelt animaties en overgangen tussen weergaven aan te passen
• Invoering van de nieuwe withViewTransitions-directief die het gebruik van de View Transitions API mogelijk maakt
• Voorbeelden geven van het gebruik van de withViewTransitions-directief met verschillende overgangstypen, zoals fade, slide, zoom en flip
• Verwennen hoe de View Transitions API samenwerkt met de Angular router en de browsergeschiedenis

Andere functies en verbeteringen

• Een korte samenvatting van enkele andere functies en verbeteringen die Angular 17 aanbiedt, zoals:
• Ondersteuning om @Component.styles als string door te geven
• De animatiecode van Angular is lazy-loadbaar
• Ondersteuning voor TypeScript 5.2
• De core signal API is nu stabiel
• Ondersteuning voor Node.js v16 is verwijderd en de minimum ondersteunde versie is v18.13.0
• Esbuild zal de standaard builder zijn en de standaard dev-server zal Vite gebruiken