Search⌘ K
AI Features
Home
Courses
Mastering Mobile Application Development with Ionic

Changes From Previous Versions of Ionic: Part 2

Understand the shift from Ionic 3's NavController to Angular routing for navigation. Learn about arrow functions and Ahead-of-Time compilation for performance. Discover Ionic's framework-agnostic support enabling React, Vue, and Angular integration.

We'll cover the following...

Angular routing and navigation

In Ionic 3, developers relied on the default NavController and NavParams modules for handling navigation logic within the app, like so:

TypeScript 3.3.4
import { Component } from '@angular/core';
import { IonicPage, NavController } from 'ionic-angular';
@IonicPage()
@Component({
    selector: 'page-accessories',
    templateUrl: 'accessories.html'
})
export class AccessoriesPage {
    constructor(public navCtrl: NavController) { }
    viewAccessory(accessory) {
        this.navCtrl.push('AccessoryDetail', accessory.id);
    }
}

The above TypeScript file implements navigation as follows:

  • It imports the NavController component on line 2 (for setting navigation items)

  • In the class constructor on line 10, we inject our imported component as a dependency to be used by our script, assigning that to a public property named navCtrl

  • A function called viewAccessory, which can be called via a click event in the page template is used on line 11 to implement the actual page navigation

  • This function, using the navCtrl property as a reference, implements the push method of the NavController component on line 12 to state which page to navigate to (this would be in the form of a string) ...