Understanding Ionic 2 : First steps with Ionic 2 -- Words (2295)

Ionic 2 is the version 2 of the popular Ionic framework used to build cross platform and hybrid mobile applications with web technologies .Ionic 2 makes use of Angular 2 instead of Angular 1 and comes with features and optimizations which weren't available in Ionic 1.In version 2 the Ionic framework is completely rewritten to bring new experience while building hybrid mobile applications .

Personally what i like the most about Ionic 2 is the embracing of the modern JavaScript ES6 which brings us classes,modern import and export system ,decorators etc.. When writing this tutorial Ionic 2 is still in beta testing phase but it's already used by many developers to build their next hybrid mobile application.

Before starting to learn Ionic 2,make sure you have basic knowledge of Angular 2.I'm also assuming you are using Linux as the development machine and Android as the target mobile device but don't worry if you are using another operating system for developing or targeting another mobile OS ,the steps are the same.that's one of the benefits of using Cordova based mobile frameworks .

Ionic 2 is a vast and complex framework therefore I'm going to make a series of tutorials so i can cover as many topic as i can.This tutorial is the first one so don't worry if you don't find what you need in this first one because other tutorials are coming .

What you need to do before you can start building your mobile application is installing the required tools

Installing Java SDK.

Installing Android SDK.

Installing Node.js

I've already covered how to install Node.js in a previous tutorial so feel free to check it in case you are finding any problem while installing Node.js or you can simply grab the installer from here .

Ionic 2 NVM

I personally prefer to use NVM or The Node Version Manager to install Node.js because it allows you to quickly install and work with any version of Node.js and easilly switch between versions.

Installing Ionic and Cordova

After installing the Node.js platform the next step is to install Ionic 2 and cordova So go ahead execute the following line.

  npm install -g cordova [email protected]
Install Ionic 2

Next,you should be able to scaffold a new Ionic 2 app using the CLI

    ionic start myApp --v2
    cd myApp
    ionic serve 
Ionic 2 new app
Ionic 2 new app

Please not that the beta version of Ionic works with both v1 and v2 projects so you need to specify which version you want to use .If you want to use Ionic 2 just add --v2 switch when scaffolding your app.

After generating the app just cd into myApp directory and hit ionic serve to start your mobile app

So now you Ionic 2 app is served and you can test it and play with it using your local browser.In this phase you don't need an emulator or even an actual device to develop your app but all these options are available with Ionic whenever you need them.

If everything has gone correctly you should see an app based on a Tabbed UI layout

Ionic 2 served

Please note that the default app which gets generated is based on the tabs project which gives you a ready tab system to build your app upon but you can also specify other templates to use such as the sidemenu or the tutorial templates

    ionic start myApp sidemenu --v2
    ionic start myApp tutorial --v2
  ionic start myApp blank --v2 --ts 

Cordova is used to run your mobile app on a native device or emulator .You can easilly install with

sudo npm install -g cordova

Building your mobile app

After generating your app and installing Cordova you can build your app for either Android or iOS,just make sure you have installed the required SDKs , the Java SDK and Android SDK in case you want to build for Android and a MAC OS with Xcode if you want to build for iOS and then follow these simple steps

ionic platform add android 

or

ionic platform add ios
ionic run android

or

ionic run ios

or if you are using an emulator

  ionic emulate android

or ionic emulate ios

That's all what's needed to generate your Ionic 2 app and build it .If you are using these tools for the first time you are going to struggle a little bit when installing the Java SDK ,Android SDK and latest version of Node.js depending on the operating system you use but don't worry there are many resources on the web to help you just search for them.

With Ionic 2 we can benefit from the high level and modern languages such as ES6 and TypeScript without worrying about Browser support and Ionic with the help of Gulp takes care of transpiling and compiling everything on the fly to ES5 which is what currently all browsers supports.

The anatomy of an Ionic 2 App

The anatomy of an Ionic 2 app

Instead of plain JavaScript Ionic 2 uses TypeScript which adds more features so you should familiarize yourself with TypeScript if you intend to develop mobile apps with Ionic 2 .Now lets try to investigate the anatomy or structure of an Ionic 2 project.

First of all,this is a Cordova based project with plugins directory for installing Cordova plugins which includes default plugins but we can also add any plugin by just issuing ...

It is also a Nodejs project since it has a package.json file and a node_modules directory .You can also notice the gulpfile.js file since Ionic 2 uses Gulp to automate tasks such as building,compling and transpiling ,minifying and compressing etc..

