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):