Angular Ontwikkelingscursus

Les 1 • Je Eerste Angular-project Scaffolden

Gebruikt de Angular CLI om een project te genereren, de bestandsstructuur te verkennen en de dev-server te starten. Bouwt vertrouwdheid op met de werkruimte-indeling die in de hele cursus wordt gebruikt.

Les 2 • De Ontwikkelomgeving Instellen

Installeert Node.js, npm en de Angular CLI om een lokale werkruimte voor te bereiden. Maakt direct projectcreatie mogelijk, behandeld in het volgende onderdeel.

Les 3 • TypeScript Essentials voor Angular

Introduceert TypeScript-types, interfaces, decorators en modules zoals gebruikt in Angular. Zorgt ervoor dat studenten vanaf hoofdstuk twee zelfverzekerd Angular-code kunnen lezen en schrijven.

Les 1 • Anatomie van een Angular Component

Breekt de componentdecorator, class, template en stijlen op in hun rollen. Vestigt het mentale model voor elk UI-element dat in deze cursus wordt gebouwd.

Les 2 • Attribuutdirectieven en Pipes

Past ingebouwde attribuutdirectieven zoals ngClass en ngStyle toe en transformeert gegevens met ingebouwde pipes. Rondt de template-mogelijkheden af voordat we naar services gaan.

Les 3 • Ingebouwde Structurele Directieven

Behandelt ngIf, ngFor en ngSwitch voor conditionele en lijstweergave in templates. Maakt dynamische inhoudsweergave mogelijk die essentieel is voor real-world UI's.

Les 4 • Templatesyntax en Databinding

Leert interpolatie, propertybinding, eventbinding en two-way binding met ngModel. Verbindt componentlogica met de DOM voor interactieve UI's.

Les 1 • Dependency Injection Diepgaand

Verkent de Angular-injectorhiërarchie, providertokens en injectiescope. Maakt precieze controle mogelijk over service-instantiatie en delen over modules heen.

Les 2 • Services Maken en Gebruiken

Genereert services met de CLI, encapsuleert bedrijfslogica en injecteert ze in componenten. Demonstreert het single-responsibility-principe in de Angular-architectuur.

Les 3 • NgModules Begrijpen

Legt declarations, imports, exports en providers in NgModule-metadata uit. Vestigt het modulesysteem dat elke Angular-applicatie organiseert.

Les 1 • Route Guards en Resolvers

Beschermt routes met CanActivate- en CanDeactivate-guards en haalt gegevens vooraf op met Resolve. Zorgt voor veilige navigatie en vooraf geladen gegevens vóór componentweergave.

Les 2 • Child Routes en Named Outlets

Nest child routes binnen feature-modules en gebruikt named outlets voor hulpweergaven. Ondersteunt complexe lay-outs zoals dashboards met zijpanelen.

Les 3 • Feature Modules Lazy Loaden

Splitst de app op in lui geladen feature-modules om de initiële bundelgrootte te verkleinen. Verbeteren direct de prestatiestatistieken die in de geavanceerde hoofdstukken worden behandeld.

Les 4 • Routeparameters en Querystrings

Leest dynamische routesegmenten en optionele queryparameters met ActivatedRoute. Maakt detailweergaven en gefilterde lijsten mogelijk die worden aangestuurd door de URL-state.

Les 1 • Async Pipe en Template-integratie

Abonneert zich direct in templates op observables met de async pipe, waardoor handmatig subscriptionbeheer overbodig wordt. Vermindert boilerplate en voorkomt geheugenlekken in componenten.

Les 2 • Subjects en Multicasting

Gebruikt Subject, BehaviorSubject en ReplaySubject om waarden naar meerdere abonnees te multicasten. Maakt gedeelde statuspatronen mogelijk die worden gebruikt in service-gebaseerd statemanagement.

Les 3 • Kern RxJS-operators

Past map, filter, switchMap, mergeMap en catchError toe om streams te transformeren en te combineren. Rust studenten uit om real-world gegevenstransformatievereisten te behandelen.

Les 1 • HTTP Mocken tijdens Ontwikkeling

Gebruikt HttpClientTestingModule en in-memory web API om backend-responses tijdens de ontwikkeling te simuleren. Ontkoppelt de voortgang van de frontend van de beschikbaarheid van de backend.

Les 2 • Foutafhandeling en Retry-strategieën

Handelt HTTP-fouten af met catchError-, retry- en retryWhen-operators voor veerkrachtige API-aanroepen. Zorgt voor een soepele degradatie en gebruiksvriendelijke foutmeldingen.

Les 3 • HTTP-interceptors

Maakt interceptors om auth-tokens toe te voegen, verzoeken te loggen en responses globaal te transformeren. Centraliseert cross-cutting HTTP-zorgen zonder individuele service-aanroepen aan te passen.

Les 4 • HttpClient Setup en GET-verzoeken

Importeert HttpClientModule, injecteert HttpClient en voert getypeerde GET-verzoeken uit. Vestigt de basis voor alle backendcommunicatie in de applicatie.

Les 1 • Dynamische Formulieren met FormArray

Beheert lijsten met variabele lengte van controls met FormArray voor dynamische formulierscenario's. Ondersteunt use cases zoals het toevoegen van meerdere adressen of orderregels.

Les 2 • Reactive Forms Grondbeginselen

Construeert formulieren programmatisch met FormControl, FormGroup en FormBuilder. Maakt schaalbare, testbare formulierlogica mogelijk die volledig vanuit de componentclass wordt aangestuurd.

Les 3 • Formulier UX en Toegankelijkheid

Past touched, dirty en pristine-states toe om zichtbaarheid van fouten te beheren en de formulier-UX te verbeteren. Zorgt ervoor dat formulieren voldoen aan toegankelijkheidsnormen met de juiste ARIA-attributen.

Les 4 • Aangepaste Validators en Async-validatie

Schrijft synchrone en asynchrone aangepaste validators voor cross-field en server-side controles. Breidt het validatiesysteem van Angular uit om te voldoen aan complexe bedrijfsregels.

Les 1 • Statemanagement Grondbeginselen

Implementeert service-gebaseerde state met BehaviorSubject en introduceert NgRx store-concepten voor schaalbaar statebeheer. Bereidt studenten voor om de juiste state-strategie te kiezen voor de complexiteit van de app.

Les 2 • Aangepaste Directieven en Pipes

Bouwt herbruikbare attribuutdirectieven met HostListener en HostBinding en maakt pure en onzuivere aangepaste pipes. Breidt de template-mogelijkheden van Angular uit voor domeinspecifieke behoeften.

Les 3 • Contentprojectie en Dynamische Componenten

Gebruikt ng-content voor single- en multi-slot projectie en maakt componenten dynamisch aan tijdens runtime. Maakt zeer flexibele, herbruikbare UI-bibliotheekcomponenten mogelijk.

Les 4 • Change Detection-strategieën

Vergelijkt Default- en OnPush-change detection en past OnPush toe met onveranderlijke gegevens en observables. Vermindert aanzienlijk onnodige herweergaven in grote componentenbomen.