Creating Routing In Angular 2
Posted By : Sachin Dixit | 31-Jan-2018
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.
This is second component
Laptops
List of Laptops
` }) export class SecondComponent { constructor() { } }Request for Proposal
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Sachin Dixit
Sachin is a Java Developer !!