Angular Routing Example

By | | Updated : 2022-02-11 | Viewed : 155 times

Angular Routing Example

The current tutorial describes the angular routing with a good and simple example. Lets div into this current tutorial.

Angular Routing

Angular Routing

Navigation, One of the major tasks in the GUI applications, should implement properly. You might aware that navigation's implementation does require data fetching from the back end. Hence performance will be reduced if the navigation is not implemented correctly. To consider these all types of performance problems, the angular framework is been provided with the routing mechanism. So for each tab, the data will not be fetched from the backend which causes performance improvement.

The Angular framework provides the routing framework as a default option. So It is very useful to apply to the application to navigate from one tab to another tab.

Angular Routing Example

The routing example app has three tabs such as home, about us, and contact us. So we are going to prepare the code for these three tabs. So lets div into the example.

We will first write the home tab-related files such as component and Html files.

home.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}
home.component.html
<p>
  home works!
</p>

In the same way, we will code the remaining two more tabs such as about us and contact us.

contactus.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-contactus',
  templateUrl: './contactus.component.html',
  styleUrls: ['./contactus.component.css']
})
export class ContactusComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}
contactus.component.html
<p>
  contactus works!
</p>
about.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-about',
  templateUrl: './about.component.html',
  styleUrls: ['./about.component.css']
})
export class AboutComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}
about.component.html
<p>
  about works!
</p>

Now these three components should be configured into the file app-routing.module.ts.

Note: In Angular app creation using the CLI, angular CLI asks for routing. Upon selection of yes, the app-routing.module.ts shall be generated.

app-routing.module.ts
import { NgModule } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 
import { HomeComponent } from './home/home.component'; 
import { ContactusComponent } from './contactus/contactus.component'; 
import { AboutComponent } from './about/about/about.component';

const routes: Routes = [
   {path:"home", component:HomeComponent},
   {path:"contactus", component:ContactusComponent},
   {path:"about", component: AboutComponent} 
];
@NgModule({
   imports: [RouterModule.forRoot(routes)], 
   exports: [RouterModule] 
})
export class AppRoutingModule { } export const 
RoutingComponent = [HomeComponent,ContactusComponent,AboutComponent];

The primary thing that you need to notice here is constant routes and it is assigned with an array. moreover here @NgModule is configured with importing the same routes the constant.

You can check whether all the tabs are working fine or not after the build and run. And if you want check out the entire code base you can use the Angular-Routing-Example-App

Leave A Reply