Ionic is world’s most popular cross platform mobile development technology. Basically its hybrid mobile app development framework. Build on top of Cordova, which enables us to build app along with web technologies. The goal behind developing Ionic is to give web developers a way to use their skill-set to build mobile applications.

Recently Ionic 2 has been launched. Conceptually Ionic 2 is similar to Ionic 1. In Ionic 2 controller hold all logical part and view is handled by template, except controllers are classes. Like this there are many key differences. Ionic 2 is build on the base of Angular 2 which uses typescript. All controllers are written in .ts file. Hence while building a app, these files get converted into .js files. This is the process of ‘Transpiling’. Transpiling does not allow logic to be directly available through debugging.

Now a days Ionic 2 is top choice for fast development. There are some reasons why it is more preferable than Ionic 1. Followings are some key points why we should migrate from Ionic 1 Ionic 2 :

Speed :

In Angular 2 change detection in model is very quick. So, Ionic 2 app is faster than  Ionic 1.

Organized directory structure :

In Ionic 1, there is no standard way to organize our files. User can arrange file as per his/ her convenience. But Ionic 2 comes with its own directory structure. Every page is referred as component. Each component comes with its own folder. It contains .ts file as class/ controller, .css file and .html file as a view. For e.g. suppose we have two pages as home and about. Then structure be like :

Ionic 1 :

• /www
  • /js
    • home.js
    • about.js
  • /templates
    • home.html
    • about.html
  • /css
    • home.css
    • about.css

Ionic 2 :

• Home
  • home.ts
  • home.html
  • home.css
• About
  • about.ts
  • about.html
  • about.css

Navigation :

In Ionic 1, navigation is done by routing through states. But in Ionic 2, more easier approach is used that is ‘stack’. When we want to redirect to particular page, we will just push that page onto navigation stack. We can come back to previous page by popping the current page from stack. As simple as that. Lets see difference between Ionic 1 and Ionic 2 navigation :

Ionic 1 : We can specify routes like this,

  $stateProvider
   .state('home', {
     url: '/home',
     templteUrl: 'templates/home/index.html',
     controller: 'HomeController'
   })
   .state('about', {
     url: '/about',
     templateUrl: 'templates/about/index.html',
     controller: 'AboutController'
   });

Whenever we want to go from home state to about state we just give,

  $state.go('about');

Ionic 2 : Similarly, suppose we have home page as,

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

  @Component({
    selector: 'page-home',
    templateUrl: 'home.html'
  })
  export class Home {
    constructor(public navCtrl: NavController){}
    loadAbout(){
     // load about page
    }
  }

To go to about page, we just push page onto navigation stack,

  loadAbout(){
    this.navCtrl.push(About);
  }

To remove page from stack or to go to previous page,

  this.navCtrl.pop();

Generators :

In Ionic 1, whenever we need to add new controller, we just define it in some file. Then associate controller with relative template file with help of state-provider. This process is very simple in Ionic 2. With Ionic 2 CLI, we can easily generate pages, providers, pipes, etc. Ionic 2 provides generator command for it. Lets have a look,

1. Pages :

These are main component of app. When we create new page, it comes with 3 files as mentioned above. To generate page command is :

  ionic generate page Home or ionic g page Home

The page comes with default structure. Its looks like :

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

  @Component({
    selector: 'page-home',
    templateUrl: 'home.html'
  })
  export class HomePage {

    constructor(public navCtrl: NavController) {}

    ionViewDidLoad() {
      console.log('Hello HomePage Page');
    }

  }

2. Provider:

Providers are similar to service in Ionic 1. Every provider is injectable. Means we can import or inject service, provided by provider. The command to generate providers is :

  ionic g provider ApiServiceProvider

The default structure of provider is :

  import { Injectable } from '@angular/core';
  import { Http } from '@angular/http';
  import 'rxjs/add/operator/map';

  @Injectable()
  export class ApiServiceProvider {

    constructor(public http: Http) {
      console.log('Hello ApiServiceProvider Provider');
    }

  }

3. Pipe:

Pipe is one of the decorator. The main goal of pipe is to transform the given set of values. Pipe is also injectable. The default method in each pipe class is ‘transform’. Our input transformation logic comes here. The command to generate Pipe :

  ionic g pipe Lowercase

The default structure of pipe is :

  import { Injectable, Pipe } from '@angular/core';

  @Pipe({
    name: 'lower'
  })
  @Injectable()
  export class LowerCase {
    transform(value, args) {
      value = value + ''; // make sure it's a string
      return value.toLowerCase();
    }
  }

We can use this pipe in template as,

  <label>{{name | lower}}</label>

Set of API :

To build dynamic app, we may need various cordova plugins. In Ionic 1, when we use any plugin we need to inject related cordova service in relavant controller. Then only we can access plugin feature. For example, suppose we want to use cordova plugin to access contact from mobile. For it we will install plugin ‘cordova-plugin-contacts’. Once done, we can use it like this in Ionic 1:

  angular.module("app")
    .controller('ContactController', function($scope, $cordovaContacts, $cordovaToast){
      $scope.findContact = function(){
        Contacts.find(['*'], {filter  : "TPN whatsapp number"}).then(function(contactFound){
           if(contactFound.length >= 1){
             $cordovaToast.showShortBottom('Contact Found!!!');
           }
        });
      }
    })

This scenario looks clean in Ionic 2. It provides large set of Native API classes. Using these classes, we can easily use any  plugin with app. To integrate contact plugin, Ionic 2 provides native class names as ‘Contacts’. We can use it like this:

  import { Component } from '@angular/core';
  import { ToastController } from 'ionic-angular';
  import { Contacts } from 'ionic-native';

  @Component({
    selector: 'page-home',
    templateUrl: 'home.html'
  })
  export class Home {
    constructor(public toastCtrl: ToastController){}
    findContact(){
      Contacts.find(['*'], {filter  : "Support Contact Number"}).then((contactFound) => {
        if(contactFound.length >= 1){
          let toast = this.toastCtrl.create({
            message: "Contact Found!!!",
            duration: 2000,
            position: 'bottom'
          });
          toast.present();
        }
      });
    }
  }

Support for cross-platform :

Ionic 1 comes with support to only 2 platforms, i.e. Android and IOS. Ionic 2 allows us to build app which is compatible with Android, IOS as well as Windows phone.

In next blog we will see what major issue we can face while developing an app in Ionic 2 and solution to it.