Routing System - Sushi Restaurant App

Overview

The Sushi Restaurant App uses Angular Router with Ionic’s routing enhancements to provide seamless navigation with lazy loading, route parameters, and preloading strategies.

Routing Architecture

Root Routing

App-level routes defined in app-routing.module.ts

Feature Routing

Feature-specific routes in home-routing.module.ts

Lazy Loading

Modules loaded on-demand for optimal performance

Route Parameters

Dynamic routes for detail views (:registroId)

Root Routing Module

The application-level routing configuration:

src/app/app-routing.module.ts

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

const routes: Routes = [
  {
    path: 'home',
    loadChildren: () =>
      import('./home/home.module').then((m) => m.HomePageModule),
  },
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full',
  },
];

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

Key Configuration

RouterModule.forRoot()

The forRoot() method configures the router at the application root level.

RouterModule.forRoot(routes, {
  preloadingStrategy: PreloadAllModules
})

Use forRoot() only once in the root module. Feature modules use forChild().

PreloadAllModules Strategy

This strategy loads lazy modules in the background after the initial app load:Benefits:

Faster initial load time
Subsequent navigation is instant
Better user experience

How it works:

Initial route loads first
After app is stable, lazy modules load in background
Modules are cached for instant access

The app loads the home page immediately, then preloads the detail page module

Default Route Redirect

{
  path: '',
  redirectTo: 'home',
  pathMatch: 'full',
}

Empty path redirects to /home
pathMatch: 'full' ensures exact match
User navigating to / lands on /home

Lazy Loading Implementation

Dynamic Import Syntax

Lazy loading uses dynamic import() statements:

{
  path: 'home',
  loadChildren: () =>
    import('./home/home.module').then((m) => m.HomePageModule),
}

How it Works
Bundle Analysis
Benefits

Bundle Splitting: Angular creates separate JavaScript bundles for each lazy module
On-Demand Loading: Module is downloaded only when the route is accessed
Caching: Once loaded, the module remains in memory
Code Splitting: Reduces initial bundle size significantly

After running ng build, you’ll see multiple chunk files:

www/
├── main.js                    # Main application bundle
├── polyfills.js               # Browser polyfills
├── runtime.js                 # Webpack runtime
└── src_app_home_home_module.js  # Lazy-loaded home module

Each lazy module gets its own bundle, loaded only when needed

Feature Routing: Home Module

Feature-level routing configuration:

src/app/home/home-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomePage } from './home.page';

const routes: Routes = [
  {
    path: '',
    component: HomePage,
  },
  {
    path: ':registroId',
    loadChildren: () =>
      import('./detalle-registro/detalle-registro.module').then(
        (m) => m.DetalleRegistroPageModule,
      ),
  },
];

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

Route Configuration Breakdown

Empty Path Route

{
  path: '',
  component: HomePage,
}

Renders HomePage at /home
Empty path is relative to parent route (home)
Eagerly loaded (component is in the same module)

Full URL: /home

Dynamic Route Parameter

{
  path: ':registroId',
  loadChildren: () =>
    import('./detalle-registro/detalle-registro.module').then(
      (m) => m.DetalleRegistroPageModule,
    ),
}

:registroId is a route parameter
Matches any value: /home/1, /home/2, etc.
Lazy loads detail page module

Example URLs:

/home/1 → Shows detail for item with ID “1”
/home/2 → Shows detail for item with ID “2”

The colon (:) prefix indicates a dynamic route parameter

RouterModule.forChild()

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})

Used in feature modules
Registers routes as children of parent routes
Can be imported multiple times (unlike forRoot())

Never use forRoot() in feature modules—it will create multiple router instances

Route Parameters

Extracting Route Parameters

Access dynamic route parameters in components:

src/app/home/detalle-registro/detalle-registro.page.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Registro } from '../home.model';
import { RegistrosServiceTs } from '../home.service';

