Het volledig project bestaat uit drie deelprojectjes.

1. Todo
   In deze toepassing verwerk je de basisblokken die je in elke Angular toepassing zal terugvinden. Je maakt componenten en child-componenten aan, je genereert een service waarin je de data bewaart en bewerkt.
   De data wordt hier nog niet in een database opgeslagen, maar wel in local storage.
2. Meteo
   Voor deze toepassing ga je een stapje verder. Met de HTML5 geolocation API lees je de gps-coördinaten van het toestel uit. Aan de hand van deze coördinaten (latitude en longitude) toon je de weersvoorspelling voor de volgende dagen. De gegevens zijn afkomstig van twee externe API's. De weersvoorspelling komt van Weather Underground API. De exacte plaatsnaam haal je op via http://nominatim.openstreetmap.org/.
   Ook hier gebruik je nog geen eigen database.
3. Chat
   Voor de laatste toepassing gebruik je twee diensten uit de Firebase omgeving.
   Authentication om in te loggen op de chat en Cloud Firestore om de chatberichten te bewaren.

Nieuw project starten.

Voor je verder gaat, update je best de Angular CLI. Op moment van schrijven is dit versie 6.1.5.

$ ng -v

• Open de terminal op je data-schijf.
• Maak een nieuw Angular-project met geïntegreerde router-module (--routing) maar zonder spec-files (-S) en SCSS in plaats van CSS (--style scss) aan.

  $ ng new projectTMK --routing -S --style scss

• Open het project in WebStorm en start de server.

  $ ng serve -o
  $ ng -v

Ng-bootstrap en Font Awesome installeren.

Bootstrap gebruikt standaard jQuery om bepaalde componenten, zoals bijvoorbeeld een drop-downmenu, te activeren. Echter Angular in combinatie met jQuery is vaak geen goede keuze. Beide frameworks zijn immers bedoeld om de DOM te manipuleren, maar ze doen dit op een totaal verschillende manier. Dit kan wel eens tot ongewenste resultaten of conflicten leiden. Voor de icoontjes gebruiken we Font Awesome.

ng-bootstrap neemt voor dynamische bootstrap-componenten de taak van jQuery over.

• Installeer ng-bootstrap en Font Awesome.

  $ npm install --save @fortawesome/fontawesome-free
  $ ng add @ng-bootstrap/schematics

Dit commando heeft drie documenten aangepast (zie console).

• package.json
  @fortawesome/fontawesome-free, @ng-bootstrap/ng-bootstrap, @ng-bootstrap/schematics en bootstrap zijn als dependencie toegevoegd.
• src/app/app.module.ts
  NgbModule geïmporteerd in de rootmodule.
• angular.json
  bootstrap.css aan de styles-array toegevoegd.

Bootstrap 4 (BS) en Font Awesome 5 (free) integreren.

Bootstrap is reeds geïntegreerd in angular.json. Dit is prima indien je de originele BS wilt gebruiken. Zoals je uit het eerste jaar weet, is BS volledig geschreven in SASS. SASS heeft als voordeel dat je zelf alle eigenschappen van BS kan (her)/definiëren. Daarom is het veel interessanter om niet het gecompileerde CSS-bestand te koppelen maar wel de originle SCSS-bestanden.

• Open angular.json en verwijder in de styles-array de referentie naar Bootstrap. Ziehier het resultaat:
  

  ...
  "styles": [
      "src/styles.scss"
  ],
  

• Herstart de server.
• Open src/styles.scss en leg een verwijzing naar Font Awesome (css) en naar Bootstrap (scss).
  (Experimenteer evententueel door enkele kleuren aan te passen.)
  

  // Overschrijf BS variabelen en mixins
  $theme-colors: (
          'primary': #009CAB,
          'danger': #F04C25,
          'salmon' : salmon
  );
  
  // Link naar BS en FA
  @import "~bootstrap/scss/bootstrap";
  @import "~@fortawesome/fontawesome-free/css/all.min.css";
  
  // Eigen code/partials
  

ng-bootstrap componenten toevoegen.

Meestal ga je alle componenten, modules, services enz... registreren in src/app/app.module.ts. Zodra het project wat groter wordt, zal ook dit bestand aanzienlijk toenemen. Om alles wat overzichtelijk te houden, gaat men vaak blokken die bij elkaar horen in een aparte modules configureren.

Een ander voordeel om met verschillende modules te werken, is dat je voor de routes lazy-loading kan toepassen. Dit kan de applicatie aanzienlijk versnellen aangezien bepaalde delen codes pas worden ingeladen zodra de route wordt opgeroepen.

• Maak een nieuwe module voor de ng-bootstrap:

  $ ng g m sharedModules/ng-bootstrap --flat

• Open src/app/sharedModules/ng-bootstrap.module.ts en vervang de code:

Importeer (lijn 3) de NgbAlertModule uit ng-bootstrap. Naarmate de toepassing vordert, ga je nog extra modules importeren.
Voeg aan de imports-array (lijn8) NgbAlertModule.forRoot() toe.
Elke module die je importeert, moet je eveneens in de exports-array (lijn 10 - 12) declareren zodat deze door app.module.ts worden herkend.

app.module.ts.

• Open src/app/app.module.ts.
• Verwijder bovenaan de pagina de import. import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
• Verwijder NgbModule.forRoot() uit de imports-array.
• Importeer de NgxModule.
• Voeg de module toe aan de imports-array.

...
import {NgBootstrapModule} from './sharedModules/ng-bootstrap.module';
...
@NgModule({
    ...
    imports: [
        BrowserModule,
        AppRoutingModule,
        NgBootstrapModule
    ],
    ...
})

• Alle extra ng-modules moet je vanaf nu nog uitsluitend in ng-bootstrap.module.ts importeren.

Alert testen.

Om de integratie te testen, voeg je ter controle een alert dialog toe aan de startpagina. Op het einde van deze test mag je de alert terug verwijderen.

• Open src/app/app.component.html en vervang de code:

• Open src/app/app.component.ts en vervang de code:

• Test de modal.