Introduction To Routing In Angular 8

Introduction

 

Routing is an important key feature for every frontend framework, it is the process of dividing the UI of an application using URLs. It allows developers to build modern single-page applications that can be loaded once by a browser and provide multiple views. Before diving into angular routing, we'll discuss some basic concepts.

 

Single Page Application

 

In Single Page Applications only one page is requested from the server, it provides multiple views by dynamically rewriting the current page rather than loading the new pages from server.

 

Router

 

Router is an important entity in Angular and in most of the front end frameworks. It is the code responsible for organizing an application into multiple views. The router will display the home page when the application is loaded first, and it allows navigation based on request. 

 

Now let's get started with angular routing. 

 

Angular is a component based application, a screen view is implemented by one or more components. Routing in angular is referred to as component routing because the router routes each component to a specific URL. 

 

Routes and Path

 

Route is an object, that provides information about which component maps to a specific path. Path is a string that specifies where exactly the resource you want to access is located.

{path:'terms',component:TermsComponent}

For example, this is the definition of route that maps  'terms' path to the  'termscomponent' component.

 

Steps to be followed to perform routing in Angular 8,

 

Step 1

 

Create a new Angular project using the command.

$ ng new DEMOANGULAR

Before generating the project, the CLI will prompt to add Angular routing. Click yes to install Angular router package in the project. In previous angular versions, you needed to create this file manually.

 

Step 2

 

In app-routing.module.ts import router module from '@angular/router'.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Step 3

 

After setting up the routing module, add the router outlet in app.component.html.

<div style="text-align:center">
 <h1>
    Welcome to {{ title }}!
  </h1>
<router-outlet></router-outlet>

Step 4

 

Finally import AppRoutingModule  in app.module.ts.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Simple Demo Project

This is a simple Angular 8 project, it explains about routing and navigation. Create the new component by using the below command in CLI.

 

 

 

Now, we have a home, help and terms folder inside the app folder.

 

 

Next, add routing to this component by opening and editing app.routing.module.ts and add those component imports. Add the constant variable of routes by this array of component routes.

 

 

Next, install bootstrap module to make the application look prettier.

 

 

Next, import to app.module.ts and also add it to @NgModule imports array. 

 

 

Finally, modify the app.component.html except <router-outlet></router-outlet> tag.

<div style="text-align:center">
  <p>{{ title }}!</p>
  <h1>
    Welcome to {{ title }}!
  </h1>

</div>

<div class="navbar-light bg-light" style="height:2cm">
    <nav  class="navbar navbar-expand-lg navbar-light bg-light" style="float: right" >
      <a class="navbar-brand" routerLink=""> Routing in Angular 8</a>
      <button class="navbar-toggler" type="button" (click)="toggleNavbar()" data-toggle="tab" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" >
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" routerLink="" routerLinkActive="active">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link " routerLink="help" routerLinkActive="active">Help</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" routerLink="terms" routerLinkActive="active">Terms</a>
          </li>
      </ul>
    </div>
  </nav>
    <router-outlet></router-outlet>
  </div>

Output of the project

 

Navigation works by clicking on the navigation item. It's a single page client side routing -- the output is obtained on the same page. Click each component, it will navigate to its own path.

 

 

 

 

Summary 

 

Thanks for reading. In upcoming articles will discuss more detailed concepts like wildcard routing and Angular animation to the routed components etc.