@Component({
  standalone: false,
  selector: 'app-detalle-registro',
  templateUrl: './detalle-registro.page.html',
  styleUrls: ['./detalle-registro.page.scss'],
})
export class DetalleRegistroPage implements OnInit {
  registro: any = [];

  constructor(
    private activateRoute: ActivatedRoute,
    private registrosService: RegistrosServiceTs,
    private router: Router,
  ) {}

  ngOnInit() {
    // Subscribe to route parameter changes
    this.activateRoute.paramMap.subscribe((paramMap) => {
      let recipeId: string = String(paramMap.get('registroId'));
      this.registro = this.registrosService.getRegistro(recipeId);
      console.log(this.registro);
    });
  }
}

Parameter Extraction Methods

Observable (Recommended)
Snapshot (One-time)
Comparison

this.activateRoute.paramMap.subscribe((paramMap) => {
  const id = paramMap.get('registroId');
  // Load data based on ID
});

Benefits:

Reacts to parameter changes automatically
Required if navigating within the same component
Follows reactive programming patterns

Use this approach for dynamic updates when route parameters change

ngOnInit() {
  const id = this.activateRoute.snapshot.paramMap.get('registroId');
  // Load data based on ID
}

Benefits:

Simpler syntax for one-time reads
No subscription management needed
Sufficient if component is destroyed on navigation

Use snapshot when you know the component will be destroyed on route changes

Feature	Observable	Snapshot
Reactive updates	✅ Yes	❌ No
Simpler syntax	❌ No	✅ Yes
Memory management	Manual unsubscribe	None needed
Use case	Dynamic parameters	One-time read

Always unsubscribe from paramMap observable to prevent memory leaks (or use async pipe in template)

Using Router Service

Navigate programmatically from TypeScript code:

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

export class DetalleRegistroPage {
  constructor(private router: Router) {}

  async deleteRegistro() {
    // ... delete logic
    
    // Navigate back to home
    this.router.navigate(['/home']);
  }
}

// Navigate to absolute route
this.router.navigate(['/home']);
this.router.navigate(['/home', '1']);  // /home/1

Navigate using routerLink directive in templates:

<!-- Absolute path -->
<ion-button [routerLink]="['/home']">Home</ion-button>

<!-- With parameter -->
<ion-button [routerLink]="['/home', registro.id]">View Details</ion-button>

<!-- String syntax -->
<ion-button routerLink="/home">Home</ion-button>

<!-- With active class -->
<ion-button 
  [routerLink]="['/home']" 
  routerLinkActive="active-link">
  Home
</ion-button>

routerLink is preferred over (click) handlers for navigation—it’s more semantic and handles accessibility better

Ionic Router Integration

IonicRouteStrategy

Ionic provides a custom route reuse strategy:

src/app/app.module.ts

import { RouteReuseStrategy } from '@angular/router';
import { IonicRouteStrategy } from '@ionic/angular';

@NgModule({
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
})
export class AppModule {}

What is IonicRouteStrategy?

Ionic’s custom strategy for managing route lifecycle:Features:

Preserves component state during navigation
Optimizes mobile navigation animations
Handles back button behavior
Manages component caching

Without IonicRouteStrategy, Angular’s default strategy would destroy components on every navigation

Component Lifecycle Benefits

Example Scenario:

User views list on home page
User scrolls to item #10
User taps item to view details
User navigates back
✅ List is still scrolled to item #10 (state preserved)

Provides native-like behavior where back navigation restores previous state

ion-router-outlet

Ionic’s enhanced router outlet:

src/app/app.component.html

<ion-app>
  <ion-router-outlet></ion-router-outlet>
</ion-app>

Features:

Animated page transitions
Gesture-based navigation (swipe back)
Stack-based navigation (maintains navigation history)
Platform-specific animations (iOS vs Android)

ion-router-outlet extends Angular’s router-outlet with mobile-specific enhancements

Route Guards

While not implemented in the current app, route guards can protect routes:

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(private router: Router) {}

  canActivate(): boolean {
    const isAuthenticated = // ... check auth status
    
    if (!isAuthenticated) {
      this.router.navigate(['/login']);
      return false;
    }
    return true;
  }
}

