Angular: Leer & Codeer
Angular: Leer & Codeer — Schrijf een component en zie het live renderen op je telefoon
Angular: Leer & Codeer is een gratis iOS- en Android-app voor beginners, studenten en ontwikkelaars die vanuit JavaScript komen en Angular op hun telefoon willen leren. De live werkbank met drie panelen — component.ts, template.html en styles.css rendert je code terwijl je typt, en 38 cursussen leiden je van een eerste standalone component naar signals, RxJS, NgRx en server-side rendering.
- Prijs
- Gratis, Pro-upgrade
- Platformen
- iOS en Android
- Talen
- 22
- Leeftijdsclassificatie
- 4+
- Vereist
- iOS 15.1 of nieuwer
Verander een waarde in de class en zie hoe de template volgt.
De hele reden waarom Angular bestaat, is een framework dat de class, template en view van een component voor je synchroon houdt. De werkbank maakt dat zichtbaar op je telefoonscherm: bewerk component.ts en de preview wordt opnieuw gerenderd. Zo ervaar je sneller wat dependency injection en signals doen dan wanneer je alleen hun definitie leest.
Wat het is
Angular: Leer & Codeer is een gratis onderwijsapp voor iOS en Android die je het Angular-framework leert, van een eerste standalone component tot een volledig frontend-traject. Dat gebeurt met een live werkbank met drie panelen (component.ts, template.html, styles.css) en een preview die je code rendert terwijl je die schrijft. De 38 cursussen behandelen signals, RxJS, routing, forms, NgRx state management en server-side rendering, met 60 TypeScript-coderingsmissies en een AI Mentor voor alles wat nog niet duidelijk is.
In de app
Hoe het eruitziet
De cursus
Wat de Angular-cursus behandelt
38 cursussen en 144 lessen, afkomstig uit de eigen cursussenlijst van de app — van een eerste standalone component tot signals, NgRx en server-side rendering.
Componenten en projectfundamenten
Welcome to Angular, Angular CLI and Project Structure, Angular 19 Fundamentals, Standalone Components Deep Dive, Built-in Control Flow, Component Styling and Encapsulation en Component Lifecycle Hooks.
Signals en reactieve state
Angular Signals Fundamentals, Signals: Computed and Effects, Signal Inputs and Queries, Signal-Based State Management en NgRx SignalStore — de huidige, aanbevolen manier om component-state op te slaan en af te leiden.
Services, directives en templates
Dependency Injection Basics, Pipes: Built-in and Custom, Two-Way Binding and Model Inputs, Content Projection and Templates, Directive Composition API en Advanced Components and Directives.
Routing en formulieren
Angular Routing and Navigation, Angular Router Advanced, Working with Forms, Reactive Forms Advanced en Custom Form Controls.
RxJS en HTTP
RxJS Fundamentals for Angular, RxJS Operators in Depth, HttpClient Interceptors en HTTP and API Integration — de laag die een component met een echte backend verbindt.
State management en testen
State Management with NgRx, Angular Unit and Component Testing en End-to-End Testing for Angular.
Prestaties en productie
Change Detection and Performance, Server-Side Rendering with Angular SSR, Hydration and Performance, Angular Animations, Internationalization (i18n), Micro Frontends with Module Federation, Building Angular Libraries en Angular Security Essentials.
Hoe het werkt
Zo werkt een sessie in de werkbank
Elke les combineert een korte uitleg met de live werkbank, zodat het Angular-concept dat je net hebt gelezen en de code die het gebruikt op hetzelfde scherm staan, in plaats van in een aparte oefening achteraf.
Lees het concept en open daarna de werkbank
Een korte les introduceert één idee — een signal, een directive, een router guard — en geeft je daarna component.ts, template.html en styles.css naast elkaar, met een previewpaneel dat rendert wat je schrijft.
Verander de code en zie hoe de component reageert
Bewerk een waarde in de class en de template wordt bijgewerkt in de preview; verbreek een binding en de preview laat precies dat zien. Dat is iets wat een statisch codevoorbeeld niet kan, en daarom steunt de cursus op de werkbank in plaats van op fragmenten die je alleen kunt lezen.
Werk aan een TypeScript-missie en vraag het wanneer je vastloopt
Na de lessen volgen 60 coderingsmissies op drie moeilijkheidsniveaus, met hints en uitgewerkte oplossingen als je bij een missie vastloopt. Voor alles wat nog steeds niet duidelijk is — een signal dat niet wil bijwerken, een geïnjecteerde service die undefined terugkomt — legt de AI Mentor het uit vanuit het eigen chatscherm van de les.
Wat erin zit
Wat je bij de app krijgt
38
Cursussen, A1 tot C1
144 lessen verdeeld over 38 cursussen, van standalone components en signals tot RxJS, forms, routing, NgRx state management, testen, server-side rendering en micro frontends.
Live
Werkbank met drie panelen
component.ts, template.html en styles.css zijn naast elkaar te bewerken, met een preview die je Angular-code rendert terwijl je typt — er is een verbinding nodig om de code uit te voeren.
60
TypeScript-coderingsmissies
Drie moeilijkheidsniveaus, met hints en uitgewerkte oplossingen, plus een tabblad Projects met werkruimtes met meerdere bestanden, begeleide projecttrajecten en versiegeschiedenis.
AI
AI-tutor (Pro)
Stel vanuit het chatscherm van de les vragen over een fout, een concept of je eigen code; Pro voegt ook een AI-lesgenerator toe voor een onderwerp dat je nog niet goed begrijpt, en een AI-playground die een beschreven pagina omzet in code.
Wereld
World Coding Challenge
Eén gedeeld probleem waarvan ieders oplossingen zichtbaar zijn, naast streaks, XP, een leaderboard en dagelijkse herinneringen.
Certificaat
Certificaat van voltooiing
Een eindexamen en een certificaat met je naam erop, naast miniquizzes, flashcard-herhaling en een cheatsheet van één pagina met syntax, decorators en directives.
Achtergrond
Wat is Angular en in welke volgorde leer je het eigenlijk?
Angular is een frontend-framework dat door Google wordt onderhouden en in TypeScript is geschreven. Het wordt gebruikt om de interactieve singlepage-interfaces van grote webapplicaties te bouwen. Anders dan een library die je zelf samenstelt, levert Angular een samenhangende set onderdelen waarvan de keuzes al voor je zijn gemaakt: components, een router, een forms-systeem, dependency injection en RxJS voor stromen van gebeurtenissen. In de praktijk leer je eerst components en templates, daarna signals en services, vervolgens routing en forms, en ten slotte de RxJS- en HTTP-laag die met een echte backend communiceert.
Standalone componentde bouwsteen
Een zelfstandig onderdeel van de interface — met een eigen class, template en styles — dat zijn eigen dependencies declareert in plaats van onderdeel te zijn van een gedeelde module. Moderne Angular-apps zijn opgebouwd als een boom van zulke onderdelen. Daarom begint de cursus hier en niet met oudere, op modules gebaseerde patronen.
Signalde huidige manier om state te beheren
Een reactieve waarde die je met signal() aanmaakt en die elk deel van de template kan uitlezen; computed() leidt het ene signal af van het andere, en effect() voert code uit wanneer er een verandert. Signals hebben veel handmatig werk rond change detection vervangen en zijn nu de aanbevolen manier om de state van een component bij te houden.
Dependency injectionhoe onderdelen verbinding maken
In plaats van dat een component de services maakt die het nodig heeft, vraagt het erom en levert Angular ze aan. Dit is het concept waar beginners bij hun eerste kennismaking het vaakst over struikelen — en het concept dat een grote codebase testbaar maakt, omdat je een echte service in een test eenvoudig door een fake kunt vervangen.
RxJS en observablesde gegevensstroom
Een library voor waarden die in de loop van de tijd binnenkomen in plaats van allemaal tegelijk — HTTP-responses, routeparameters en formulierinvoer terwijl die verandert. Angulars HttpClient en router leveren rechtstreeks observables terug, dus je krijgt operators als map en switchMap vanzelf onder de knie, of je nu van plan was ze te leren of niet.
Past bij jou
Voor wie het is — en voor wie niet
Past goed bij je als je
- Je begint met Angular vanaf nul en wilt een component zien reageren voordat je de achterliggende theorie uit je hoofd leert
- Je kent JavaScript of TypeScript al en pikt je eerste framework op
- Je werkt met React of Vue en stapt voor een baan over naar Angular, en wilt de terminologie vertaald zien in plaats van alles vanaf nul opnieuw uitgelegd te krijgen
- Je wilt TypeScript-codeermissies en een echte werkruimte voor projecten met meerdere bestanden, niet alleen meerkeuzevragen
- Je bent student of maakt een carrièreswitch en bereidt je voor op een sollicitatie voor een frontend developer
Niet het juiste hulpmiddel als je
- Je hebt een werkbank nodig die helemaal zonder verbinding werkt — de live preview heeft specifiek wel een verbinding nodig
- Je verwacht dat alles gratis is: de eerste cursus en de werkbank zijn gratis, Pro ontgrendelt de rest, inclusief de AI-tools
- Je bouwt al Angular-apps voor productie en wilt diepgaande architectuur- of API-referentiematerialen in plaats van een cursus
- Je hebt een erkende kwalificatie nodig — het certificaat is een certificaat van voltooiing, geen formele kwalificatie
Vragen
Veelgestelde vragen
Wat laat de live werkbank van de Angular-app precies zien?
Drie bewerkbare deelvensters — component.ts voor de TypeScript-klasse, template.html voor de markup en styles.css voor de styling — naast een preview die de component weergeeft terwijl je een van de drie bewerkt. Als je de waarde van een signal in de klasse wijzigt en de template die onmiddellijk ziet bijwerken, ervaar je precies wat een statisch codevoorbeeld in een boek niet kan laten zien. Daarom is de cursus hieromheen opgebouwd en niet rond voorbeelden die je alleen leest.
Moet ik JavaScript of TypeScript kennen voordat ik Angular leer?
Enige kennis van JavaScript helpt, maar je hoeft JavaScript niet eerst volledig te beheersen. Angular is geschreven in TypeScript, oftewel JavaScript met een toegevoegd typesysteem, en de cursus introduceert type-annotaties en interfaces wanneer die aan bod komen, in plaats van ervan uit te gaan dat je ze al kent. Angular: Leer & Codeer begint met een eerste standalone component en legt TypeScript daarbij uit.
Wat zijn Angular-signals en waarom begint de cursus ermee?
Een signal is een reactieve waarde die met signal() wordt aangemaakt en die de template rechtstreeks uitleest; computed() leidt een nieuw signal af uit bestaande signals, en effect() voert automatisch code uit wanneer een signal waarvan het afhankelijk is verandert. Signals zijn de huidige, door Angular aanbevolen manier om component-state bij te houden. Ze vervangen veel handmatig werk rond change detection uit oudere versies. Daarom staat de cursus Signals Fundamentals vroeg in het leertraject en niet als geavanceerd onderwerp.
Wat is het verschil tussen Angular en React?
React is een rendering library; je kiest zelf je router, formulierverwerking, HTTP-client en state management. Angular is een volledig framework en levert die keuzes al ingebouwd — componenten, dependency injection, een router, RxJS en tegenwoordig ook signals. React voelt meestal lichter om mee te beginnen en Angular zwaarder, maar in een groot team ziet een Angular-codebase er van bedrijf tot bedrijf vergelijkbaarder uit. Dat is een van de redenen waarom grote organisaties het blijven gebruiken.
Is Angular in 2026 nog de moeite waard om te leren?
Ja, vooral als je doel een baan is en niet een zijproject. Angular wordt veel gebruikt binnen grote bedrijven en voor enterprise tooling, waar de duidelijke structuur, ingebouwde ondersteuning voor testen en planning voor langdurige ondersteuning belangrijker zijn dan nieuwigheid. Daardoor blijven vacatures voor Angular doorgaans stabiel. Het materiaal over signals en SignalStore in deze cursus weerspiegelt bovendien waar het framework daadwerkelijk naartoe is gegaan, en niet een verouderde momentopname.
Hoe lang duurt het om Angular goed genoeg te leren om iets te bouwen?
Consistentie is belangrijker dan het totale aantal uren. Als je dagelijks korte lessen in de werkbank doorneemt, kunnen de meeste beginners binnen enkele weken een paar componenten bouwen en aan elkaar koppelen, gegevens tussen componenten doorgeven met signals en een API aanroepen. Dependency injection, RxJS-operators en state management met NgRx hebben meestal een tweede ronde nodig. Daarom behandelt de cursus ze na de basis en niet meteen aan het begin.
Is Angular: Leer & Codeer beschikbaar op iPhone en Android, en voor wie is de app bedoeld?
Angular: Leer & Codeer is beschikbaar voor iPhone en iPad in de App Store en voor Android op Google Play, met een interface in 22 talen en een leeftijdsclassificatie van 4+. De app is bedoeld voor complete beginners, studenten, carrièreswitchers en developers die enige kennis van JavaScript hebben en Angular als hun eerste framework willen leren, of vanuit React of Vue willen overstappen.
Is Angular: Leer & Codeer gratis?
De app is gratis te downloaden in de App Store en op Google Play. De eerste cursus en de live werkbank zijn gratis. Pro is de betaalde upgrade: hiermee ontgrendel je elke cursus, alle 60 codeermissies en de AI-tutor, lesgenerator en playground, en verwijder je advertenties.
Werkt de live preview offline, in de metro of in een vliegtuig?
Nee, specifiek de preview niet — om je component live weer te geven is een verbinding nodig. De app maakt dat duidelijk in plaats van ongemerkt minder functionaliteit te bieden. Lessen en leesmateriaal blijven laden en zijn bruikbaar bij een instabiele verbinding, maar als je een volledig offline werkbank nodig hebt, biedt de live preview van deze app dat niet.
Heeft deze app een band met Google of het officiële Angular-team?
Nee. Angular: Leer & Codeer is een onafhankelijke leercursus van CoddyKit en is niet verbonden aan of goedgekeurd door Google of het Angular-team. De cursus leert je het framework zoals Google het onderhoudt en publiceert, maar de app zelf is een cursus van een derde partij en geen officieel product.
Aan de slag
Bouw vandaag nog je eerste Angular-component
Gratis te beginnen op iOS en Android, in 22 talen.
Meer van CoddyKit
Beschikbaar op iOS en Android.