Ionic 2 | A Page Anatomy Part 1 – The Root Component

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.

Click here if you want to see a list of topics covering Ionic 2 framework

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

A Project structure

Here’s what folder structure looked like and how it looks right now (taken from the Sublime Text Editor):

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.

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.

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.

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

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).