Build Your First Angular Website: Routing to Two Pages

Celý článek

Now that we have two pages, let's start routing to them. We want to be able to click around to our pages. Currently we are showing both our HomeComponent and ContactComponent right on the home page. That won't do!

Adding Routes

Since we created this project using the Angular CLI and the --routing flag, we are already given an AppRoutingModule where we can define our routes.

This module will listen for the url changes and show a specific component based on the url.

Let's quickly add our components to their respective routes. Open up src/app/app-routing.module.ts and see that there is already a convenient routes array for us.

const routes: Routes = [];

Let's add our routes!

Adding the Home Route

To add the home route, we have to import our HomeComponent first so that the router knows what to route to. Once it is imported, we can apply it in the routes:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './components/home/home.component';

const routes: Routes = [
  {
    path: '',
    component: HomeComponent
  }
];

Now there's one last thing here we need to do. This route will actually return the HomeComponent for every route. This is because the path: '' will match all routes. In the router's eyes, the following are the same since they end in /:

• http://localhost:4200/
• http://localhost:4200/contact/

We need to tell the router to only look for the first one with no extra path parts. Add pathMatch: 'full to the home route:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './components/home/home.component';

const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    component: HomeComponent
  }
];

Now that route is ready for primetime.

Adding the Contact Route

We'll do the same for our contact route:

// ...
import { ContactComponent } from './components/contact/contact.component';

const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    component: HomeComponent
  },
  {
    path: 'contact',
    component: ContactComponent
  }
];

Adding Links to our Header

Now we have our routes ready! Next up, we need to create links inside of our HeaderComponent's template.

The Angular router comes with a handy way to create links. Let's first create the HTML with some Bulma classes. In the HeaderComponent:

<nav class="navbar is-dark">

  <!-- logo -->
  <div class="navbar-brand">
    <a class="navbar-item">
      <img src="assets/img/angular-logo.png">
    </a>
  </div>

  <!-- menu -->
  <div class="navbar-menu">
    <div class="navbar-start">
      <a class="navbar-item">Home</a>
      <a class="navbar-item">Contact</a>
    </div>
  </div>

</nav>

We've added the menu section with the links.

Now we can use Angular's routerLink directive to tell these links where to go:

<a class="navbar-item" routerLink="">Home</a>
<a class="navbar-item" routerLink="contact">Contact</a>

Notice that when defining routes, you don't add the trailing slash (/). In the template, you can add it or omit it. I am omitting it here because it matches our routes better.

Removing Components from Our App's Template

Remember when we first created these components, we wrote them directly into our AppComponent:

@Component({
  selector: 'app-root',
  template: `
    <!-- header -->
    <app-header></app-header>

    <!-- testing the contact page -->
    <app-contact></app-contact>

    <!-- testing the home page -->
    <app-home></app-home>

    <!-- routes will be rendered here -->
    <router-outlet></router-outlet>

    <!-- footer -->
    <app-footer></app-footer>
  `,
  styles: []
})
export class AppComponent {}

Now that the router is working, those components will be injected into router-outlet. We can remove those two components now:

@Component({
  selector: 'app-root',
  template: `
    <!-- header -->
    <app-header></app-header>

    <!-- routes will be rendered here -->
    <router-outlet></router-outlet>

    <!-- footer -->
    <app-footer></app-footer>
  `,
  styles: []
})
export class AppComponent {}

Our links work now and the view gets updated with the specific component. Notice our page doesn't even have to refresh. A true single-page app!