Mastering Mobile Application Development with Ionic/

...

/

Changes From Previous Versions of Ionic: Part 2

Changes From Previous Versions of Ionic: Part 2

Continue exploring the major changes introduced in the latest Ionic release, including Angular navigation, arrow functions, and AoT compilation.

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:

Press + to interact
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) and what parameters will be passed to this page

What of the page that we want to receive the passed-in data? That script might look something like this:

Press + to interact
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
  selector: 'page-accessory-detail',
  templateUrl: 'accessory-detail.html'
})
export class AccessoryDetailPage {
  constructor(public navCtrl: NavController, public navParams: NavParams) {
    console.dir(this.navParams.data);
  }
}

The above TypeScript file:

  • Imports the NavParams
...