Angular Route usage turorial

Steps to use Router Module in Angular

1. create a Route module to hold the route info. we can name it as app-routing.module.ts . Then we need to
   import these depended modules:

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

we also to import the components we defined and will be used when route match.
Add following code to define the content of route:

const routes:Routes=[
{path:'',redirectTo:'/api1',pathMath:'full'},
{path:'/api1',component:Component1},
{path:'/api2',component:Component2}
];

@NgModlue(
    {
        imports:[RouterModule.forRoot(routes)],
        exports:[RouterModule]
    }
)
export class AppRoutingModule{}

This is a code snippet for simle route module definition.

import {NgModule} from '@angular/core';
import {RouterModule,Routes} from '@angular/router';
import {DashboardComponent} from './Components/dashboard/dashboard.component';
import {PriceHistoryComponent} from './Components/price-history/price-history.component';


const routes:Routes=[
    {path:'',redirectTo:'/dashboard',pathMatch:'full'},
    {path:'dashboard',component:DashboardComponent},
    {path:'priceHistory',component:PriceHistoryComponent}
];

@NgModule({
    imports:[RouterModule.forRoot(routes)],
    exports:[RouterModule]
})
export class AppRoutingModule{}

2. we need to import this route we defined into the app.module.ts so that to apply it.

first we need to import the routingModule code snippet: import { AppRoutingModule } from './app-routing.module';
then we need to add the route module with name AppRoutingModule into imports.
code snippet here:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule} from '@angular/forms';
import {HttpModule} from '@angular/http';
import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';
import { DashboardComponent } from './Components/dashboard/dashboard.component';
import { PriceHistoryComponent } from './Components/price-history/price-history.component';

@NgModule({
  declarations: [
    AppComponent,
    DashboardComponent,
    PriceHistoryComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }