Angular Simple Basic Routing Example With Multiple Routes

ON our last tutorial, you learned how to add routes to a basic quickstart angular project.

On this tutorial, we will be adding more routes to our script, we are going to continue where we left off, if you just arrived on this post, i would recommend you go back to the first tutorial to see the code in the files. otherwise, you can start with a new angular quickstart

after you have completed the previous tutorial, lets add another component, we will have two component and a link for each component. lets create dashboard component

ng g c dashboard

after angular has created the new dashboard, add the routing in app.module.ts

1. Open file: app.component.html - Add the following HTML before the RoutingSimpleComponent link to add the dashboard link:

<a routerLink="/dashboard">Dashboard Component</a> |

2. Open file: app.module.ts -Add the dashboard component path before RoutingSimpleComponent

{ path: 'dashboard', component: DashboardComponent},

thats it, run the app and you will see two links, click on each link

if you need further help, i got this from https://angular.io/docs/ts/latest/tutorial/toh-pt5.html

 this is how each file should look like:

<h1>
{{title}}
</h1>
<hr>
<p>Click on each link to display the ***.component.html content</p>
<nav>
<a routerLink="/dashboard">Dashboard Component</a> | 
<a routerLink="/RoutingSimpleComponent">RoutingSimple Component</a>
</nav>
<br>
<router-outlet></router-outlet>

import { BrowserModule } from '@angular/platform-browser';
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';
import { RoutingSimpleComponent } from './routing-simple/routing-simple.component';
import { DashboardComponent } from './dashboard/dashboard.component';

@NgModule({
  declarations: [
  AppComponent,
  RoutingSimpleComponent,
  DashboardComponent
  ],
  imports: [
  BrowserModule,
  FormsModule,
  HttpModule,
  RouterModule.forRoot([
      // by default, it redirect the home page to the dashboard component
      //{ path: '', redirectTo: 'RoutingSimpleComponent', pathMatch: 'full'},         
   { path: 'dashboard', component: DashboardComponent},     
   {path: 'RoutingSimpleComponent', component: RoutingSimpleComponent}
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
  })
export class AppModule { }