Angular 2 Router & Navigation Tutorial

Angular 2 is known for single page applications (SPA's), but even in such applications, you need a way to navigate between different views (defined by components). As such, you must utilize the Angular 2 router, which is what we're going to cover in this tutorial.

But first, if you prefer watching a video on this subject, watch here:

What is the Angular 2 Router?

Well, from the docs, the router enables navigation from one view to the next as users perform application tasks. Simple enough, right?  Right, so let's get to the good stuff, such as how to implement it!

But first, a word about the Angular-cli and Routing..

Unfortunately, at the time of writing this tutorial and recording the video above, the angular client (angular-cli) does not yet support a way to generate routes. So you're going to have to learn how to do it by hand until then!

Step 1: Make sure you have at least 2 Components

This should hopefully be obvious enough. Routes work by transitioning between views, which are defined within components. So, if you only have 1 component, then you only have 1 view. 

I cover how to create components right here at Coursetro. If you're using the angular-cli, in the command line just type:

ng generate component about

And do it another time to create a component called "services".

Step 2: Create an app.router.ts file

Now let's create a module to store our routing information specifically. Place it within the /app folder. It should look like this, assuming you have 3 components (the default app.component, and the about / services component from above):

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

import { AppComponent } from './app.component';
import { AboutComponent } from './about/about.component';
import { ServicesComponent } from './services/services.component';

export const router: Routes = [
    { path: '', redirectTo: 'about', pathMatch: 'full' },
    { path: 'about', component: AboutComponent },
    { path: 'services', component: ServicesComponent }
];

export const routes: ModuleWithProviders = RouterModule.forRoot(router);

In a nutshell, we're importing the necessary routing members on the first 2 lines. Then we're importing the components that currently exist within our application.

After that, we're defining a constant that contains the routes that we wish to create. "path" defines the URL; so "about" becomes http://someurl.com/about -- then we specify the component associated with that view.

Step 3: Import the router to app.module.ts

So in the imports at the top of app.module.ts, we add:

import { routes } from './app.router';

And then within the @NgModule decorator meta, we add within imports "routes":

   imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routes
  ],

Step 4: Add <router-outlet></router-outlet>

Now within app.component.html, we add:

<router-outlet></router-outlet>

If you have a navigation, you can place the code above, beneath the navigation.

Step 5: Add the routerLink directive

Now in the view that contains our navigation links, we add this:

<ul class="nav navbar-nav">
  <li>
    <a routerLink="about">About</a>
  </li>
  <li>
    <a routerLink="services">Services</a>
  </li>
</ul>

Step 6: Ensure <base href="/"> is in index.html

If you used the angular-cli to create the project you're working with, it will automatically add this in the head tag. If it's not there, add it:

<base href="/">

And that's all it takes to create a simple Angular 2 router navigation! Once the angular-cli releases a way to generate routes at the command line, most of these steps will be unnecessary.