8. Multipage apps
8. Multipage apps
In deze oefeningenreeks oefen je op:
- Het maken van apps met meerdere pagina's op een onderhoudbare manier
- Het maken van custom components met attributen en events
Voor deze oefeningen zijn startbestanden voorzien, je vindt deze op GitPub.
Startbestanden
Oefening 1
Voor deze oefening beginnen we met het maken van een app met enkele pagina's en het gebruik van de router. We maken ook gebruik van een navbar.
De startbestanden voor deze oefening bevatten een template zoals je zal krijgen op het examen (hier komen nog uitbreidingen op in les 8). Gebruik deze om een app te maken met 3 pagina's:
- Een homepage
- Een pagina 'Pokémon'
- Een pagina 'Trainers'
De html van de pagina's is telkens gegeven. Je moet hier nog wel aanpassingen aan doen om de links en navigatiebar te laten werken. De layout van de kaart waarin je data toont doet er niet veel toe. Je mag gerust het simpel houden of een AI vragen de layout ervan te ontwerpen. De data haal je uit de datamanager.
Zorg ook voor een navigatiebar die getoond wordt op alle pagina's en die router gebruikt om te navigeren. Pas ook de andere links op de homepagina aan zodat deze werken met de router.
Screenshots:
Oefening 2
In deze oefening ga je een deel van de Pokémon website ombouwen naar een dynamische app. Vertrek van je resultaat van oefening 1.
- Maak een custom element voor de card van 1 Pokémon, zorg dat dit custom attributen heeft voor alle properties van een Pokémon.
- Vervang de code om Pokémons te tonen zodat deze gebruik maakt van het custom element.
- Voorzie op dat element ook een delete knop.
- Zorg dat de delete werkt met een custom event.
Uitbreidingen:
- Doe dit ook voor de trainers als herhaling.
- Maak een extra pagina/model/... bij voor de verschillende regions.
- Gebruik data uit een online API als startdata voor je datamanager.
- ...
