Creating Routing In Angular 2

Posted By : Sachin Dixit | 31-Jan-2018

angularjs

The Angular Router enables navigation from one view to other.It helps in directing users to different views based on the option they choose.

Let’s see the necessary steps to configure routing in angular 2 application.

Step:1 Creating a Routing Configuration

i) Create a Routes file with .routes.ts extension.

for ex--> config.routes.ts

ii) Import following configuration from angular library for Basic routing configuration.

for ex--> import { RouterModule, Routes } from '@angular/router';

import { ModuleWithProviders } from "@angular/core";

iii) Then define an array of routes which is of type Routes.

for ex-->

export const routes: Routes = [

{ path: 'first', component: FirstComponent }, //here first is the url that is mapped to FirstComponent

{ path: 'second', component: SecondComponent } //here second is the url that is mapped to SecondComponent

];

iv) Then use RouterModule.forRoot to export the routes so it can be used in our app when bootstrapping.

for ex-->

export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

Our final code will look like this:

 
                           import { RouterModule, Routes } from '@angular/router';
                           import { ModuleWithProviders } from "@angular/core";
                           import { FirstComponent } from './components/first.component'; 
                           import { SecondComponent } from './components/second.component'; 
			       //Note:FirstComponent and SecondComponent To be created in step:2
                            export const routes: Routes = [     //declaring routes of type Routes
                { path: 'first', component: FirstComponent },   //here first is the url that is mapped to FirstComponent
                { path: 'second', component: SecondComponent }  //here second is the url that is mapped to SecondComponent
                  {
                  path: '',   //this is our index routes which i have redirected to /first url
                  redirectTo: '/first',
                  pathMatch: 'full'
                  }                            
                   ]; 
                 export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

Note:FirstComponent and SecondComponent To be created in step:2

Step:2 Creating Components

i) Let first create a FirstComponent

for ex-->

 
               import { Component } from '@angular/core';
                 @Component({
                             template: `//this view will rendered when request come with "/first" url.

This is first component

Mobiles

List of Mobiles

` }) export class FirstComponent //component class { constructor() { } }

ii) Now Create a SecondComponent

for ex-->

 
                   import { Component } from '@angular/core';
                 @Component({
                             template: `//this view will rendered when request come with "/second" url.