Routermodule.

Je kan de toepassing in vier grote blokken onderverdelen. Todo, meteo, chat en authenticatie (login/logout). Om de code overzichtelijk te houden, ga je voor elk blok een aparte map aanmaken. Niet verplicht, maar wel handig, is dat je alle imports, die UITSLUITEND bij één bepaald onderdeel horen, in een eigen module plaatst.

Met een Single Page Application (SPA) heb je in principe maar één URL (http://localhost:4200). Door in de toepassing een router te gebruiken, lijkt het voor de gebruiker alsof hij door een normale website navigeert. http://localhost:4200/todo, http://localhost:4200/meteo, ...

Bij het aanmaken van ons project, hebben we de router al mee gedefinieerd. De juiste modules zijn reeds geïntegreerd, maar enkel de paden ontbreken nog. Maar voor we de paden kunnen toevoegen, hebben we wel alle basiscomponenten nodig die we dan in de volgende stappen verder uitwerken.

Basiscomponenten en modules toevoegen.

• Maak de vier basismodules aan en importeer deze, met -m app, in app.module.ts.

• Maak nu de vier basiscomponenten aan.
  (De componenten worden automatisch in de dichtstbijzijnde module geregistreerd.)

Paden aanmaken.

Open nu de router en voeg alle paden toe. Omdat we geen echte homepage gebruiken, ga je de root doorverwijzen naar het todo-pad. Let op dat je ook alle niet-gedefinieerde paden, bijvoorbeeld http://localhost/aaaa, doorverwijst naar een bestaand pad. Zoniet krijg je fouten in de console.

• Open src/app/app-routing.module.ts. Vervolledig de Routes-array en importeer de modules.

• Test de paden manueel in de URL van de browser.

Paden in de navigatie configureren.

De URL's werken, maar nu moet je deze nog aan de navigatiebalk toevoegen. Voorlopig staan er in de navigatie enkel nog maar dummy-links (<a href="#!" ...>). Voor elke link, behalve voor logout, ga je het href-attribuut verwijderen en vervangen door de routerLink-directive.

Merk op dat je met de bootstrap-class active de geactiveerde link kan accentueren. Voorlopig staat deze class vast op de li-tag rond de todo-link. Ook hier bestaat een Angular-directive voor, namelijk routerLinkActive. Hier geef je de class in waarmee je het actieve pad kleurt. Voor Bootstrap is dit de class active.

• Open src/app/navbar/navbar.component.html.
• Verwijder op de li-tag (lijn 6) de class active.
• Vervang voor elke link (behalve voor logout) het href-attribuut door het routerLink-directive en voeg eveneens het routerLinkActive-directive toe.
• De logout-link gaan we later op een speciale manier gebruiken. Voorlopig mag dit een dummy link blijven. Als je op de link klikt, zal je aan de spinner naast de URL merken dat de browser de pagina toch vernieuwt. Om dit te vermijden, moet je het hekje binnen href vervangen door javascript:void(0).

Opdracht.