Angular Routing Tutorial

When we imagine a website, the following things come to our mind.

Some cool header with a company logo and title along with a welcome message.
Some footer with copyright messages.
Some dynamic content making the website really useful.

Did we miss anything? Something more important and useful? Yes, the menu items. Menu items let us navigate between different content (or pages) of an application. A web application without navigation is not an application.

Angular is a popular framework used for creating a single page application. Let’s start our discussion with understanding what a Single Page Application or SPA is.

Single page application (SPA)

A single-page application (SPA) is an approach in which we create a website design where each new page is not served from the server but generated dynamically through JavaScript's ability to manipulate the DOM elements on the existing page itself.

Routing

Considering you have the basic knowledge on Angular, I believe you know that Angular helps to create UI as the combination of compatible and reusable web components. So, when we say navigation in an Angular application, it simply means navigating between those components. It can be achieved by implementing routing.

Routing is a simple mechanism in a web application by which the requests are routed to the code that handles them. A framework is instructed with the help of some code for what code to be executed when a request is received with some URL.

In Angular, routing can be achieved using an Angular module called “RouterModule”. It is defined inside “@angular/router”.

Case 1: url: localhost/login Case 2: localhost/home

The Router Outlet

The Router-Outlet is a directive exported by RouterModule and acts as a placeholder that indicates the router where it needs to insert the matched component.

The Navigation Directive

The Angular Router provides two directives for navigation. The routerLink directive replaces the href attribute of anchor(<a>) tags to create links and routerLinkActive is used for making the active link.

For example.

<a [routerLink]="/products" [routerLinkActive]="/products">Products</a>

Note
Please note that Routing has nothing to do with menus. It is simply about URL and code to be executed. To a framework, how the request is made is not countable.

Enough theory. Let's start with a simple example and understand it in more details.

Prerequisite knowledge

Fundamental knowledge of TypeScript, HTML, and Angular.
Make sure the Angular CLI is installed in the machine.

STEP 1 - Create an Angular project

Now, let us create one project called RoutingExample.

> ng n RoutingExample

STEP 2 - Make three components for the application

Create one directory inside src >> app folder called components.

Generate three components inside the components directory.

> ng g c component/home

> ng g c component/about

> ng g c component/login

After generating components,the app.module.ts file should look like this.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HomeComponent } from './components/home/home.component';
import { AboutComponent } from './components/about/about.component';
import { LoginComponent } from './components/login/login.component';
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent,
AboutComponent,
HomeComponent,
LoginComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
<div style="text-align:center">
<h1>
Welcome to Just Compile!!
</h1>
<home></home>
<about></about>
<login></login>
</div>

Let us check the output by executing the ng serve command.

Now, this is not a SPA. Our target is to display only one component at a time with a menu at the top for navigating. The next step is to create a menu component.

Create a menu component in src>>app directory.

> ng g c Menu

Before creating the menu, let us import bootstrap in our application for a better design.

Go to index.html file and paste the below links.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/boo
tstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">
</script>

Now, open menu.component.html and write the below code.

//index.html
<div class="container">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand"
href="https://www.justcompile.com/">Just Compile</a>
</div>
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Login</a></li>
</ul>
</div>
</nav>
</div>

Let us check the output by executing the ng serve command.

STEP 3 - Adding routing in the application

The Angular Router enables the navigation in an Angular project.

To use Angular Router, we need to import RoutingModule from @angular/router library inside our app.module.ts file.

// app.module.ts
import { RouterModule } from '@angular/router';
imports: [
BrowserModule, RouterModule
],

For the navigation, now we need to configure the routes for the Angular project. In routes, we need to declare the path for the corresponding component. Let us create routerConfig.ts in src>>app directory in which we will define the routes for our project.

// routerConfig.ts
import { Routes } from '@angular/router';
import { HomeComponent } from './components/home/home.component';
import { AboutComponent } from './components/about/about.component';
import { LoginComponent } from './components/login/login.component';
export const appRoutes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'about',component: AboutComponent},
{ path: 'login',component: LoginComponent}];

Now, import this object inside app.module.ts and register the module.

// app.module.ts
import appRoutes from './routerConfig';
imports: [
BrowserModule,
RouterModule.forRoot(appRoutes)
],

Now, add the navigation directive to the menu component.

<div class="container">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand"
href="https://www.justcompile.com/">Just Compile</a>
</div>
<ul class="nav navbar-nav">
<li><a routerLink="home">Home</a></li>
<li><a routerLink="about">About</a></li>
<li><a routerLink="login">Login</a></li>
</ul>
</div>
</nav>
</div>

STEP 4 - DEFINE ROUTER OUTLET.

All the settings are done now. It is time to use routing in our project. The router module gives us a selector named router-outlet. Using this selector in our app.component.html, we actually are telling our HTML file to find the component according to the path defined. In our case, we defined a path in routerConfig.ts file.

Write the below code in app.component.html.

<menu></menu>
<router-outlet></router-outlet>

Start the app by executing the following command.

> ng serve --open

Conclusion

Are we done? Definitely not! As you can see, currently all components are loaded in the start itself. What if your projects have 1000 components? Won't it increase the load on an application? The answer is “YES” and that’s where the lazy loading comes into the picture and that’s what my next article will talk about.