Part 11 : Routing in Angular 2

In this tutorial we will see the implementation of routing in angular 2.

How the navigation is implemented in angular 2.

Changing of link in the browser will change the page, covered in detail.

Click here to download complete project

App Module code

 import { NgModule }   from '@angular/core';  
 import { BrowserModule } from '@angular/platform-browser';  
 import { AppComponent } from '../../Views/Home/app.component';  
 import { AboutComponent } from '../../Views/About/about.component';  
 import { ContactComponent } from '../../Views/Contact/contact.component';  
 import { AppLayout } from '../Layout/app.layout';  
 import { Routing } from '../Router/route.component';  
 @NgModule({  
  imports:   [ BrowserModule, Routing ],  
  declarations: [ AppComponent,AboutComponent, ContactComponent, AppLayout ],  
  bootstrap:  [ AppLayout ]  
 })  
 export class AppModule { }  

Router code

 import { ModuleWithProviders } from '@angular/core';  
 import { Routes, RouterModule } from '@angular/router';  
 import { AppComponent } from '../../Views/Home/app.component';  
 import { AboutComponent } from '../../Views/About/about.component';  
 import { ContactComponent } from '../../Views/Contact/contact.component';  
 export const routes: Routes = [  
   { path: 'contact', component: ContactComponent },  
   { path: 'about', component: AboutComponent },  
   { path : '', component:AppComponent },  
   { path : '**', component:AppComponent }  
 ];  
 export const Routing : ModuleWithProviders = RouterModule.forRoot(routes);  

Layout

 import { Component } from '@angular/core';  
 @Component({  
  selector: 'my-app',  
  template: `  
  <div>  
  <a [routerLink]="['/']">Home</a>  
   <a [routerLink]="['/contact']">Contact</a>  
    <a [routerLink]="['/about']">About</a>  
    </div>  
    <router-outlet></router-outlet>  
  `,  
 })  
 export class AppLayout {  
  Title: string;  
  constructor() {  
   this.Title = "Home"  
  }  
 }