Angular

1 Kennismaken met Angular
Wat is Angular?
Enkele woorden over de voorganger, AngularJS
Angular-concepten
Architectuur van Angular-applicaties
Applicatie als boomstructuur van componenten
Enkele woorden over React
Benodigde voorkennis
De ontwikkelomgeving inrichten
Oefenbestanden downloaden
Samenvatting
Praktijkoefeningen

2 Hello World in Angular
Mogelijkheden voor Angular-projecten
Angular CLI installeren
Nieuw project starten en draaien
Project openen en aanpassen
Theorie – de bestandsstructuur verkennen
Belangrijke bestanden
Overige bestanden
Praktijk – een nieuwe component genereren
Theorie – meer over componenten
Theorie – modules bekijken
Praktijk – CSS-bibliotheek Bootstrap toevoegen
Architectuur van Angular-applicaties
Samenvatting
Praktijkoefeningen

3 Databinding en modellen
Wat is databinding?
Eenvoudige databinding met {{ … }}
Databinding in de constructor
Databinding in ngOnInit()
De directive *ngFor
De directive *ngIf
Werken met inline en externe sjablonen
Samenvatting
Praktijkoefeningen

4 Meer over databinding
Gegevens binden aan gebeurtenissen
Parameters meegeven aan de gebeurtenisverwerker
Werken met lokale sjabloonvariabelen
Gegevens binden aan HTML-attributen
Tweerichtingdatabinding met [(ngModel)]
Meer opties voor binding
Samenvatting
Praktijkoefeningen

5 Werken met services
Wat zijn services?
Stap 1 – service met statische data
Stap 2 – service gebruiken in de component
Stap 3a – dependency injection in app.module.ts
Stap 3b – gebruik de notatie providedIn
Stad toevoegen via de service
Samenvatting
Praktijkoefeningen

6 Asynchrone services
Wat zijn asynchrone services?
Theorie – meer over reactive programming
Theorie – de werking van ReactiveX
Praktijk – gegevens uit bestand lezen en verwerken
Meer RxJS-methoden
Verbetering – gegevens via de service
Automatisch abonnement met de pipe async
Live API’s op internet gebruiken
Een API maken met json-server
Meer API’s om mee te experimenteren
Samenvatting
Praktijkoefeningen

7 Boomstructuur van componenten
Structuur van Angular-applicaties
Nieuwe componenten maken
Stap 1 – nieuwe component maken
Stap 2 – view aanpassen
Stap 3 – insluiten in HTML
Datastroom tussen componenten
Werken met @Input
Werken met @Output
Samenvatting @Input en @Output
Communicatie tussen componenten op gelijk niveau
Samenvatting
Praktijkoefeningen

8 Routering en bronnen voor meer informatie
Kennismaken met routering
Routering bij gebruik van Angular CLI
Stappenplan bij routering
Programmatisch een andere route selecteren
Dynamische routes met routeparameters
Meer over routering
Meer over Angular
Samenvatting
Praktijkoefeningen

Index