Loading

Angular Routing: A Complete Guide

Angular Routing: A Complete Guide

In this article, we will learn how to enable routing and navigation in angular project. So Let's start. I will write every step So it will be helpful for beginners reader. So if you had already installed the Node & Angular CLI then Please you can skip the 2 steps.

Step 1

Download the Node & install it your system for that open https://nodejs.org/en/download/ and install the relevant package based on your platform.

Step 2

After installation of node open the terminal & Install Angular CLI: this command will install the Angular CLI if the node is install -g stand for global installation `

npm install -g @angular/cli

Step 3

Install Angular project: type the below command with this option when you choose yes for Angular routing, Angular CLI will create an app-routing.module.ts file inside your angular-routing/src/app/ project. for this Article, we will use SCSS styling.

ng new angular-routing
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS   [ https://sass-lang.com/documentation/syntax#scss ]

Next, go to your project by typing

cd angular-routing

run your newly created project to check everything is installed properly before we will start Routing integration.

ng serve --o

Step 4 configure Routes

For this example, we will configure routes for the following path which we will navigate

About us: http://localhost/about

Contact: http://localhost/contact

Home: http://localhost/home

Gallery: http://localhost/gallery

No Page found if anyone wrong path which not exists then we will redirect the user to 404 not found page with the help of wildCard Route. Any URL which is not valid: http://localhost/abc, http://localhost/xyz

So based on these paths please create these components via ANGULAR CLI

ng g c about-us
ng g c contact
ng g c  home
ng g c gallery
ng g c no-page-found

*Note: G for Generate & c for Component

Next, Open the app-routing.module.ts file and import the component and define the path of the routes after integration page will look like this.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import {HomeComponent} from './home/home.component'
import {AboutUsComponent} from './about-us/about-us.component';
import {GalleryComponent} from './gallery/gallery.component';
import {ContactComponent} from './contact/contact.component';
import {NoPageFoundComponent} from './no-page-found/no-page-found.component';

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutUsComponent },
  { path: 'gallery', component: GalleryComponent }
  { path: 'contact', component: ContactComponent },
  { path: '**', component: NoPageFoundComponent }
];

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

Next, Open app.component.html page and delete the existing HTML just keep the below HTML only since we will here learn how to implement routing

<router-outlet></router-outlet>

Now let's add the routes in app.component.html page just above the router-outlet and wrap the router-outlet with div after adding app.component.html file will like this

<ul>
    <li><a routerLinkActive="active" routerLink="/home">Home</a></li>
    <li><a routerLinkActive="active" routerLink="/about">About Us</a></li>
    <li><a routerLinkActive="active" routerLink="/gallery">Gallery</a></li>
    <li><a routerLinkActive="active" routerLink="/contact">Contact Us</a></li>
</ul>

<div>
    <router-outlet></router-outlet>
</div>

RouterLink: When added to an element in a template, makes that element a link that initiates the navigation to a route

RouterLinkActive: To add a certain class based on if a certain route is active

Now open browser with http://localhost:4200 to see the router in action. But since we have not defined any CSS this will display the route URL with an unordered list. So let's add a bootstrap package, and for that run the below code in Angular CLI

npm istall bootstrap

Next, open the angular.json file which you will find in your angular-routing root folder and search 'build' key inside this key you will find the styles key now place the bootstap.min.css file with path inside this array.


 "styles": [
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "src/styles.scss"
],

After adding the bootstrap CSS class our final app.component.html

<ul class="nav nav-pills">
      <li class="nav-item">
        <a class="nav-link" routerLinkActive="active" routerLink="/home">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLinkActive="active" routerLink="/about">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLinkActive="active" routerLink="/gallery">Gallery</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLinkActive="active" routerLink="/contact">Contact</a>
      </li>
    </ul>

<div class="container text-center">
  <router-outlet></router-outlet>
</div>

That's it. Thanks for reading the post, I hope this will help you to integrate routes easily in your Angular Application. In next post we will see the concept of router-guards & nested routes.

You may like: Useful Angular commands for beginners

Related Articles