Build a Routing Application using Angular CLI

5+
Share

Build a Routing Application using Angular CLI


Pre-requisite

The following software’s are the required to be installed to set up the development environment and build a Routing Application:

  1. Angular CLI
  2. Node.js
  3. npm

  1. For this application, we will use command prompt interface. Create a Workspace and access the directory path using command prompt.
  2. Use the below command to Generate a new Routing Application named CanadaIT
ng new CanadaIt --routing

Grab a coffee as installing npm packages will take some time.

3. Next will generate 3 different components named ‘Home’, ‘About Us’ and ‘Contact Us’ to add 3 different pages

ng g c home
ng g c aboutUs 
ng g c contactUs

4. Now it’s time to configure the corresponding routes. First update src/app/app-routing.module.ts as shown below and import the components

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from "app/home/home.component";
import { AboutUsComponent } from "app/about-us/about-us.component";
import { ContactUsComponent } from "app/contact-us/contact-us.component";

const routes: Routes = [
 {path: '', redirectTo:'/home', pathMatch:'full'},
 {path: 'home', component: HomeComponent},
 {path: 'aboutUs', component: AboutUsComponent},
 {path: 'contactUs', component: ContactUsComponent}
];

@NgModule({
 imports: [RouterModule.forRoot(routes)],
 exports: [RouterModule]
})
export class AppRoutingModule { }

5. Next update the src/app/app.component.html to different routes as shown below:

<nav>
 <ul>
 <li><a routerLink="/home">Home</a></li>
 <li><a routerLink="/aboutUs">About Us</a></li>
 <li><a routerLink="/contactUs">Contact Us</a></li>
 </ul>
</nav>

<router-outlet></router-outlet>

6. The routing application is ready, to serve the application run below command:

ng serve -o

This will open the browser on http://localhost:4200 **

Add an html template, host the application on the server and we are done!


Related Posts

Post A Comment

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