In my previous article, I covered everything you need to know about Ionic 2 installation. For this one, we’re going to dissect Ionic 2 tutorial template. I will use it to show you Ionic 2 page/application anatomy, especially compared to Ionic 1. It will be as easy as possible, even if you don’t have a previous Angular 2 knowledge.
 
 

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

Because Ionic 2 page anatomy is not comparable or compatible with Ionic 1 (there are some similarities but only a few), I will split this article in two. This one will cover the root Ionic 2 component, which is the first section of the application to initialize. Where the next article will include other components.
 
If you don’t know what Angular2 component is, take a look at this summary: In Angular 2, Components are the main way we build and specify elements and logic on the page. In Angular 1, we achieved this through directives, controllers, and scope. In Angular 2, all those concepts are combined into Components.
 
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.
 
 
 

Download a Tutorial Template

We’ll start with a tutorial template, let’s download it.
 
ionic start Ionic2FirstApp tutorial --v2
cd Ionic2FirstApp
ionic serve
 
This is how it looks like:
 
Ionic - Page Anathomy - Tutorial Template
 
 
 

A Project structure

Here’s what folder structure looked like and how it looks right now (taken from the Sublime Text Editor):
 
Ionic - Page Anathomy - Project Structure
 
On a left side, you can see an Ionic 1 project folder structure. It closely follows Angular 1 separation of model and view components. Model JavaScript files, view HTML files, and CSS/SCSS files are separated into different directories.
 
On the other hand, Ionic 2 structure is done differently. Following Angular 2 recommendations, model, view, and CSS/SCSS files are combined on a component (page) level. Technically, each Ionic 2 page (component) is now a standalone piece of a project. And each component contains model JavaScript file, view HTML file, and SCSS file(s).
 
There’s one other big difference. In the older Ionic 1, your code is placed inside a www folder and everything you do will be done there. With Ionic 2 things have changed significantly. www folder is still here but it’s no longer used for development. Instead, we need to use app folder.
 
Subjectively, this project separation makes more sense from the organization point of view, especially if several developers are working on a single project. All development will be done inside the app folder and the final result will be compiled and moved to www folder.
 
Previously mentioned projects are generated using these:
 
ionic start IonicFirstApp sidemenu
ionic start Ionic2FirstApp tutorial --v2
 
 
 

Application Example

I will cover this code following a logical order of application initialization.
 
index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ionic</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

  <link ios-href="build/css/app.ios.css" rel="stylesheet">
  <link md-href="build/css/app.md.css" rel="stylesheet">
</head>
<body>

  <ion-app></ion-app>

  <script src="cordova.js"></script>
  <script src="build/js/app.bundle.js"></script>
</body>
</html>
 
As you can see, just like with an older Ionic, index.html is mostly empty. Though, you can already see two major changes. First of all, we’re not starting out app with <ion-nav-view> block and ng-app attribute no longer exist.
 
Instead, we’ll initialize our app directly using this line:
 
  <ion-app></ion-app>
 
Calling this code is like calling a root app.js in Ionic 1. In this case, we’re calling a so-called Ionic 2 root component which is used to manage and initialize our application.
 
Root component consists of a model (JavaScript file – app.js), a view (HTML file) and several style (SCSS) files and you can find them inside the app folder.
 
Before we delve any deeper, if you need a better understanding of imports, decorators and clases take a look at these excellent articles (Understanding Ionic 2: Class and Understanding Ionic 2: Imports) written by always great Andrew McGivery.
 
Let’s take a look at the app.js:
 
app.js
import {App, IonicApp, Platform} from 'ionic/ionic';

import {HelloIonicPage} from './hello-ionic/hello-ionic';
import {ListPage} from './list/list';

@App({
  templateUrl: 'app/app.html'
})

class MyApp {
  constructor(app: IonicApp, platform: Platform) {

    // set up our app
    this.app = app;
    this.platform = platform;
    this.initializeApp();

    // set our app's pages
    this.pages = [
      { title: 'Hello Ionic', component: HelloIonicPage },
      { title: 'My First List', component: ListPage }
    ];

    // make HelloIonicPage the root (or first) page
    this.rootPage = HelloIonicPage;
  }

  initializeApp() {
    this.platform.ready().then(() => {
      console.log('Platform ready');

      // The platform is now ready. Note: if this callback fails to fire, follow
      // the Troubleshooting guide for a number of possible solutions:
      //
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      //
      // First, let's hide the keyboard accessory bar (only works natively) since
      // that's a better default:
      //
      //
      // For example, we might change the StatusBar color. This one below is
      // good for light backgrounds and dark text;
      if (typeof StatusBar !== 'undefined') {
        StatusBar.styleDefault();
      }
    });
  }

  openPage(page) {
    // close the menu when clicking a link from the menu
    this.app.getComponent('leftMenu').close();
    // navigate to the new page if it is not the current page
    let nav = this.app.getComponent('nav');
    nav.setRoot(page.component);
  }
}
 
If you have a previous Java or C# object-oriented knowledge then this syntax is going to be a very familiar to you.
 
We will start our code importing other major components:
 
import {App, IonicApp, Platform} from 'ionic/ionic';

import {HelloIonicPage} from './hello-ionic/hello-ionic';
import {ListPage} from './list/list';
 
You should always import major services like App, IonicApp, Platform first. They don’t have view components but our application will not work without them.
 
Next we need to import other application components (HelloIonicPage and ListPage pages). For example, HelloIonicPage component is referencing hello-ionic/hello-ionic.js location. You should also notice that these imports reflect component relative paths.
 
After importing, we need to combine our root component with provided view (we need to combine root component js file with provided HTML file). To achieve this, we’re using @App decorator (it’s like setting a metadata for our component). In this case, we’re telling it where to find a view part:
 
@App({
  templateUrl: 'app/app.html'
})
 
This piece of code is self-explaining. @App decorator is also what defines this component as a root component. Other components will use @Page decorator instead.
 
Continue to the next page
  • Alugbin Abiodun

    Please i have been trying to add sidemenu to my page but its not the root page, i tried creating the menu in the same page but the back button keeps hiding my toggleMenu button. i will really appreciate if you can just demo a dashboard application where you first fill out a login page then move to the dashboard with sidemenu and tabs in ionic 2.
    Thanks

    • mohammad moussa

      Hello, can you please help me if you find a solution for this issue?

  • NonZero

    Not found this Ionic2FirstApp repo gives error not found
    Ionic2FirstApp

    Please solve this issue.

  • Tim

    Thank you very much for the tutorials/articles on Ionic 2!

    When I create a new ionic 2 (2.0.0-beta.6) project it is a bit different from yours, judging from the app.js file for example. I use Terminal on an iMac OS X El Capitan. This is your code:
    “class MyApp {

    constructor(app: IonicApp, platform: Platform) {“

    and this is the code in my project:
    “class MyApp {
    static get parameters() {
    return [[IonicApp], [Platform], [MenuController]];
    }

    constructor(app, platform, menu) {“

    I haven’t tried your code yet, but I think that I will get a parsing error here: “app: IonicApp, platform: Platform”. Is your code like that because you use TypeScript? If yes, where did you declare the use of TypeScript? In the Ionic 2 docs it says: “Want to use TypeScript instead? Pass the –ts flag and get a project set up for TypeScript instead”.

    Is it better, more comfortable, more intuitive, easier to use TypeScript or not?

  • Murali

    Thank you,
    It will be greate if you can write an article which will cover below scenario.

    Have a tab menu at startup like Login, Signup, About, help and once they login then have side menu (not tab menu).

    Cheers
    Murali