Inhoud 1
Kennismaken met Angular
1
Wat is Angular? 2 Versies van AngularJS en Angular 7 Angular-concepten 11 Architectuur van Angular-applicaties 18 Applicatie als boomstructuur van componenten 21 Benodigde voorkennis 23 De ontwikkelomgeving inrichten 26 Oefenbestanden downloaden 31 Samenvatting 32 Praktijkoefeningen 33
2
Hello World in Angular
35
Mogelijkheden voor Angular-projecten 36 Angular CLI installeren 36 Nieuw project starten en draaien 37 Project openen en aanpassen 40 Theorie – de bestandsstructuur verkennen 42 Belangrijke bestanden 44 Overige bestanden 48 Een nieuwe component genereren 49 Theorie - meer over componenten 52 Theorie – Modules bekijken 54 De CSS-bibliotheek Bootstrap toevoegen 61 Architectuur van Angular-applicaties 64 Samenvatting 66 Praktijkoefeningen 68
/ ix
/ Inhoud /
3
4
5
6
/x
Databinding en modellen
71
Wat is databinding? Eenvoudige databinding met {{ … }} Databinding in de constructor Databinding in ngOnInit() De directive *ngFor Stap 1 – een model maken De directive *ngIf Werken met inline en externe sjablonen Samenvatting Praktijkoefeningen
72 74 79 80 82 86 90 92 94 95
Meer over databinding
97
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
98 102 104 108 113 117 118 119
Werken met services
121
Wat zijn services? Stap 1 – service met statische data Stap 2 – service gebruiken in de component Stap 3 – dependency injection in app.module.ts Services als singleton? Stad toevoegen via de service Samenvatting Praktijkoefeningen
122 125 128 130 131 132 135 136
Asynchrone services
137
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
138 140 143 148 151 154 156
/ Angular /
7
8
API’s op internet gebruiken Een API maken met json-server Meer API’s om mee te experimenteren Samenvatting Praktijkoefeningen
158 163 175 177 178
Boomstructuur van componenten
181
Structuur van Angular-applicaties Nieuwe componenten maken Datastroom tussen componenten Werken met @Input Werken met @Output Samenvatting @Input en @Output Communicatie tussen componenten op gelijk niveau Samenvatting Praktijkoefeningen
182 184 189 190 193 199 199 212 213
Routing en bronnen voor meer informatie
215
Kennismaken met routing Standaard geen routing in Angular CLI Stappenplan bij routing Programmatisch een andere route selecteren Dynamische routes met routeparameters Meer over routing Meer over Angular Samenvatting Praktijkoefeningen
216 219 220 226 227 230 232 239 240
Index
243
/ xi
Van enkele eenvoudige HTML-pagina’s in de jaren negentig is het web uitgegroeid tot een van de meest complexe systemen die we kennen. Internet wordt gebruikt voor eenvoudige hobbysites, maar ook voor onlinebetaalsystemen, klantbeheersystemen, verzekerings- en schademodellen, sociale media en ontelbare andere zaken. Angular is een framework voor het programmeren van dergelijke ingewikkelde webapps. In Angular zijn MVC-concepten verwerkt die het mogelijk maken code en structuur van elkaar te scheiden en – meer nog dan met de voorganger AngularJS – modulair te programmeren. Dit boek geeft een inleiding op al deze zaken. Na afloop kunt u vol vertrouwen aan de slag met eigen Angular-applicaties.
In dit hoofdstuk: Wat Angular is, en wat het niet is. Angular 2 en hoger versus AngularJS. Concepten en kenmerken van Angular. Benodigde voorkennis en software. Wat hebt u nodig? De werkomgeving inrichten.
Hoofdstuk
Kennismaken met Angular 1
/ Hoofdstuk 1 / Kennismaken met Angular
Wat is Angular? Het aloude HTML is prima om tekst en afbeeldingen te tonen in de browser, maar is oorspronkelijk nooit ontwikkeld voor het maken van dynamische webapplicaties. Voor dat doel is JavaScript rond 1995 ontworpen. Samen met CSS (dat rond dezelfde tijd opkwam) behoort JavaScript op dit moment tot de basisvaardigheden van elke webdeveloper. JavaScript was in het begin lastig te leren en verschillende browserfabrikanten hadden hun eigen ideeën over de implementatie van JavaScript. Bibliotheken en frameworks Pas sinds de opkomst van aanvullende bibliotheken (libraries) zoals jQuery in 2006 heeft JavaScript een enorme vlucht genomen. Behalve jQuery zijn tal van andere bibliotheken ontwikkeld, elk met hun eigen doel. Er zijn bibliotheken voor DOM-manipulatie (zoals jQuery), routing (sammy.js), databinding (backbone, knockout.js), werken met datums en tijden (moment.js) en nog veel meer.
Afbeelding 1.1 In traditionele webapplicaties neemt elke bibliotheek een van de eisen die aan de applicatie wordt gesteld voor zijn rekening. De kans bestaat dat bibliotheken niet compatibel zijn.
/2
/ Angular /
Angular is geen bibliotheek zoals de hiervoor genoemde. Angular is een compleet framework voor het realiseren van client-sided webapplicaties. • Als we de zaken erg vereenvoudigd voorstellen, kan worden gezegd dat bibliotheken in het algemeen één ding heel goed doen. • Een framework zoals Angular biedt oplossingen voor alle niveaus van applicatieontwikkeling. Van het structureren en binden van data tot Ajax-communicatie met webservers, het verwerken van geretourneerde gegevens in een client-sided datamodel en het maken van herbruikbare componenten. Bibliotheken kunnen in het algemeen gecombineerd worden in een project om gezamenlijk het beste resultaat te bereiken. Bij frameworks wordt daarentegen één keuze gemaakt en wordt de app gebouwd volgens de richtlijnen en kenmerken van het gekozen framework.
Afbeelding 1.2 In een framework zoals Angular, maar ook in alternatieven zoals Polymer, Aurelia of Ember, worden alle taken van een applicatie gebundeld en geïntegreerd aangeboden. De leercurve is steiler, maar het resultaat is een consistentere en eenvoudigere (en dus goedkoper te onderhouden) applicatie.
/3
/ Hoofdstuk 1 / Kennismaken met Angular
Geen combinaties We zullen in de praktijk bijvoorbeeld nooit zien dat een app tegelijk Angular en React (een alternatief framework) gebruikt. Ook combinaties van Angular met Polymer of Vue.js (andere alternatieven) komen niet voor. U bouwt de site ofwel in Angular, ofwel in React. Niet in beide.
Omschrijving van Angular Het framework Angular wordt op de officiële site omschreven als: “One framework. Mobile and desktop.” Dat geeft het doel voldoende aan, dachten wij zo. Met Angular is het relatief eenvoudig om complexe webapplicaties te schrijven, omdat het framework als het ware een abstractielaag biedt tussen de browser, de logica van de app en de data waarmee wordt gewerkt. Van oudsher wordt dit vaak aangeduid met de term MVC, voor Model-View-Controller, maar dit wordt langzamerhand een beetje losgelaten. Als u toch deze vergelijking nog wilt maken: • Model De data die de applicatie binnenkomt (meestal uit een database, via een Ajax-aanroep) heeft een bepaalde structuur en wordt het model genoemd. • In Angular maakt u JavaScript-klassen die het Model representeren. • Controller De logica in de applicatie bewerkt data in het model. Deze voegt bijvoorbeeld losse velden zoals firstname en lastname samen tot een veld fullname dat in de gebruikersinterface (user interface) wordt getoond. • In Angular is de Controller ook weer een JavaScript-klasse. De controller hoort altijd bij een bepaalde component. /4
/ Angular /
• View De gebruikersinterface bestaat uit HTML-sjablonen (templates) waarin de – eventueel bewerkte – gegevens worden getoond. De HTML-sjabloon is daarmee de view van de applicatie. • Ook nu weer behoort de view van een component tot een bepaalde JavaScript-klasse in een Angular-applicatie. Er zijn – met uitzondering van index.html – geen ‘losse’ HTML- pagina’s meer in de applicatie. Alles is gebonden aan een component. Angular is daarmee, net als de voorganger AngularJS, een compleet client-sided MVC-framework. Het is volledig in JavaScript geschreven en draait ook volledig in de browser. Idealiter is de app compleet losgekoppeld van de server en database waar de gegevens vandaan komen. Alle communicatie vindt plaats via Ajax-aanroepen. Uiteraard gaan we hier later in dit boek nog dieper op in.
Geen ‘MVC’ meer Het begrip MVC om de architectuur voor AngularJS aan te duiden wordt langzamerhand minder gebruikt. De terminologie van MVC zou te strikt zijn en niet goed passen bij de flexibiliteit van Angular. Uit andere technologieën kent u misschien het begrip MVVM (Model-View-ViewModel). Ook dit is te vertalen naar een Angular-structuur. Andere ontwerppatronen (design patterns) zijn bijvoorbeeld Model-View-Adapter en Model-View-Presenter. Om die reden wordt ook wel aangeduid als een MV*-framework (Model-View-Whatever). De begrippen controller en view zullen we echter zeker nog tegenkomen bij het maken van Angular-apps.
/5
/ Hoofdstuk 1 / Kennismaken met Angular
Afbeelding 1.3 De homepage van Angular op angular.io. Start hier voor officiële downloads, documentatie en meer.
Angular op internet De homepage van Angular is te vinden op angular.io. Hier kunt u artikelen lezen, onlinelessen volgen, deelnemen aan discussies, video’s bekijken van de diverse Angular-conferenties en meer. Ook is dit het startpunt voor de officiële documentatie. Kies hiervoor de optie Docs, Getting Started of Docs, Fundamentals uit het hoofdmenu. Wilt u helemaal los gaan, dan kunt u een eigen versie van Angular bouwen. Ga naar github.com/angular/angular om de broncode te bekijken, te bouwen en eventueel aan te passen voor eigen gebruik. In dit boek doen we dat niet.
/6
/ Angular /
Versies van AngularJS en Angular AngularJS (de oude versie, ook wel bekend als Angular 1.x) is rond 2009 ontstaan als intern project bij Google. Misko Hevery (@mhevery op Twitter) is de ‘vader van Angular’. Samen met projectmanager Brad Green (@bradlygreen) bouwde hij AngularJS uit tot volwaardig framework dat ook door anderen gebruikt kon worden. Rond 2011 gaf Google het onder de MIT-licentie vrij als opensourcesoftware. Daarna volgde AngularJS min of meer het gebruikelijke upgrade pad. Er werden nieuwe mogelijkheden toegevoegd, fouten gerepareerd en prestaties verbeterd, maar de globale werking van Angular 1.x was met elke nieuwe versie in ieder geval ongeveer gelijk. Het was relatief eenvoudig applicaties bij te werken naar de nieuwste versie. Angular Heel anders is dat met Angular 2 en hoger. Er zijn eigenlijk precies zeven overeenkomsten tussen AngularJS en Angular 2+. Dat zijn de letters A, N, G, U, L, A, en R. Het is niet overdreven om te zeggen dat Angular een compleet nieuw en ander framework is, met toevallig dezelfde naam. Daar zijn wel redenen voor (zie ook verderop), maar erg geliefd heeft team Angular zich met deze strategie niet gemaakt. Veel kennis uit AngularJS 1.x-applicaties kan in de prullenbak als u overstapt naar Angular. Afhankelijk van de codeerstijl van een Angular 1.x-app zal het niet, of alleen met een aanzienlijke investering in tijd (en dus kosten), mogelijk zijn om een project te upgraden naar Angular 2 of hoger (momenteel meestal minimaal Angular 6).
/7
/ Hoofdstuk 1 / Kennismaken met Angular
Afbeelding 1.4 Versies van AngularJS (Angular 1.x) en Angular. Het upgraden van AngularJS-toepassingen naar Angular 2 en hoger is lastig. Daarom staat er een streep tussen.
Afbeelding 1.5 Versies volgen elkaar in hoog tempo op. Lees de laatste ontwikkelingen in het releaseschema. Googel eventueel naar Angular Tentative Release Schedule om dit makkelijk te vinden.
/8
/ Angular /
In dit boek: Angular 6 In dit boek gebruiken we Angular 6, uit april 2018. Dit was op het moment van schrijven de meest recente versie. De versienummering van Angular is omstreden. Na Angular 2 verscheen Angular 4 (versie 3 werd overgeslagen) en vervolgens wordt getracht elke zes maanden een nieuwe major release uit te brengen. Deze hoge upgradesnelheid kan problemen met zich meebrengen in grotere bedrijven, waar de ontwikkelingen niet zo snel gaan. Lees altijd goed de releaseopmerkingen om te zien wat er nieuw is, en of er breaking changes zijn met voorgaande versies.
Versienummers? Team Angular adviseert om in de communicatie geen versienummers meer te gebruiken. Versienummers zijn interessant voor ons, als programmeur, maar voor managers en gebruikers van de applicatie bieden ze geen extra waarde. Spreek daarom gewoon over ‘Angular-applicaties’. Niet over Angular 2, of Angular 4, of nog anders. De oude, 1.x-toepassingen heten AngularJS-apps. Er zijn nu dus twee pijlers: AngularJS-apps (alles van Angular 1.x) of Angular (Angular 2 en hoger). Van AngularJS verschijnen na de zomer van 2018 geen nieuwe versies meer. AngularJS 1.7 is de laatste major release.
/9
/ Hoofdstuk 1 / Kennismaken met Angular
Changelog lezen Hoewel het saai werk is, is het altijd een goed idee om de pagina changelog.md te lezen. Hierin wordt beschreven welke wijzigingen zijn doorgevoerd in Angular sinds de laatste versie en welke fouten zijn gerepareerd. Pak deze pagina er daarom bij als u zelf uw versies van Angular wilt updaten. Vergeet niet om in dat geval ook de versienummers in package.json aan te passen (zie verderop). Als u Googelt op Angular Update Guide vindt u bovendien een applicatie die aangeeft wat de beste manieren zijn om applicaties te upgraden. Dit is uiteraard alleen van belang als er al applicaties zijn die moeten worden bijgewerkt naar een nieuwere versie. In dit boek gebruiken we dit niet. U leert nieuwe Angular-apps maken vanaf het nulpunt. We gaan er niet van uit dat er al code aanwezig is.
Afbeelding 1.6 Saai, maar noodzakelijk. Lees de wijzigingen en eventuele ‘breaking changes’. Ze staan in changelog.md op github.com/angular/angular. Ook de Angular Update Guide kan handig zijn bij het opwaarderen van bestaande Angular-applicaties.
/ 10
/ Angular /
Direct aan de slag Wilt u direct met een eerste Angular-app aan de slag? Sla dan de rest van het hoofdstuk voorlopig over en begin met de praktijk van hoofdstuk 2. Kom hier later nog eens terug als u meer wilt weten over enkele diepgaande achtergronden bij Angular.
Angular-concepten Er zijn een aantal kernbegrippen waar u in elke Angular-app mee te maken krijgt. Deze concepten zijn geen van alle uitgevonden door het Angular-team zelf, maar geleend uit de andere ontwikkelomgevingen en daarna met een JavaScript-implementatie toegepast in het framework. In de loop van het boek komen al deze concepten uiteraard aan de orde. Hier noemen we alvast kort de belangrijkste. Waar mogelijk zullen we de verschillen met AngularJS 1.x aangeven. Het is overigens niet nodig dat u AngularJS kent voordat u met Angular aan de slag gaat.
Afbeelding 1.7 Enkele belangrijke concepten bij het maken van Angular-
applicaties.
/ 11
/ Hoofdstuk 1 / Kennismaken met Angular
Modulair programmeren en componenten Kernwoord in het maken van Angular-applicaties is het werken met componenten. Een Angular-app wordt volledig opgebouwd uit componenten. Een component kan bestaat uit meerdere onderdelen: • TypeScript-componentannotatie die aangeeft hoe de component werkt (@Component); • een HTML-sjabloon met de gebruikersinterface (de view) van de component; • een JavaScript-klasse met de logica van de component (de controller); • JavaScript-statements import en export die aangeven welke afhankelijkheden (dependencies) de component heeft en welke onderdelen herbruikbaar zijn in andere componenten (geëxporteerd worden). Nog meer dan AngularJS 1.x is een app in Angular opgebouwd uit componenten. In AngularJS was er altijd één overkoepelende module die het startpunt van de applicatie was. Dit werd aangegeven met angular.module(…). Componenten zijn in principe containers die alle logica en informatie over de gebruikersinterface bevatten om de component te laten werken. In het volgende hoofdstuk maakt u direct uw eerste component en daarmee uw eerste Angular-app. Modules Een component is altijd opgenomen in een module. Componenten draaien niet uit zichzelf. Hoewel er stemmen zijn om modules uit toekomstige versies van Angular te verwijderen (of in ieder geval optioneel te maken), bestaan Angular-toepassingen op dit moment nog uit minimaal de volgende onderdelen: / 12
/ Angular /
• Elke applicatie heeft minimaal één module (maar vaak meer). • De standaardnaam hiervoor is de klasse AppModule, in het bestand app.module.ts. We adviseren om deze naamgeving aan te houden, maar technisch gezien mag u elke naam kiezen die u wilt. • Elke module bevat minimaal één component (maar vaak zijn dit er – veel – meer). • De standaardnaam hiervoor is de klasse AppComponent, in het bestand app.component.ts. Ook hiervoor mag u in principe elke gewenste naam kiezen. Voor de duidelijkheid heet de startcomponent echter meestal AppComponent. Modules kunt u hiermee beschouwen als een soort mini-applicaties. Modules kunnen in andere modules worden opgenomen om zo de functionaliteit van de hoofdmodule uit te breiden. Dit zullen we later in dit boek zien als we bijvoorbeeld gebruikmaken van de HttpClientModule (om HTTP-mogelijkheden aan de app toe te voegen) of de FormsModule importeren (om formulieren in de app te kunnen gebruiken).
Java en .NET-achtergrond Veel meer dan andere frameworks voor webdevelopment is Angular een framework voor programmeurs. Vooral degenen met een achtergrond in Java of .NET kunnen hun hart ophalen. Eindelijk is het mogelijk om ook op het web met klassen, constructors, getters en setters te werken. Voor die programmeurs is de overstap naar Angular eenvoudiger dan bijvoorbeeld naar React, Aurelia of AngularJS 1.x. Wie gewend is aan traditioneel webdevelopment waarbij voornamelijk wordt gewerkt in HTML-pagina’s en Java Script, moet aan Angular behoorlijk wennen.
/ 13
/ Hoofdstuk 1 / Kennismaken met Angular
Dependency injection Componenten kunnen afhankelijk zijn van andere componenten of van services die de component van gegevens (data) voorzien. Deze afhankelijkheden worden door Angular ingevoegd op het moment dat de component daar in de code om vraagt. Dit principe heet dependency injection. Het wordt vaak afgekort met DI, dat doen we ook in dit boek. Anders dan in Angular 1 zijn componenten zelf verantwoordelijk voor het opvragen van afhankelijkheden. In Angular 1 moeten afhankelijke modules op het moment van instantiëren van de applicatie ingevoegd worden. U kent in dat geval code als: angular.module(‘myApp’, [‘ngRoute’, ‘ngCharts’, …]); // DI in Angular 1
In Angular 2 en hoger vindt DI niet plaats op applicatieniveau, maar op component-/moduleniveau. Met nieuwe sleutelwoorden als import en in de constructor() van een klasse worden afhankelijkheden geïnjecteerd. De opdracht om bijvoorbeeld een ProductService te injecteren in een klasse en deze direct te instantiëren ziet er zo uit: import {ProductService} from ‘./shared/services/product.service’; class myProducts{ … constructor(private productService : ProductService){ … } }
Ook met DI gaat u in dit boek nog uitgebreid aan de slag en als het goed is denkt u er straks niet eens meer bij na.
/ 14
/ Angular /
Consistentie AngularJS 1.x is het resultaat van een gestage, jarenlange ontwikkeling, waarbij telkens ‘nieuwe ballen in de kerstboom werden gehangen’. De eerste versie van AngularJS stamt al uit 2009, dus dat zijn veel ballen. Het was destijds een revolutionair framework en bood mogelijkheden die geen enkel ander framework had. Maar achteraf gezien zou het in sommige gevallen beter zijn geweest om eerst wat langer na te denken over het implementeren van bepaalde concepten. Wie heeft in AngularJS 1.x bijvoorbeeld niet geworsteld met het principe van .factory(), .service() en .provider()? Dit zijn concepten met een verschillende naam, maar ze doen allemaal – ongeveer – hetzelfde. Of denk aan de filters uit AngularJS 1.x. Deze doen van alles, behalve data filteren! Ja, er is één filter, met de naam filter (het filter-filter) dat wél filtert. De rest maakt alleen maar op. Ook dat is een ontwerpbeslissing die achteraf bezien beter anders had kunnen zijn. In Angular zijn beslissingen beter doordacht. Het voordeel van Angular is dat er vooraf lang is nagedacht over hoe het framework moet functioneren en hoe componenten moeten worden genoemd. Het is daarmee veel consistenter en eenduidiger dan AngularJS 1.x. Ook de werking van databinding, attribuutbinding en gebeurtenisbinding is veel consistenter dan in Angular 1. Dat is voor AngularJS-veteranen even schrikken (‘wat is er met mijn directives gebeurd!’), maar voor iemand die Angular zonder voorgeschiedenis leert, is het veel eenvoudiger geworden.
/ 15