Angular Routing – Navigation & URL Management - Learn ANGULAR | Revochamp

Name: Angular Routing – Navigation & URL Management
Availability: InStock
Author: Revochamp

What is the Angular Router?

The Angular Router is a powerful library that enables navigation from one view to the next as users perform tasks. It interprets browser URLs as instructions to change the view. Instead of the browser requesting a new page from the server, the Router swaps out components within the current page, maintaining the 'Single Page' experience.

Defining Your Route Configuration

Routes are defined as an array of objects. Each route typically has a path (the URL segment) and a component (the view to display). As an architect, you should define a 'Wildcard' route at the end to handle 404 - Not Found scenarios.

TypeScriptRead-only

// app.routes.ts
import { Routes } from '@angular/router';
import { HomeComponent } from './home.component';
import { ProjectDetailComponent } from './project-detail.component';

export const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'project/:id', component: ProjectDetailComponent }, // Dynamic parameter
  { path: '', redirectTo: '/home', pathMatch: 'full' },       // Default route
  { path: '**', component: PageNotFoundComponent }           // Wildcard (404)
];

// app.routes.ts
import { Routes } from '@angular/router';
import { HomeComponent } from './home.component';
import { ProjectDetailComponent } from './project-detail.component';

export const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'project/:id', component: ProjectDetailComponent }, // Dynamic parameter
  { path: '', redirectTo: '/home', pathMatch: 'full' },       // Default route
  { path: '**', component: PageNotFoundComponent }           // Wildcard (404)
];

The Router-Outlet and RouterLink

To display the routed components, you must place the <router-outlet> directive in your main HTML. This acts as a placeholder where the Router will 'plug in' the component for the current route. To navigate, use the routerLink directive instead of standard href to avoid full page reloads.

HTMLRead-only


<nav>
  <a routerLink="/home" routerLinkActive="active-link">Home</a>
  <a [routerLink]="['/project', 123]">Revochamp Project</a>
</nav>


<main>
  <router-outlet></router-outlet>
</main>


<nav>
  <a routerLink="/home" routerLinkActive="active-link">Home</a>
  <a [routerLink]="['/project', 123]">Revochamp Project</a>
</nav>


<main>
  <router-outlet></router-outlet>
</main>

Navigation Lifecycle

Understanding the navigation lifecycle is key for debugging. The Router follows a strict sequence: it recognizes the URL, applies redirects, runs guards (security), resolves data, and finally activates the component.

Accessing Route Parameters

For dynamic routes like /project/:id, the component needs to know which ID was passed. You use the ActivatedRoute service to subscribe to these parameters. This is essential for a Lead Developer building data-driven dashboards.

TypeScriptRead-only

import { ActivatedRoute } from '@angular/router';

@Component({ ... })
export class ProjectDetailComponent implements OnInit {
  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    // Subscribe to changes in the 'id' parameter
    this.route.paramMap.subscribe(params => {
      const id = params.get('id');
      console.log('Loading project:', id);
    });
  }
}

import { ActivatedRoute } from '@angular/router';

@Component({ ... })
export class ProjectDetailComponent implements OnInit {
  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    // Subscribe to changes in the 'id' parameter
    this.route.paramMap.subscribe(params => {
      const id = params.get('id');
      console.log('Loading project:', id);
    });
  }
}

Routing Features Summary

Feature	Syntax/Directive	Purpose
Navigation Placeholder	<router-outlet>	Where the routed view appears
Nav Link	routerLink	User-facing links (prevents reload)
Active State	routerLinkActive	CSS class for the current route
Dynamic Params	:id	Passing variables through the URL
Redirect	redirectTo	Sending users from one path to another

Test Your Knowledge

of 3

Which directive is used as a placeholder for the currently routed component?

<ng-container>

<router-link>

<router-outlet>

<app-root>

of 3

Which service allows you to retrieve parameters from the current URL?

Router

ActivatedRoute

UrlSegment

HttpParams

of 3

What is the purpose of the wildcard route '**'?

It speeds up navigation

It matches any URL that hasn't been defined, usually for a 404 page

It allows for sub-domain routing

It acts as a prefix for all other routes

Frequently Asked Questions

What is the difference between 'pathMatch: full' and 'prefix'?

With 'full', the path must match the URL exactly. With 'prefix' (the default), the router matches the URL if it starts with the path. You should almost always use 'full' for the empty string path to avoid matching everything.

Can I navigate programmatically?

Yes. Inject the 'Router' service into your class and use 'this.router.navigate(['/home'])'. This is useful for redirecting after a successful login or form submission.

Why is my application scrolling to the top on navigation?

This is standard behavior in SPAs. You can configure the router to 'scrollPositionRestoration' to either 'enabled' or 'disabled' inside your app configuration to manage how the scroll is handled during navigation.

// app.routes.ts import { Routes } from '@angular/router'; import { HomeComponent } from './home.component'; import { ProjectDetailComponent } from './project-detail.component'; export const routes: Routes = [ { path: 'home', component: HomeComponent }, { path: 'project/:id', component: ProjectDetailComponent }, // Dynamic parameter { path: '', redirectTo: '/home', pathMatch: 'full' }, // Default route { path: '**', component: PageNotFoundComponent } // Wildcard (404) ];

import { ActivatedRoute } from '@angular/router'; @Component({ ... }) export class ProjectDetailComponent implements OnInit { constructor(private route: ActivatedRoute) {} ngOnInit() { // Subscribe to changes in the 'id' parameter this.route.paramMap.subscribe(params => { const id = params.get('id'); console.log('Loading project:', id); }); } }

Feature

Syntax/Directive

Purpose

Navigation Placeholder

<router-outlet>

Where the routed view appears

Nav Link

routerLink

User-facing links (prevents reload)

Active State

routerLinkActive

CSS class for the current route

Dynamic Params

:id

Passing variables through the URL

Redirect

redirectTo

Sending users from one path to another

Test Your Knowledge

of 3

Which directive is used as a placeholder for the currently routed component?

<ng-container>

<router-link>

<router-outlet>

<app-root>

of 3

Which service allows you to retrieve parameters from the current URL?

Router

ActivatedRoute

UrlSegment

HttpParams

of 3

What is the purpose of the wildcard route '**'?

It speeds up navigation

It matches any URL that hasn't been defined, usually for a 404 page

It allows for sub-domain routing

It acts as a prefix for all other routes

Frequently Asked Questions

What is the difference between 'pathMatch: full' and 'prefix'?

Can I navigate programmatically?

Yes. Inject the 'Router' service into your class and use 'this.router.navigate(['/home'])'. This is useful for redirecting after a successful login or form submission.

Why is my application scrolling to the top on navigation?

Angular Routing – Navigation & URL Management

Angular Routing – Navigation & URL Management

What is the Angular Router?

Defining Your Route Configuration

The Router-Outlet and RouterLink

Navigation Lifecycle

Accessing Route Parameters

Routing Features Summary

Test Your Knowledge

Frequently Asked Questions

Need help?

Angular Routing – Navigation & URL Management

Angular Routing – Navigation & URL Management

What is the Angular Router?

Defining Your Route Configuration

The Router-Outlet and RouterLink

Navigation Lifecycle

Accessing Route Parameters

Routing Features Summary

Test Your Knowledge

Frequently Asked Questions

Need help?