Angular Routing

- Web development requires several built-in objects provided by technologies.

o Session Object
o Application Object
o Cookie Object
o Response Object
o Request Object
- Web development uses several techniques
o Caching
o Hosting
o Deploying
o Testing
o Routing
- Routing is a technique used for web application.
- Routing technique was introduced into web application to create and configure User
and SEO friendly URL’s.
- User friendly URL allows the user to access any content directly by querying from
URL.
- It also makes the content accessible without much querying.
Previous:
http://www.amazon.in/electronics.html?
category=electronics&subcat=mobiles&model=samsung
Routing:
http://www.amazon.in/electronics/mobiles/samsung
- SEO friendly URL can identify the exact location on your page. And provide
suggestions for next time with relative content.
- Routing in SPA application allows the user to stay on one page and get access the
everything from the page.
- In SPA new details are added into the page without reloading the complete page.
- Routing uses built-in AJAX for accessing the components and rendering into page.
- Routing can be defined
o Server-Side
o Client-Side
- Angular implements routing client side.
 Angular Routing Library
- “@angular/router” is a package that provides set of modules used to configure the
routes and export routes for application.
- The basic modules required to configure routes for angular application.
o RouterModule
o Routes

Routes - It configures a route object that comprises of

collection of routes.
- The routes collection is a constants collection
with various details like path, component,
outlet etc.

Syntax:
const routes: Routes = [ {path:’’ }, {path:’’} ];

RouterModule It imports the routes and exports into route table.

Whenever client request comes, it verifies from route
table and renders to client.

- Routing is configure in a separate routing module

“app-routing.module.ts”
import { NgModule } from ‘@angular/core’;
import { Routes, RouterModule } from ‘@angular/router’;
const routes: Routes = [ { }, { } ];
@NgModule({
imports: [RouterModule.forRoot(routes)]
exports: [RouterModule]
})
- In Routing the resulting markup will be rendered at specified location by using a
“<router-outlet>”, which is a member of RouterModule.
- Every page can be defined with only one <router-outlet>.
- Router outlet can be nested in hierarchy not multiple.
- You have to configure routes for your application using a “Routes” collection.
- Routes is a collection of route objects.
- Every route object comprises of following properties

Property Description
path It is the request path used to access any resource in
application.
It specifies the request name.

Syntax:
{ path: ‘home’ }
Request:
http://localhost:4200/home

Path can be defined with wild card routes:

Syntax:
{ path: ‘ ‘ } – If no component is requested then what to do?
{ path: ‘**’} – If the component requested is not available in
application then what to do?

component It refers the component to be rendered when any specific

path is requested by client.

Syntax:
{path: ‘home’, component: HomeComponent}
redirectTo It specifies the path for redirection.
It uses an existing path instead of loading a new path when
ever the condition is matching.
pathMatch It specifies the URL to access when requested path is similar
to existing path. No need to re-define the path.
- Full: to match all details defined.
- Prefix: to match only the component.

- Hyperlinks are designed to navigate to any specific route path by using “routerLink”
attribute, which is used as “href”
Syntax:
<a routerLink=”pathname”> Link Text / Image </a>