Understanding Ionic 2 : Creating Pages and Navigation Systems -- Words (1442)

Ionic

Generating a new app

Lets start our journey by generating a new Ionic 2 project using the CLI

ionic start navigationApp blank --v2 

Generating pages

ionic g page about 
ionic g page contact

Don't forget to add an import for about.scss in app/themes/app.core.scss:

@import "../pages/about/about.scss";
@import "../pages/contact/contact.scss";

Creating navigation between pages

Untill now we have three pages home contact and about .We need to add navigation from home to about and to contact so how to do that with Ionic 2 ?

There many ways to implement navigation between pages in an Ionic 2 app :

Simple and basic navigation system


We are going to use for creating a navigation controller.If you look in app.ts file you should notice that there is already navigation controller

import {Component} from [email protected]/core';
import {Platform, ionicBootstrap} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {HomePage} from './pages/home/home';


@Component({
  template: '<ion-nav [root]="rootPage"></ion-nav>'
})
export class MyApp {
  rootPage: any = HomePage;

  constructor(platform: Platform) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
    });
  }
}

ionicBootstrap(MyApp);

In order to use the navigation from other pages you only need to inject it via the class constructor of the corresponding page .To actually navigate between pages you need to push and pop pages from the injected navigation controller and that's it.

Now to be able to navigate from HomePage to AboutPage we only need to import AboutPage and push it to history stack then the navigation controller will take of the rest making top page on the stack appear.

add this to HomePage

 
  
import {AboutPage} from '../pages/about/about';
import {ContactPage} from '../pages/contact/contact';

  goToAboutPage(){
    this.nav.push(AboutPage);
  }
  goToContactPage(){
    this.nav.push(ContactPage);
  }

And then bind this method to click event by

 

   
    <ion-content>
      <button (click)="goToAboutPage()">
        Go to AboutPage
      </button>
      <button (click)="goToContactPage()">
        Go to AboutPage
      </button>

    </ion-content>`

Add this to AboutPage

 

  goBack() {
    this.nav.pop();
  }

To simply understand this navigation system just understands that always current page is always on the the top of the navigation stack and to manipulate the top of the stack you have two methods push and pop,push to add another page to the stack top and pop to remove the current page from the top.

You can also have a ready Back button by just adding a to your pages header so in each child page header add this html code:

 

  <ion-header>
    <ion-navbar>
      <ion-title>Page Title</ion-title>
    </ion-navbar>
  </ion-header>

Please notice that you can only use this simple navigation system if there's a simple parent child relationship between your pages .In our case the HomePage is a parent of both AboutPage and ContactPage ,HomePage is the root of our navigation controller which is injected into ABoutPage and ContactPage. Now what if you have a more complex relationship between your pages such as having multiple root pages.In this case you have the choice between two navigation systems either the tab or the menu based navigation .

Tab based navigation


Imagine that we have many top level pages without any parent child relationship between them .Instead we need to be able to navigate to any one page of them, we choose,from one place.The tab system comes to the rescue .Implementing the navigation system is really easy with Ionic 2 all you have to do is adding a tabs.html template with

 

    ionic g page tabs

Next add the following code inside tabs.html

 

    <ion-tabs>
      <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
      <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
      <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
    </ion-tabs>

And inside tabs.ts add

 

import {Component} from [email protected]/core'
import {HomePage} from '../home/home';
import {AboutPage} from '../about/about';
import {ContactPage} from '../contact/contact';

@Component({
  templateUrl: 'build/pages/tabs/tabs.html'
})
export class TabsPage {

  private tab1Root: any;
  private tab2Root: any;
  private tab3Root: any;

  constructor() {
    this.tab1Root = HomePage;
    this.tab2Root = AboutPage;
    this.tab3Root = ContactPage;
  }
}

No you should change the root property of in app.ts to point to tabs

Menu based navigation


The recommended method of navigation by the ionic team is tabs but sometimes when you have many top level pages we can not use the tab system .In this case we can substitue tabs with a side menu to navigate between between root pages .So lets add a side menu to our app.

Open app.ts and change the template to

 

 `
    <ion-menu [content]="content">
      <ion-toolbar>
        <ion-title>Pages</ion-title>
      </ion-toolbar>
      <ion-content>
        <ion-list>
          <button ion-item (click)="openPage(rootPage)">
            Home
          </button>

          <button ion-item (click)="openPage(aboutPage)">
            About
          </button>
          <button ion-item (click)="openPage(contactPage)">
            Contact
          </button>

        </ion-list>
      </ion-content>
    </ion-menu>

    <ion-nav id="nav" #content [root]="rootPage"></ion-nav>`

and Add this to the MyApp class

 

       private rootPage = HomePage;
       private aboutPage = AboutPage;
       private contactPage = ContactPage;


      openPage(page) {
        // Reset the nav controller to have just this page
        // we wouldn't want the back button to show in this scenario
        this.rootPage = page;

        // close the menu when clicking a link from the menu
        this.menu.close();
      }

app.ts becomes

 

    import {Component} from [email protected]/core';
    import {Platform, ionicBootstrap} from 'ionic-angular';
    import {StatusBar} from 'ionic-native';
    import {TabsPage} from './pages/tabs/tabs';
    import {HomePage} from './pages/home/home';
    import {AboutPage} from './pages/about/about';
    import {ContactPage} from './pages/contact/contact';


    @Component({
      template: '<ion-menu [content]="content">
          <ion-toolbar>
            <ion-title>Pages</ion-title>
          </ion-toolbar>
          <ion-content>
            <ion-list>
              <button ion-item (click)="openPage(loginPage)">
                Login
              </button>
              <button ion-item (click)="openPage(signupPage)">
                Signup
              </button>
            </ion-list>
          </ion-content>
        </ion-menu>

      <ion-nav #content  [root]="rootPage"></ion-nav> '
    })
    export class MyApp {
       private rootPage = HomePage;
       private aboutPage = AboutPage;
       private contactPage = ContactPage;

      constructor(platform: Platform) {
        this.rootPage = TabsPage;
        platform.ready().then(() => {

          StatusBar.styleDefault();
        });
      }
    }

    ionicBootstrap(MyApp);

Conclusion

That's all for this tutorial .I hope that you have learned something from this tutorial to use in your next project based on Ionic 2.




mrnerd is a Web Entrepreneur & Developer, Digital Marketer and a Passionate Blogger. He writes about software and website development,money making tips and SEO etc.. He is a tech addict and a computer geek with a lot of hobbies.