Generating new routes in Angular-CLI

Now we are ready to start really digging into the details of routing in Angular; how to create new routes and how to redirect to routes in your application, including error handling. We'll also cover how to nest routes and use route preloading to speed up your application navigation.

Note

Creating new routes: Routing in Angular is handled by the optional Angular router package and must be imported into your application to be used.

Getting ready

To mount the router to the root of our application, we must first import the RouterModule from the router and call the forRoot method to tell the router that we are setting up routes on the root of our web application:

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { AppComponent } from'./app.component'

@NgModule({
  ...
    imports: [
  BrowserModule,
  FormsModule,
  HttpModule,
RouterModule.forRoot([])
],
...
})
export class AppModule { }

With the router set up on the root of our web application, we are now able to provide a mapping between the Universal Resource Indentifier (URI) of the route that we want to show in the browser and the component we want to be rendered on that route. For the sake of simplicity, we will imagine we are building a simple blog website and will stub out two components: posts and authors. Posts will show all the available blog posts on our blog, whereas authors will show a list of all authors of blog posts on our blog:

ng g component posts
ng g component authors

This will scaffold out the two components as well as add them to our app module so that we can start routing to them.

How to do it...

After scaffolding the two components and adding them to our app module, let’s follow these steps to add our routes:

1. First, we will need to create the route map between these components and the two routes we want to create: /posts and /authors. We will do this by passing an array of route configuration objects into the forRoot method of our RouterModule. This configuration tells the router that the /posts route will resolve with the PostsComponent, and the /authors route will resolve with the AuthorsComponent:

@NgModule({
  ...
  imports: [
    ...
    RouterModule.forRoot([
      {
        path: "posts",
        component: PostsComponent
      },
      {
        path: "authors",
        component: AuthorsComponent
      }
    ])
  ],
  ...
})
export class AppModule { }

2. With our routes and components now properly associated, we just need to provide an outlet, where this content can be presented, and links to make navigating to it more easily. We can add both of these to our app.component.html template, as follows:

<nav>
  <a routerLink="/posts">Posts</a>
  <a routerLink="/authors">Authors</a>
</nav>
<router-outlet></router-outlet>

How its works...

Instead of a traditional href attribute, we tell the router to navigate to a route we've configured by attaching the routerLink directive to it. This directive takes a path string that matches a path configured with our router. Next, we provide the outlet where our content will be presented through when a route is active with the router-outlet directive. With these two elements in place, we can see two folders called Posts and Authors in our app folder; clicking on either link will add the posts works! text for /posts and authors works! for /authors.

By updating the template within our components, we can change the content that shows up when the user navigates to the associated route. We can also change the template in app.component.html to alter the shared master template that is used by both routes. We will explore this topic more in the next chapter when we upgrade our application's styling.