Overview of Navigation

Since Ionic 4, the decision to align closer with the Angular framework standards means that navigation has undergone a complete overhaul, with Angular routing now being the preferred and default choice for implementing navigation within our applications.

This assumes we will be using Angular as the default front-end framework for development, which we will be using throughout this course.

We’ll also discuss some non-Angular navigation methods and approaches that are available when developing with the latest version of Ionic towards the end of this chapter. For the most part, though, we’re going to focus almost exclusively on Angular routing.

The Angular Router

Angular’s Router module provides developers with the ability to architect navigation and routing logic within their applications through a host of features, including the ability to:

• Lazy load page components
• Allow URLs to be redirected to other URLs
• Allow optional URL parameters to be supplied and retrieved.
• Allow data to be resolved before displaying the requested page.
• Allow scripts to be executed when a route is activated and/or deactivated.
• Update the browser history when a user navigates between pages using the browser’s back and forward buttons.

Within Ionic applications, this routing logic is declared within the App Routing Module file. When using the Ionic CLI to create an Ionic or Angular project, this file is automatically generated atsrc/app/app-routing.module.ts.

The App Routing Module

In its default state, the App Routing Module contains the following code (minor formatting changes have been made to display the code for better readability):

In its simplest form, an Angular routing module allows navigation logic for the application to be contained and organized within its dedicated file separate from other application concerns.

If we step through the above routing module, we have the following elements:

• The routing module begins by importing the NgModule module on line 1, which allows an application to be structured into smaller blocks of related functionality through the use of the @NgModule decorator.
• The Routes and RouterModule are imported next on line 2, which provide the necessary directives for helping to manage changes between states within the application and loading different components on demand.
• A Routes array is declared from lines 4 to 14, which is used to define the individual path identifiers for loading the designated page components for the application.
• The @NgModule decorator is declared from lines 16 to 21, which defines the imports and exports for the routing module.
• The forRoot() method is declared on line 18 within the NgModule imports array. This allows the RouterModule to make the defined routes available on an application-wide basis.
• Finally, an export declaration on line 22 for the routing module is made.

The Routes array

Within the src/app/app-routing.module.ts routing module, the following array is declared from lines 4 to 14:

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

Each of the above routes array items, which the Ionic CLI automatically generates, provide key and value pairs that the Angular framework uses to determine how the application should route and manage specific navigation requests.

Each of these elements is as follows:

• The path is the URL path of the route (which is defined as a string)
• The redirectTo specifies the name of the path that the matching URL should redirect to
• The pathMatch instructs the Angular Router on how to match the specified URL to the path of a route. In this instance, the entire URL matches, so we use of the value of ‘full’
• The loadChildren used to lazy load the specified component module (declared as the address of the page component module relative to the App Routing module) that finishes with the name of the exported module class. In this example, this is the HomePageModule

Important: All components are lazy-loaded within Ionic by default when the route for that component is first requested, after which those routes will be available immediately for all subsequent requests.

Lazy loading

Lazy loading refers to loading page components and related assets for a requested navigation route on demand. The opposite of lazy loading is to import all page components and associated assets, such as services, directives, and Angular pipes, within an Ionic application’s root module, located at src/app/app.module.ts.

The downside of using a non-lazy loading approach is that an application can take longer to launch and execute. Components and related assets may also be globally available when they only need to be requested by one or two parts of the application.

This can be pretty inefficient and unnecessary, which is where lazy loading comes into play by ensuring that requested components and assets are only made available when specifically requested.

In the App Routing Module src/app/app-routing.module.ts, we lazy-loaded the HomePageModule (located at src/app/home/home.module.ts), which appears as follows in its default state:

As you can see from the above code, this imports various Ionic/Angular modules and, more importantly, the highlighted HomePage component (where the code for the actual page that will be rendered to the screen is located).

This is how Ionic “knows” which page component to load and display on the screen for the requested navigation route.

This might seem a little convoluted. So why is Angular routing used in Ionic applications?

Why Angular routing?

Let’s look at some of the benefits of using the Angular Router approach to manage Ionic navigation:

• The ability to lazy load page components
• URL redirection
• Parses URL parameters
• Resolves data before displaying the requested page
• Can execute application logic when a route is activated and/or deactivated
• Manages browser history based on user’s navigation

Don’t worry if some of these bullet points are unfamiliar. We’ll be covering them over the remainder of the chapter, so they will become familiar in no time!