Angular2 Routing

General Description:-

Routing is the process of moving packets across a network from one host to another. It is usually performed by dedicated devices called routers. Packets are the fundamental unit of information transport in all modern computer networks.

Routing in Angular:-

Angular Routing is the marvel performs navigations, for handing across one page to another page when users click on any link, just like single page application.

Now am going to explain to step by step:

Step-1:

Now I’m going to create 3(three) components namely Home, About, Services as shown below.

For that am using the command

 

> ng generate component home
C:\Users\abc\kavya>ng generate component home
CREATE src/app/home/home.component.html (23 bytes)
CREATE src/app/home/home.component.spec.ts (614 bytes)
CREATE src/app/home/home.component.ts (261 bytes)
CREATE src/app/home/home.component.css (0 bytes)
UPDATE src/app/app.module.ts (746 bytes)

> ng generate component about
C:\Users\abc\kavya>ng generate component about
CREATE src/app/about/about.component.html (24 bytes)
CREATE src/app/about/about.component.spec.ts (621 bytes)
CREATE src/app/about/about.component.ts (265 bytes)
CREATE src/app/about/about.component.css (0 bytes)
UPDATE src/app/app.module.ts (824 bytes)

> ng generate component contact
C:\Users\abc\kavya>ng generate component contact
CREATE src/app/contact/contact.component.html (26 bytes)
CREATE src/app/contact/contact.component.spec.ts (635 bytes)
CREATE src/app/contact/contact.component.ts (273 bytes)
CREATE src/app/contact/contact.component.css (0 bytes)
UPDATE src/app/app.module.ts (910 bytes)

In Home component

I’m adding some information in home.component.html  file where as the same information will be added in about componentabout.component.htmland contact componentcontact .component.html.

If you want to see all component information you can add like this in

home.component.htmlfile

<app-home></app-home>

<app-home></app-home>

<app-home></app-home>But this not good method we need write to routing

Step-2:

app . component  . html  file Am going to add header  information.

<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">SSlabs</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a hreaf="#">About</a></li>
<li><a  href="#">Contact</a></li>
</ul>
</div>
</nav>

Step-3:

app. Module.ts

In this file, we need to import some modules RouterModule & Routes from @angular/router.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';
import { RouterModule,Routes} from '@angular/router';

Step-4 :

app. Module.ts

After import that RouterModule & Routes then we need to add

const routes:Routes=[
{….},{….},{….}];
const routes:Routes=[
{path:"",redirectTo:"home",pathMatch:"full"},
{path:"home",component:HomeComponent},
{path:"about",component:AboutComponent},
{path:"contact",component:ContactComponent},
{path:"**",redirectTo:"home"}
];

Step-5:

app. Module.ts                      

Next declaration section  in (imports)we need to add 

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AboutComponent,
    ContactComponent
  ], 

We first must initialize the routing and star listening to browser location changes.

 imports: [

    BrowserModule,RouterModule.forRoot(routes)  ]

Step-6:

app. component.html

You just remove all  <app- home></app-home>, <app-about></app-about> and <app-contact></app-contact>
For navigation We need to add
<router-outlet></router-outlet>
Inform you route where to display or print dom view 

Throught like Navigation we need to add routerLink=” /home ”
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">SSlabs</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a routerLink="/home">Home</a></li>
<li><a routerLink="/about">About</a></li>
<li><a routerLink="/contact">Contact</a></li>
</ul>
</div>
</nav>
<router-outlet></router-outlet>

We should still be running with command line interface(cli)

ng serve

And goto the browser you just ping localhost:4200

Now it will navigate to every thing

In url:-Localhost:4200/home

Angular Routing home image

Now here the home page information display here…

In url:-Localhost:4200/about

Here we can able to see about page information In url:-Localhost:4200/contact

And here we can get contact information

Leave a Reply

Your email address will not be published. Required fields are marked *