There is also a tsconfig.json used for TypeScript configuration . Now for our development work there are two folders which are important to us which are app and www,the majority of the work goes on app while the www folder hosts the main entry file our mobile app which's index.html .Beside ordinary html tags to include css and javascript resources you should notice the custom tag .

<ion-app></ion-app>

This is what Ionic 2 looks in this file in order to function correctly.

In the app folder lives the TypeScript source files .The entry file is app.ts which hosts the root component

import {Component} from '@angular/core';
import {Platform, ionicBootstrap} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {TabsPage} from './pages/tabs/tabs';
@Component({
  template: '<ion-nav [root]="rootPage"></ion-nav>'
})
export class MyApp {

  private rootPage:any;

  constructor(private platform:Platform) {
    this.rootPage = TabsPage;

    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)

Explaining

The app starts by importing the necessary constructs(classes,functions and decorators etc..) using the modern ES6 import system
The first one is Component which's a decorator from the angular2 core if this is the first time you meet a decorator then simply accept my simple definition for it as a start:a decorator adds functionality to any class it decorates in our case the Component decorator transforms MyApp class into a Component.Decorators begins by an @ symbol and takes an object as a parameter .In this case the only attribute of this parameter is template which specifies the template we are going to use for MyApp component.You can put a raw HTML code right in template or specify the relative path of an HTML file by using templateUrl instead.

Next we import Platform and ionicBootstrap from ionic-angular.

We import StatusBar from ionic-native.

We import TabsPage from './pages/tabs/tabs'.

After declaring our class MyApp.In the constructor we assign the TabsPage class to our rootPage member variable and then check if the platform is ready to execute StatusBar.styleDefault(); Now how we specify TabsPage as our root ? Just look at html code in decorator you should see [root]="rootPage" which means that the root property of is bound to the private class member rootPage.

Next the app gets bootstrapped using ionicBootstrap(MyApp) with MyApp as a parameter.

Angular 2 brought us the notion of a component.Components are a way of organizing your code as independent parts ,each part is standalone and self dependent, and can communicate with other components .All modern frameworks are starting to use this software pattern because it has big benefits when building ,testing and maintaining your application code.I'm not going to talk about why using components is a better choice because this can take pages, anyway the web is full of this kind of information if you are interested.

Creating and Navigating between Pages

Now lets see how to add and navigate between pages .If you look into the app/pages directory you may notice that each page has its own folder which hosts html,scss and typescript files that belongs to each page .If we open up the about.ts file

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';

@Component({
  templateUrl: 'build/pages/about/about.html'
})
export class AboutPage {
  constructor(private navController: NavController) {
  }
}

You should notice that the about page is represented by a Component.So again we import the necessary constructs and then decorates our AboutPage class using @Component decorator .This time we use templateUrl to specify a relative path to our about.html file which will be used by AboutPage component to dispaly the about page.

You should notice one more thing the NavController class is injected via the class constructor .

You should be carefull to add the export keyword before the class if you need to import this class from other files.

Now lets look in the html template associated with this page.

<ion-header>
  <ion-navbar>
    <ion-title>
      About
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding class="about">
</ion-content>

These are self explanatory Ionic tags which setup a header and a content area with and

So in order to create a page you need to create a class and template file and an optional scss file for styling the page markup.

Creating the tab system

Now lets understand how the tab ui was created .Go to the tabs folder inside pages and locate tabs.ts and tabs.html

import {Component} from '@angular/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 tells the tabs component which Pages
    // should be each tab's root Page
    this.tab1Root = HomePage;
    this.tab2Root = AboutPage;
    this.tab3Root = ContactPage;
  }
}

So the typescript code behind this tab system is very simple .As you can see first we import the @Component decorator .Then we import all pages to use for tabs and then we assign these pages to the private variables tab1Root,tab2Root and tab3Root in the constructor.

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

Now in the HTML code we bind these variables to the root property of each .

Creating pages on the fly

Ionic 2 has functionality to generate pages without writing so much code by hand.To simply generate a page ,just use the Ionic CLI and type:

    ionic g page aPage
Ionic 2 generate a page

Creating Services on the fly

To generate a service use g provider

    ionic g provider aService

Conclusion

So in this tutorial we have made our first steps towards learning Ionic 2 .I really hope this tutorial was helpful to you and see you in other tutorials.


I'm a web developer and technical writer. Passionate about modern JavaScript technologies and currently trying to develop all kind of apps (Web, Mobile and Desktop) with JavaScript.