Module 2.3: Routing

Now that we’ve got the header and footer appearing, it’s time to handle the stuff that happens between them!

Planning out Components

For our website, we will start with 2 main views. The first view is the “Home” view that displays the main message board, and the other view will allow us to register as a new user. We'll need to make components for each of these views! Go ahead and run the following to create these components.

ng generate component home

ng generate component register

Let’s look at our app.component.html file. All the code between the header and footer needs to be replaced with the “home” and “register” components. To illustrate this idea take a look at the photo below, the green code is the header and footer that should say, and the red code is the stuff in the middle that we want to change, depending on which view we are on.

img

Router

Angular has a feature called the “Router” that handles which view is displayed. Let’s configure that router. Before we get into the actual “router” stuff, we need to tell our app that we need the “Router Module”. Angular comes with a module for routing - they already did lots of behind-the-scenes work to get it working, we just need to import their hard work into our project.

In app.module.ts, include the following import to the top of your file

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

Then add a line to imports to make it look like the following:

imports: [
    BrowserModule,
    RouterModule.forRoot(routes),
  ]

The .forRoot() function takes in one argument, the routing information for our website.

Next, we need to create our routes. Add the following code below our imports and above our @NgModule

const routes: Routes = [
  {
    path: '',
    component: HomeComponent
  },
  {
    path: 'register',
    component: RegisterComponent
  },
  {
    path: '**', redirectTo: '/'
  }
];

These routes should look similar to react routing, we're basically defining the paths users can take, and using "**" as the catch-all for any other possible route, this should always be last.

Next, in our app.component.html file we're replacing all of the code between header and footer with <router-outlet></router-outlet>. This is exactly what is sounds like - the outlet for the router. Whatever comes out of the router gets put here. On the “home” view, the “HomeComponent” will appear there. On the “register” view, the “RegisterComponent” will appear there instead.

Our finish app.component.html code should look like this:

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

Lastly, we need the <a href="#"></a> tags in the header to trigger the routes. We can NOT use vanilla HTML “href”... that’s not Angular, and Angular will not recognize it as something it has to handle. Instead of link tags having an “href” property, to switch between Angular routes there is a routerLink property instead. Update the header.component.html to use routerLink instead. (Leave the other href tags for the Create, Login, Logout - we’ll handle those later). Your header.component.html file should look like this:

<div class="row">
  <div class="col">
    <nav class="navbar navbar-expand-lg justify-content-between navbar-dark bg-dark">


      <!-- Left side of navbar -->
      <div class="row">

        <a class="white-text navbar-brand" routerLink="/">Message Board 💬</a>

        <ul class="navbar-nav">
          <li><a class="white-text bg-dark navbar-dark nav-link" routerLink="/">Home</a></li>
          <li><a class="white-text bg-dark navbar-dark nav-link">Create</a></li>
        </ul>

      </div>


      <!-- Right side of navbar -->
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-lg btn-outline-primary" routerLink="/register">Register</button>
        <button type="button" class="btn btn-lg btn-outline-primary">Login</button>
        <button type="button" class="btn btn-lg btn-outline-danger red-btn">Logout</button>
      </div>

    </nav>
  </div>
 </div>

Run ng serve in the terminal, open your app in your browser, and click the Home and Register links in the header.

Watch as the content between the header and footer changes - and it changes VERY quickly! It doesn’t matter how slow the user’s internet is - it will always be that fast! That’s because there is no request-response cycle, waiting for the server to send us the page content.

Since, we're at the end of a module, let's do a git commit. Next up, is Angular Data Binding.

Angular Data Binding