Assignment #16 - Adding Routing

        Angular is a Single PAge Application, which mean we have only one
        HTML page, and if the User needs to see other components we need
        to change out an exisiting component with the new one.


        When we created the Angular Project, we were asked a series of questions, including
        if we wanted Routing added to the project, we said Yes.  (See Assignment #4)

        the result of this was our app.module.ts has a "placeholder" for Routing.

        If we had said No to the question, we could add Routing later via this command:

        ng generate module app-routing --flat --module=app

         --flat puts the file in src/app instead of its own folder
         --module=app tells the CLI to register it in the imports array of the AppModule


        the resulting app.module.ts entry is:


        import { NgModule } from '@angular/core';
        import { BrowserModule } from '@angular/platform-browser';
        import { HttpClientModule } from '@angular/common/http';

        import { AppRoutingModule } from './app-routing.module';        <= this is added to our Module
        import { AppComponent } from './app.component';
        import { MenuComponent } from './menu/menu.component';
        import { WelcomeComponent } from './welcome/welcome.component';
        import { MessageComponent } from './message/message.component';
        import { FooterComponent } from './footer/footer.component';
        import { NumberedComponent } from './numbered/numbered.component';
        import { KeyedComponent } from './keyed/keyed.component';
        import { DatedComponent } from './dated/dated.component';

        @NgModule({
          declarations: [
            AppComponent,
            MenuComponent,
            WelcomeComponent,
            MessageComponent,
            FooterComponent,
            NumberedComponent,
            KeyedComponent,
            DatedComponent
          ],
          imports: [
            BrowserModule,
            AppRoutingModule,                                          <= this is also added
            HttpClientModule
          ],
          providers: [],
          bootstrap: [AppComponent]
        })
        export class AppModule { }

        --------------------------------------------------------------------------

        We also get an "starter" app-routing.module.ts file that looks like:

        import { NgModule } from '@angular/core';
        import { Routes, RouterModule } from '@angular/router';


        const routes: Routes = [];                        <= notice this is empty

        @NgModule({
          imports: [RouterModule.forRoot(routes)],
          exports: [RouterModule]
        })
        export class AppRoutingModule { }

        --------------------------------------------------------------------------

        We want our menu links to switch components, take out the welcome, component
        and put in the numbered component (for example)

        right now our app.component.html file looks like this:

        <div>
          <app-menu></app-menu>
          <app-welcome></app-welcome>          <= this is the spot where we want to switch components
          <app-message></app-message>
          <app-footer></app-footer>
        </div>


        we need to tell Angular to use this loaction on the page, so we change
        app.component.html to:

        <div>
          <app-menu></app-menu>
          <router-outlet></router-outlet>      <= this is the key to Routing
          <app-message></app-message>
          <app-footer></app-footer>
        </div>


        ---------------------------------------------------------------------------------

        Next we need to setup the URLs that point to the components, we edit the
        app-routing.module.ts file and fill in the Routes array like this:

        const appRoutes: Routes = [
	        {path: 'welcome', component: WelcomeComponent},
	        {path: 'keyed/:id', component: KeyedComponent},
	        {path: 'numbered/:id', component: NumberedComponent},
	        {path: 'dated/:id', component: DatedComponent},
	        {path: '', redirectTo: '/welcome', pathMatch: 'full'},
        ];


        Please notice we have 3+ URL paths,
        the welcome,
        keyed (plus an id so we know which keyed, remember we have 4 different keyed humor types),
        numbered,
        dated,
        and finally the "default" route which will redirect to the welcome URL

        --------------------------------------------------------------------------------------


        Ok; so far we have: the Routes set up, the place to switch components into, the module
        configured to support Routing, the only thing left is to make the menu links work
        with Routing

        the menu.component.html currently says (see assignment #12):

        <nav class="nav">
            <a class="nav-link active" href="#">Welcome</a>
            <a *ngFor="let category of data" class="nav-link" href="#">{{category.name}}</a>
        </nav>


        we need to add the Angular Routing for each a tag, change this to:


        <nav class="nav">
            <a class="nav-link active" [routerLink]="['welcome']">Welcome</a>
            <a *ngFor="let category of data" class="nav-link"
                 [routerLink]="[category.type + '/' + category.id]">{{category.name}}</a>
        </nav>


        Notice the [routerLink] data-bindings, these are key, also notice the URLs being built
        they match the URL paths Routes array

        ---------------------------------------------------------------------------

        save everything, run: ng server and try it out in the Browser.

        you should see the "center" of your web site change when you click a menu link