Navigate Between Pages In An Ionic Android And iOS App

In most scenarios, when developing a mobile application, you’re going to want multiple pages or screens for displaying information. In Ionic Framework 1, you’d use the AngularJS UI-Router to navigate between pages, but things are different when it comes to Angular and Ionic 2. The UI-Router is not present in the latest version of Ionic Framework.

We’re going to take a look at navigating around an Ionic 2 application and see how easy it is.

Let’s start by creating a fresh Ionic 2 Android and iOS project. This can be done by executing the following from your Terminal (Linux and Mac) or Command Prompt (Windows):

ionic start ExampleProject blank --v2
cd ExampleProject
ionic platform add ios
ionic platform add android

It is important to note that you cannot add and build for the iOS platform unless you are using a Mac computer. Also, you must be using the Ionic CLI version that supports building Ionic 2 applications.

The blank Ionic 2 template only has one screen to start and it has nothing on it. We’re going to create a second page and navigate to it.

We’ll start by creating our other application page. Inside your project’s www/app directory, create a folder called other that contains an other.html, other.js, and other.scss file.

For simplicity, the www/app/other/other.scss file should look like this:

.other { }

We’re not going to worry about styling this page.

Next let’s move onto the UI for this other page. Open your project’s www/app/other/other.html and add the following code:

<ion-navbar *navbar>
    <ion-title>
        Other
    </ion-title>
</ion-navbar>

<ion-content class="other">
    <div>{{firstname}} {{lastname}}</div>
</ion-content>

As you can see, this page will display a first and last name. We’ll get to that soon.

Finally let’s add the logic component to this page. Open the www/app/other/other.js file and add the following:

import {Page, Platform, NavParams} from 'ionic/ionic';

@Page({
    templateUrl: 'app/other/other.html',
})

export class OtherPage {
    constructor(platform: Platform, navParams: NavParams) {
        this.platform = platform;
        this.navParams = navParams;
        this.firstname = navParams.get("firstname");
        this.lastname = navParams.get("lastname");
    }
}

The important thing to note here is the stuff dealing with NavParams. The firstname and lastname variables that we display in the UI come from the NavParams which actually come from the parent page. It is a way to pass values when navigating between pages. You’ll see this in parent page now.

Open your project’s www/app/home/home.js file and change the code to the following:

import {Page, Platform, NavController} from 'ionic/ionic';
import {OtherPage} from '../other/other';

@Page({
    templateUrl: 'app/home/home.html',
})

export class HomePage {
    constructor(platform: Platform, nav: NavController) {
        this.platform = platform;
        this.nav = nav;
    }

    navigate() {
        this.nav.push(OtherPage, {
            firstname: "Nic",
            lastname: "Raboy"
        });
    }
}

A few things going on here. First off, we are including the NavController which will allow us to play with the navigation stack. Next we are defining this OtherPage class and specifying which file it is coming from.

Let’s jump into the navigate function. When this function is called we are going to push the OtherPage class into the stack, while also including two NavParams, like we saw in the child page. Anything you add to this object can be accessed in the child page.

Finally let’s look at the simple UI driving this. Open your project’s www/app/home/home.html file and change it to the following:

<ion-navbar *navbar>
    <ion-title>
        Home
    </ion-title>
</ion-navbar>

<ion-content class="home">
    <button (click)="navigate()">Navigate</button>
</ion-content>

Nothing fancy here. Just a button that navigates deeper into the stack.

Conclusion

We don’t have the UI-Router like we had in Ionic Framework 1, but in Ionic 2 we don’t need it. Navigation has become significantly easier in version two of the framework. However, the way Ionic 2 navigates is not the same as how Angular navigates. If you’re interested, I wrote about how to navigate between routes in Angular in a separate tutorial.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.