Inleiding.

Over het project.

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 bewaard en bewerkt.
    De data wordt hier nog niet in een database bewaart, 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.
Angular + Firebase project

Nieuw project starten.

Voor je verder gaat, update je best de Angular CLI. Op moment van schrijven is dit versie 1.5.0. (Deze versie genereert een Angular 5.0.0 project.)

$ npm uninstall -g @angular/cli
$ npm install -g @angular/cli
  • Open de terminal op je data-schijf.
  • Maak een nieuw Angular-project met geïntegreerde router-module (-r) maar zonder spec-files (-st) aan. 
    $ ng new projectTMK -r -st
  • Open het project in WebStorm en start de server. 
    $ ng serve -o

Bootstrap integreren.

  • Open een tweede terminalvenster en installeer Bootstrap en font-awesome via nmp: 
    $ npm install --save bootstrap@4.0.0-beta.2 font-awesome
  • Open .angular-cli.json en voeg vooraan de styles-array volgende referenties toe:
    ...
"styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "../node_modules/font-awesome/css/font-awesome.min.css",
    "styles.css"
],
  • Herstart de server.

ngx-bootstrap 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.

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

  • Installeer ngx-bootstrap (je hebt v2 beta nodig voor Angular 5.0.0). 
    $ npm install --save ngx-bootstrap@latest
  • Open src/index.html en voeg onderaan de body-tag het script toe dat ngx voor bootstrap 4 activeert. 
    
                    
    • 
                

            

            

                
ngx.module.ts.

                
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 van 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 ngx-modules:
                        
    $ ng g m ngx --flat
    
                    
    • 
                    
  • Open src/app/ngx.module.ts en vervang de code:
                        
    
                    
    • 
                

                
Importeer (lijn 3) de ModalModule uit ngx-bootstrap. Naarmate de toepassing vordert,
                    ga je nog extra modules importeren.

                    Voeg aan de imports-array (lijn8) ModalModule.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.
    • 
                    
  • Importeer de NgxModule.
    • 
                    
  • Voeg de module toe aan de imports-array.
    • 
                

                
...
import { NgxModule } from './ngx.module';
...
@NgModule({
    ...
    imports: [
        BrowserModule,
        AppRoutingModule,
        NgxModule
    ],
    ...
})

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

            

            

                
Modal-dialog testen.

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

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