Angular Routing | Single Page Application in Angular

Install Routes
Add Routes
router-outlet

Angular Routing is used to create Single Page Application. In a single page application, click on hyperlinks doesn't reload whole DOM, instead URL and component is loaded. This will prevent static resources like CSS, js , html to reoad again and again thus improving page loading time and improve user experience.

Routing Modules is already available in Angular 7 and above versions. All the Routes Path are defined in app.routes.ts.

Types of Routings Strategies

path location based
hash url based

To use Routing, we will use components named product, login and error component in app-component.

Google is expertise in single page applictions since 2005, remember Gmail and Google Maps. Gmail use hash url based single page application till now.

Create Routes

Lets Create Routes in angular app. import RouterOutlet in app.component.ts . Also import Routes and RouterModule in app.component.ts.

app.routes.ts

           <!--app.routes.ts-->
  import { Routes } from '@angular/router';

  export const routes: Routes = [];

app.component.ts

           <!--app.component.ts-->
  import { Component } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { RouterOutlet } from '@angular/router';
  import { Routes, RouterModule, } from '@angular/router';
  
  @Component({
    selector: 'app-root',
    standalone: true,
    imports: [ CommonModule, RouterOutlet ],
    templateUrl: './app.component.html',
    styleUrl: './app.component.css'
  })
  export class AppComponent {
    title = 'Routing';
  }

app.component.html

           <!--app.component.html-->

  <h1>{{title}}</h1>

  <nav>
    <a href="">Home</a>
    <a href="">Product</a>
    <a href="">Login</a>
  </nav>

  <router-outlet></router-outlet>

Add Routes

To Add Routes, first create components using Angular CLI. We are creating four components for routing purpose.

ng g component home

ng g component product

ng g component login

ng g component error

app.routes.ts

In app.routes.ts, import all components first.

Next, add path and component property in routes.

path

Path Property defines the path of route. For example "" is root, /product is rout] path of product page.

"**" is wild card handler path for errors like 404, Page Not Found.

pathMatch value can be full or prefix. Full means exact path, prefix means path starts with this. It can also be ** for no path match.

           <!--app.routes.ts-->
import { Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { ProductComponent } from './product/product.component';
import { ErrorComponent } from './error/error.component';
import { HomeComponent } from './home/home.component';

        
export const routes: Routes = [
{ path: '', component:HomeComponent, pathMatch:'full'},
{ path: 'login', component:LoginComponent},
{ path:'product', component:ProductComponent},
{ path:'**', component:ErrorComponent},
];

app.component.ts

In component file. import RouterLink and RouterLinkActive. RouterLink means this hyperlink is link of router and RouterLinkActive means this router is currently active.

           <!--app.component.ts-->
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { Routes, RouterModule,RouterLink,RouterLinkActive } from '@angular/router';
      
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ CommonModule, RouterOutlet, RouterLink, RouterLinkActive ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'Routing';
}

app.component.css

Add css to links and nav element. Also declare a active class for active hyperlinks with different interface, like i am using dark for active and light for in links.

           <!--app.component.css-->
nav a{
    display: inline-block;
    padding: 8px 12px;
    text-decoration: none;
    margin-right: 10px;
    background: #ccc;
}
nav a.active{ 
    background: #222; 
    color: #fff;
}

app.component.html

Finally add routerLink property to html hyperlinks. Also add routerLinkActive property to display active interface if currently route is active.

           <!--app.component.html-->
    
      <h1>{{title}}</h1>
    
      <nav>
        <a routerLink="" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">Home</a>
        <a routerLink="/product" routerLinkActive="active" >Product</a>
        <a routerLink="/login" routerLinkActive="active" >Login</a>
      </nav>
    
      <router-outlet></router-outlet>

Now click on hyperlinks to check application is working or not.

Your single page application is working now.

router-outlet

router-outlet is used in root component. And the components data will load in router-outlet when we will navigate through routes path. Component will be loaded based on the route path.