Angular Front-end Ontwikkelingscursus
Beheers Angular vanaf de basis en bouw met vertrouwen productieklare single-page-applicaties. Deze cursus behandelt alles van TypeScript-grondbeginselen en componentarchitectuur tot NgRx-statusbeheer, SSR en CI/CD-implementatie. Of je nu je front-endvaardigheden verbetert of overstapt naar professionele Angular-ontwikkeling, dit is de complete technische routekaart die je nodig hebt.
Wat je gaat leren:
Je leert hoe je Angular-applicaties kunt opzetten en structureren met behulp van modules, componenten en services. Je beheerst template-driven en reactive forms, implementeert complexe routing met guards en resolvers, en beheert applicatiestatus met NgRx. De cursus behandelt ook prestatieoptimalisatie, unit- en end-to-end-tests, en het implementeren van productie-builds. Geavanceerde onderwerpen omvatten Angular Universal voor server-side rendering, micro-frontend-architectuur met Module Federation en Progressive Web App-configuratie. Uiteindelijk heb je de vaardigheden om schaalbare Angular-applicaties te bouwen, testen en uit te leveren.
Hoe je praktisch studeert Angular Front-end Ontwikkelingscursus
Hoe je oefent Angular Front-end Ontwikkelingscursus
Voor bedrijven die hun team willen trainen
Bij Dedika voor bedrijven bevat de cursus oefeningen en voorbeelden die zijn afgestemd op jouw organisatie en precies zoals jouw bedrijf het nodig heeft.
Cursusinhoud
8 Hoofdstukken • 40 LessenDuur tussen 4 en 360 uren (jij beslist)
Hoofdstuk 1VerbergenVerberg detailsBekijk detailsAngular-fundamentals en Omgevingsconfiguratie
Angular-fundamentals en Omgevingsconfiguratie
Les 1 • Angular-modules en Applicatiebootstrapping
Legt NgModules, de root AppModule en hoe Angular de applicatie bootstrapt uit. Biedt de structurele context die nodig is voordat je componenten bouwt.
Les 2 • TypeScript-essentials voor Angular
Introduceert TypeScript-types, interfaces en decorators die nodig zijn om zelfverzekerd Angular-code te schrijven. Overbrugt JavaScript-kennis naar Angular's getypeerde ecosysteem.
Les 3 • Inleiding tot het Angular-framework
Behandelt de rol van Angular in moderne front-endontwikkeling en de op MVC geïnspireerde architectuur. Legt de conceptuele basis voor alle daaropvolgende framework-onderwerpen.
Les 4 • De ontwikkelomgeving instellen
Installeert en configureert Node.js, npm en de Angular CLI. Zorgt dat elke student een consistente, reproduceerbare lokale werkruimte heeft.
Les 5 • Je eerste Angular-project scaffolden
Gebruikt de Angular CLI om een nieuw project te genereren en verkent de gegenereerde bestandsstructuur. Verbindt omgevingsconfiguratie met praktische projectcreatie.
Hoofdstuk 2VerbergenVerberg detailsBekijk detailsComponenten, Templates en Databinding
Componenten, Templates en Databinding
Les 1 • Ingebouwde structurele directives
Past *ngIf, *ngFor en *ngSwitch toe om de DOM-structuur dynamisch te beheren. Laat zien hoe directives de expressiviteit van templates uitbreiden.
Les 2 • Eigenschaps- en gebeurtenisbinding
Leert eenrichtingsgegevensstroom via eigenschapsbinding en gebruikersgebeurtenisafhandeling via gebeurtenisbinding. Verbindt componentlogica met DOM-elementen en gebruikersinteracties.
Les 3 • Templatesyntaxis en Expressies
Behandelt de expressietaal van Angular-templates, veilige navigatie en template-referentievariabelen. Maakt dynamische contentweergave binnen componentweergaven mogelijk.
Les 4 • Lifecycle-hooks van componenten
Verkent de volledige reeks lifecycle-hooks van ngOnInit tot ngOnDestroy. Leert wanneer en waarom je elke hook gebruikt voor initialisatie en opschoning.
Les 5 • Anatomie van een Angular-component
Breekt de @Component-decorator, metadata-eigenschappen en de component-lifecycle op. Legt de bouwsteen voor elk Angular-UI-element vast.
Hoofdstuk 3VerbergenVerberg detailsBekijk detailsComponentcommunicatie en Directives
Componentcommunicatie en Directives
Les 1 • ViewChild- en ContentChild-queries
Benadert kindcomponentinstanties en geprojecteerde content programmatisch via queries. Maakt geavanceerde componentcoördinatie mogelijk buiten templatebinding om.
Les 2 • Ouder-naar-Kindcommunicatie met @Input
Gebruikt @Input om gegevens naar beneden in de componentenboom door te geven en valideert input met setters. Legt het primaire neerwaartse gegevensstroompatroon in Angular vast.
Les 3 • Custom structurele directives bouwen
Implementeert structurele directives met TemplateRef en ViewContainerRef om de DOM te manipuleren. Breidt het vermogen van studenten uit om herbruikbare lay-outlogica te maken.
Les 4 • Custom attribuutdirectives bouwen
Maakt directives die het uiterlijk of gedrag van hostelementen wijzigen zonder de DOM-structuur te veranderen. Versterkt het directivepatroon dat in hoofdstuk 2 is geïntroduceerd.
Les 5 • Kind-naar-Oudercommunicatie met @Output
Gebruikt @Output en EventEmitter om custom events omhoog in de componentenboom te sturen. Voltooit het bidirectionele ouder-kindcommunicatiepatroon.
Hoofdstuk 4VerbergenVerberg detailsBekijk detailsServices, Dependency Injection en HTTP
Services, Dependency Injection en HTTP
Les 1 • Angular-services maken en aanbieden
Genereert services met de CLI en registreert ze op module-, component- of rootniveau. Vestigt de servicelaag als de thuisbasis voor gedeelde logica.
Les 2 • HTTP-client en REST-API-integratie
Configureert HttpClientModule en voert GET-, POST-, PUT- en DELETE-verzoeken uit. Verbindt de servicelaag met echte back-endgegevensbronnen.
Les 3 • Foutafhandeling en HTTP-interceptors
Implementeert globale foutafhandeling met catchError en request/response-transformatie met interceptors. Produceert productieklare HTTP-communicatiepatronen.
Les 4 • Diepgaande duik in Dependency Injection
Verkent de DI-hiërarchie, injectietokens en providertypen. Maakt fijnmazige controle mogelijk over hoe afhankelijkheden in de app worden opgelost.
Les 5 • Inleiding tot RxJS Observables
Introduceert Observables, Subjects en kernoperators die nodig zijn om met Angular's async API's te werken. Bereidt studenten voor op reactieve HTTP- en gebeurtenisafhandelingspatronen.
Hoofdstuk 5VerbergenVerberg detailsBekijk detailsAngular-routing en Navigatie
Angular-routing en Navigatie
Les 1 • Route Guards en Toegangscontrole
Implementeert CanActivate-, CanDeactivate- en CanLoad-guards om routes te beveiligen. Integreert authenticatie en autorisatie in de navigatielaag.
Les 2 • Lazy Loading en Route Resolvers
Splitst de app in feature-modules die op aanvraag worden geladen en haalt gegevens vooraf op met resolvers. Verbetert de initiële laadprestaties en gebruikerservaring.
Les 3 • Geneste Routes en Named Outlets
Structureert kindroutes onder ouderoutes en gebruikt named outlets voor hulpweergaven. Ondersteunt complexe lay-outvereisten in grote applicaties.
Les 4 • Routerconfiguratie en Basisnavigatie
Configureert de RouterModule met routerdefinities en voegt router-outlet en routerLink toe. Legt de basis voor alle navigatiefuncties.
Les 5 • Routeparameters en Query-strings
Leest dynamische routesegmenten en optionele queryparameters uit de ActivatedRoute. Maakt detailweergaven en gefilterde lijstpagina's mogelijk.
Hoofdstuk 6VerbergenVerberg detailsBekijk detailsAngular-formulieren: Template-Gestuurd en Reactief
Angular-formulieren: Template-Gestuurd en Reactief
Les 1 • Dynamische Formulieren met FormArray
Gebruikt FormArray om formulierbesturingselementen tijdens runtime toe te voegen en te verwijderen voor variabele lengte. Behandelt praktijkscenario's zoals herhalende regels.
Les 2 • Validators en Custom Validatie
Past synchrone en asynchrone validators toe en maakt herbruikbare custom validatorfuncties. Zorgt voor gegevensintegriteit vóór verzending.
Les 3 • Formulierverzending en Statusbeheer
Behandelt formulierverzending, reset en dirty/touched-status om een gepolijste UX te leveren. Verbindt formuliergegevens met serviceaanroepen die in hoofdstuk 4 zijn geïntroduceerd.
Les 4 • Template-Gestuurde Formulieren
Gebruikt ngForm, ngModel en ingebouwde validators om formulieren declaratief in de template te bouwen. Introduceert formulierconcepten met minimale TypeScript-overhead.
Les 5 • Grondbeginselen van Reactieve Formulieren
Bouwt formulieren programmatisch met FormControl, FormGroup en ReactiveFormsModule. Biedt expliciete, testbare controle over formulierstatus en validatie.
Hoofdstuk 7VerbergenVerberg detailsBekijk detailsStatusbeheer en Reactieve Patronen
Statusbeheer en Reactieve Patronen
Les 1 • NgRx Entity en DevTools
Vereenvoudigt collectiebeheer met NgRx Entity en inspecteert status met Redux DevTools. Versnelt ontwikkeling en debugging van store-zware functies.
Les 2 • Inleiding tot NgRx Store
Installeert NgRx en definieert acties, reducers en de store voor een feature-slice. Vestigt het Redux-patroon binnen het Angular-ecosysteem.
Les 3 • Servicegebaseerde Status met BehaviorSubject
Slaat status op en deelt deze met componenten via BehaviorSubject in een service. Biedt een lichte statusoplossing voordat NgRx wordt geïntroduceerd.
Les 4 • NgRx Effects voor Neveneffecten
Behandelt asynchrone bewerkingen zoals HTTP-aanroepen buiten reducers met NgRx Effects. Houdt reducers puur en centraliseert logica voor neveneffecten.
Les 5 • Selectors en Componentintegratie
Maakt gememoriseerde selectors en verzendt acties vanuit componenten via de Store-service. Verbindt de NgRx-store met de componentlaag.
Hoofdstuk 8VerbergenVerberg detailsBekijk detailsPrestatie, Testen en Implementatie
Prestatie, Testen en Implementatie
Les 1 • Implementatiestrategieën en CI/CD-integratie
Implementeert Angular-builds naar statische hosting en integreert geautomatiseerde pipelines voor continue levering. Sluit de ontwikkelingscyclus van code naar productie.
Les 2 • Unit-testen van Componenten en Services
Schrijft unit-testen met Jasmine en TestBed voor componenten, services en pipes. Valideert individuele eenheden in isolatie vóór integratie.
Les 3 • Bundeloptimalisatie en Buildconfiguratie
Configureert productie-builds, tree shaking en differential loading voor optimale bundelgrootte. Bereidt de app voor op praktische implementatiebeperkingen.
Les 4 • End-to-End Testen met Cypress
Automatiseert gebruikersstroomtesten met Cypress om volledig applicatiegedrag te valideren. Vult unit-testen aan met realistische browserscenario's.
Les 5 • Wijzigingsdetectie en Prestatieoptimalisatie
Legt Angular's standaard en OnPush-wijzigingsdetectiestrategieën en profileringshulpmiddelen uit. Vermindert onnodige herrenderingen in grote componentenbomen.
Jouw geldig certificaat van voltooiing
Deze cursus is voor jou:
JavaScript-ontwikkelaars: klaar om een gestructureerd, enterprise-grade front-end-framework te omarmen.
React- of Vue-ontwikkelaars: die Angular-expertise aan hun professionele toolkit willen toevoegen.
Back-end-ontwikkelaars: die uitbreiden naar full-stackrollen die moderne front-endvaardigheden vereisen.
Afgestudeerden in de informatica: die academische kennis overbruggen met industriestandaard Angular-ontwikkeling.
Freelance webontwikkelaars: die in aanmerking willen komen voor grotere, complexere klantprojecten.
Carrièreswitchers: die werkklare front-endvaardigheden opbouwen vanuit een solide programmeerbasis.
Wat onze studenten zeggen
Jullie lessen zijn perfect. Ik heb het jaarpakket aangeschaft en heb eindelijk de mogelijkheid om verschillende onderwerpen die mij interesseren te volgen zonder van platform te hoeven wisselen... bedankt voor alles wat jullie doen, ik heb jullie al aan anderen aanbevolen...
Ik vind het fijn hoe de lessen direct ter zake zijn en hoe ik tussen hoofdstukken kan wisselen en content kan overslaan die ik niet nodig heb.
Ik vind de content en de manier van presenteren en transcriptie van video's geweldig, wat het proces versnelt!
Het platform is snel en eenvoudig te gebruiken. De diversiteit aan content en de aanvullende video's helpen enorm bij het leren.
Belangrijkste opleidingen
FAQ
Wie is Dedika?
Is het certificaat geldig in Nederland?
Zijn de cursussen gratis?
Wat is de studielast van de cursus?
Hoe zien de cursussen eruit?
Hoe werken de cursussen?
Wat is de duur van de cursussen?
Wat zijn de kosten of prijzen van de cursussen?
Wat is een EAD- of online cursus en hoe werkt het?
PDF-cursus