In my previous article: Ionic 2 | A Page Anatomy Part 1 – The Root Component, I talked about Ionic 2 Root component. In a few short words, Components are the main way we build and specify elements and logic on the page and Root component is the first component to initialize.
 
In this article, we’ll continue dissecting Ionic 2 tutorial, with a particular look at page components. Again, I will try to make it as easy as possible, even if you don’t have a previous Angular 2 knowledge.
 
Please, don’t read this article if you haven’t read the previous one, you may miss some information.
 
 

Note: If this tutorial was helpful, need further clarification, something is not working or do you have a request for another Ionic post? Furthermore, if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here, again leave me a comment below. I'm here to help you, I expect the same from you. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com, or follow and mention me on twitter (@gajotres). Thanks and have a nice day!

PS. If you want my help, if possible (even if it takes you some time to do that), create a working example I can play with. Use Plunker for AngularJS based questions or jsFiddle for jQuery/jQuery Mobile based questions.


 

Table of Contents

 
The Ionic 2 is a complex and sometimes difficult field of study so this article will hardly satisfy all your needs. If you require more information beyond the subject of this article you will probably find it in a list below. Take a look; if there’s a topic not covered there, leave me a comment and I’ll cover it.
 
 

Introduction

There’s a real reason I’ve decided to split this article in two. In 99% of cases, mobile applications have more than one page, so single Root component is not going to be enough. There’s another kind of component we can use to build application pages; I’ll call it a page component, and we’re going to talk about it here.
 
Page components are almost identical to the Root component, with these differences:
 
  • Page components are using the @Page decorator instead of the @App decorator. We can’t use @App decorator because it’s used to define a Root component.
  • Page component classes are defined with the export keyword. Unlike root class, these classes can be imported.
 
 
 
Warning: Ionic2 is still in alpha status so the final implementation may differ from this code. I will update this article if that ever happen.
 
 
 

Page component example

Ionic 2 tutorial is comprised of three page components. They are called HelloIonicPage, ItemDetailsPage, and ListPage. Just like Root component, these pages have one model JavaScript file, one view HTML file, and they may or may not have an SCSS style file.
 
Let’s take a look at HelloIonicPage page; you can find this example in provided Ionic 2 tutorial:
 
import {Page, NavController} from 'ionic/ionic';

@Page({
  templateUrl: 'app/hello-ionic/hello-ionic.html'
})
export class HelloIonicPage {
  constructor(nav: NavController) {
    this.nav = nav;
  }
}
 
I chose this page because Root component is using it as a default main page.
 
As you can see, this model looks almost identical to Root component we discussed in Part 1 of this article.
 
We’re still need to import important Ionic 2 services like Page and NavController:
 
import {Page, NavController} from 'ionic/ionic';
 
@Page decorator is used instead of @App, but the logic is still the same, to connect HelloIonicPage class with a related template file:
 
@Page({
  templateUrl: 'app/hello-ionic/hello-ionic.html'
})
 
And finally, a class section we’re initializing with a previously mentioned export keyword:
 
export class HelloIonicPage {
  constructor(nav: NavController) {
    this.nav = nav;
  }
}
 
Classes are usually much longer; this one is just a simple example. Don’t let export keyword confuse you. This class is just like any other class. It has a constructor; it lacks methods, but we can always add them.
 
Now let’s take a look at a related view template:
 
<ion-navbar *navbar>
  <button menuToggle>
    <icon menu></icon>
  </button>
  <ion-title>Hello Ionic</ion-title>
</ion-navbar>


<ion-content padding class="getting-started">

  <h3>Welcome to your first Ionic app!</h3>

  <p>
    This starter project is our way of helping you get a functional app running in record time.
  </p>
  <p>
    Follow along on the tutorial section of the Ionic docs!
  </p>
  <p>
    <button primary menuToggle>Toggle Menu</button>
  </p>

</ion-content>
 
As you can see, this example looks almost identical to the Ionic 1 template.
 
On the top, there’s a classic navbar with a button pointing to side menu.
 
If you take a look at it:
 
<ion-navbar *navbar>
  <button menuToggle>
    <icon menu></icon>
  </button>
  <ion-title>Hello Ionic</ion-title>
</ion-navbar>
 
You’ll notice a keyword menuToggle. In this context, it will open a side menu. But if we have two side menus, we can also use it like this:
 
  <button menuToggle="menu1">
 
Where menu1 is menu id.
 
Below navbar, we have a simple content section with another button capable of opening a side menu.
 
Again, this is an extremely simple example. In my next article, we’re going to create a more complex app where I’m going to discuss navigation, sharing data between pages, and much much more.
 

Who Am I?

Between working as a senior Java developer in one of the largest insurance companies in the world and traveling, in my free time, I work as a professional mobile development adviser. I'm also a major jQuery Mobile supporter back at StackOverflow and a forum moderator at the official Ionic Framework forum.

Blogs worth reading

If you're here looking for information related to the Ionic Framework, you will also like these blogs:






  • Charles

    you mentioned @app and @page in this post. However when i generate sample app from ionic2, they uses @component for all pages. I’m wondering if @app&@page is being deprecated or something?

    Also the things you import on top of the javaScript are also different from ionic official sample app. Care to explain if they serve different purposes or your way is deprecated? I assume ionic sample
    is the most advanced. If it’s not true please let me know.

  • mbelnicoff

    I have the same questions as Charles.
    Thanks for your help.