Routing in Angular 2

Routing in angular application is used for selecting different views on the client side.In a normal web application when we click on any hyper link on a page ,this results in a new request to the web server.Web server returns HTTP response to the browser.So every request for a new view or page is a separate HTTP request.

Since Angular is a client side SPA framework so there is difference in how the request for a new view is handled by Angular.Instead of requesting a view or HTML page from the server Angular loads a new view which is already present on the client.

Following are the important components of routing in Angular application

• Routes collection of routes mapping URLs to components which will handle request for the URL.You define routes at a single place,usually the main module of your application.Routes are set in the @NgModule decorator’s import property.
• router-outlet Placeholder which will display the view corresponding to the matching route defined in the routes collection
• RouterLink Directive which is used in anchor tag of HTML for navigating to different views defined by the routes

To implement routing in Angular 2 application follow the below steps

1.Define routes of your application.Assign the routes to the Routes variable

We have defined two routes below.The default route is handled by featurecomponent component.The feature path is handled by the Detailscomponent component.

const routes:Routes=[{path:'',component:Homecomponent},
{path:'feature',component:Detailscomponent}]

pass the above routes as a argument to forRoot() method.

export const routing=RouterModule.forRoot(routes)

2.Pass the routing variable to the imports property of root module in NgModule decorator function

@NgModule({
imports: [ BrowserModule,routing ],
...

3.router-outlet Placeholder which will display the view corresponding to the matched route.

4.Add the router-outlet and RouterLink in the root component of the application

import { Component } from '@angular/core';
@Component({
selector: 'app',
template: `<a [routerLink]="['/']"> feature</a>
<a [routerLink]="['/feature']"> feaure1</a>
<router-outlet></router-outlet>
`
})

Defining parameters in the route.If you want to pass parameters to your component then you should specify these parameters when defining the corresponding route for your component.You specify these patterns using the “:” after the “/”.If your component expects parameter called id then you can define id parameter in the route path as:

{path:'/home/:id',component:Homecomponent}

you can now access the id parameter in your homecomponent as:

this.activeRoute.queryParams.subscribe(params => {
const id= params['id'];
}

When implementing routing in Angular application the first decision is to decide on the LocationStrategy. There are two location strategies which can be used in Angular 2 application:

• PathLocationStrategy
• HashLocationStrategy

1. PathLocationStrategy is the default and uses the HTML 5 history API.This means that this strategy is supported only by the new browsers which supports HTML 5.
2. HashLocationStrategy This uses hash “#” to separate the base URL from the different views which will be served by the Angular application.

Follow on: