Angular route definition syntax

Let's take a brief look at the new syntax provided by the Angular router to define routes in our applications:

import {Component, NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {RouterModule, Routes} from '@angular/router';

import {HomeComponent} from './home/home.component';
import {AboutComponent} from './about/about.component';
import {AppComponent} from './app.component';

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

@NgModule({ 
  imports: [BrowserModule, RouterModule.forRoot(routes)],
  declarations: [AppComponent, HomeComponent, AboutComponent],
  bootstrap: [AppComponent]
})
export class AppModule {} 

We won't go into too much detail here since Chapter 7, Working with the Angular Router and Forms, and Chapter 8, Explaining Pipes and Communicating with RESTful Services, are dedicated to the new router, but let's mention the main points of the preceding code snippet.

The router lives in @angular/router. Since AppModule is the root module of our application, we use the forRoot method of RouterModule in order to import all the required directives and services exported by the router.

The parameter passed to the RouterModule.forRoot decorator shows how we define the routes in our application. We use an array with objects, which defines the mappings between routes and the components associated with them.