Overview of Navigation
Explore how Ionic navigation leverages Angular routing for building efficient mobile applications. Learn about routing modules, lazy loading of components, URL parameters, and handling browser history within Ionic apps to optimize navigation management.
We'll cover the following...
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 ...