Available Guard Types

CanActivate

Determines if a route can be activated

CanDeactivate

Determines if user can leave a route (unsaved changes)

CanLoad

Prevents lazy loading of modules

Resolve

Pre-fetches data before activating route

Best Practices

Use Lazy Loading for All Features

// ✅ Good - Lazy loaded
{
  path: 'feature',
  loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule)
}

// ❌ Bad - Eagerly loaded
{
  path: 'feature',
  component: FeatureComponent
}

Lazy loading reduces initial bundle size and improves performance.

Always Use PreloadAllModules in Production

RouterModule.forRoot(routes, {
  preloadingStrategy: PreloadAllModules  // ✅ Enables preloading
})

Provides the best balance between initial load time and navigation speed.

Extract Route Parameters with paramMap

// ✅ Good - Observable paramMap
this.route.paramMap.subscribe(params => {
  const id = params.get('id');
});

// ⚠️ Acceptable - Snapshot (if component is destroyed on navigation)
const id = this.route.snapshot.paramMap.get('id');

// ❌ Bad - Direct params access
const id = this.route.snapshot.params['id'];

Use Absolute Paths for Primary Navigation

// ✅ Good - Absolute path (clear and predictable)
this.router.navigate(['/home']);

// ⚠️ Use with caution - Relative path (depends on current location)
this.router.navigate(['../home'], { relativeTo: this.route });

Prefer routerLink Over Click Handlers

<!-- ✅ Good - Declarative, handles accessibility -->
<ion-button [routerLink]="['/home', item.id]">View</ion-button>

<!-- ❌ Bad - Imperative, requires extra code -->
<ion-button (click)="navigate(item.id)">View</ion-button>

Common Routing Patterns

The app implements the master-detail pattern:

Master (/home): List of all menu items
Detail (/home/:id): Detailed view of single item

// Navigate from master to detail
<ion-card [routerLink]="[registro.id]" *ngFor="let registro of registros">
  <!-- Card content -->
</ion-card>

// Navigate from detail back to master
this.router.navigate(['/home']);

Nested Routes

The routing structure demonstrates nesting:

/home                    → HomePage (list)
/home/1                  → DetalleRegistroPage (detail for item 1)
/home/2                  → DetalleRegistroPage (detail for item 2)

Child routes inherit the parent path, creating a hierarchical URL structure

Next Steps

Architecture Overview

Learn about the application architecture patterns

Project Structure

Explore the directory layout and file organization

Getting Started

Core Concepts

Components

Services

Models

Development

Styling

​Overview

​Routing Architecture

​Root Routing Module

​Key Configuration

​Lazy Loading Implementation

​Dynamic Import Syntax

​Feature Routing: Home Module

​Route Configuration Breakdown

​Route Parameters

​Extracting Route Parameters

​Parameter Extraction Methods

​Programmatic Navigation

​Using Router Service

​Navigation Methods

​Template Navigation

​Ionic Router Integration

​IonicRouteStrategy

​ion-router-outlet

​Navigation Flow Diagram

​Route Guards

​Available Guard Types

CanActivate

CanDeactivate

CanLoad

Resolve

​Best Practices

​Common Routing Patterns

​Master-Detail Navigation

​Nested Routes

​Next Steps

Architecture Overview

Project Structure

Build docs developers (and LLMs) love

Overview

Routing Architecture

Root Routing Module

Key Configuration

Lazy Loading Implementation

Dynamic Import Syntax

Feature Routing: Home Module

Route Configuration Breakdown

Route Parameters

Extracting Route Parameters

Parameter Extraction Methods

Programmatic Navigation

Using Router Service

Navigation Methods

Template Navigation

Ionic Router Integration

IonicRouteStrategy

ion-router-outlet

Navigation Flow Diagram

Route Guards

Available Guard Types

Best Practices

Common Routing Patterns

Master-Detail Navigation

Nested Routes

Next Steps