Course Title: Building Cross-Platform Mobile Applications with Ionic Section Title: Routing and Navigation Patterns Topic: Create an application with complex routing scenarios and nested navigation.(Lab topic)

In this lab, we will create an application with complex routing scenarios and nested navigation. This will allow you to practice and reinforce your understanding of Ionic routing concepts.

Objective:

• Create an application with complex routing scenarios
• Implement nested navigation
• Handle route parameters and navigation events

Application Overview:

We will create an e-commerce application with the following features:

• Home page with product categories
• Product list page with filtering and sorting
• Product detail page
• Shopping cart page

Step 1: Create a new Ionic project

Open your terminal and run the following command to create a new Ionic project:

ionic start complex-routing-scenarios blank --type=angular

Step 2: Create pages

Create the following pages:

• home.page
• product-list.page
• product-detail.page
• shopping-cart.page

Step 3: Define routes

In the app-routing.module.ts file, define the following routes:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ProductListComponent } from './product-list/product-list.component';
import { ProductDetailComponent } from './product-detail/product-detail.component';
import { ShoppingCartComponent } from './shopping-cart/shopping-cart.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  {
    path: 'products',
    children: [
      { path: '', component: ProductListComponent },
      { path: ':id', component: ProductDetailComponent }
    ]
  },
  { path: 'shopping-cart', component: ShoppingCartComponent }
];

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

Step 4: Implement nested navigation

In the product-list.page.ts file, implement nested navigation by creating a router outlet:

import { Component } from '@angular/core';

@Component({
  selector: 'app-product-list',
  template: `
    <ion-header>
      <ion-toolbar>
        <ion-title>Product List</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-router-outlet></ion-router-outlet>
    </ion-content>
  `
})
export class ProductListComponent { }

Step 5: Handle route parameters

In the product-detail.page.ts file, handle route parameters by injecting the ActivatedRoute and using the snapshot property:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-product-detail',
  template: `
    <ion-header>
      <ion-toolbar>
        <ion-title>Product Detail</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <p>Product ID: {{ productId }}</p>
    </ion-content>
  `
})
export class ProductDetailComponent implements OnInit {
  productId: string;

  constructor(private route: ActivatedRoute) { }

  ngOnInit(): void {
    this.productId = this.route.snapshot.paramMap.get('id');
  }
}

Step 6: Implement navigation events

In the home.page.ts file, implement navigation events by using the NavController and listening to the ionViewWillLeave event:

import { Component, OnInit } from '@angular/core';
import { NavController } from '@ionic/angular';

@Component({
  selector: 'app-home',
  template: `
    <ion-header>
      <ion-toolbar>
        <ion-title>Home</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <p>Home page</p>
    </ion-content>
  `
})
export class HomeComponent implements OnInit {
  constructor(private navController: NavController) { }

  ngOnInit(): void {
    this.navController.addEventListener('ionViewWillLeave', () => {
      console.log('Leaving home page');
    });
  }
}

That's it! You have now created an application with complex routing scenarios and nested navigation.

Additional Resources:

• Ionic Angular Navigation Guide
• Angular Routing Guide
• Ionic Routing API Documentation

What to Do Next:

• Practice and experiment with different routing scenarios and nested navigation.
• Apply global styles and themes to your application using Ionic's theming features. (See the next lab topic)

Leave a Comment or Ask for Help:

If you have any questions or need help with this lab, please leave a comment below. I will respond to all comments and provide assistance as needed.