The first journey to learn Ionic 2

1. Introduce about Ionic 2
At the time I'm writing this article, Ionic 1 already had a big success while Ionic 2 and Angular 2 is coming GA (general available).
If you just start with Ionic, this is the good time for learning Ionic 2 and Angular 2.

2. Why Ionic 2 is better
Compare with Ionic 1, Ionic 2 has some things better as the following:

2.1 Ionic 2 app is organized in a better structure vs. Ionic 1

Below is the structure of files and folders in a Ionic project:

app	This folder will contain all the code you're going to write for the app, ie. the pages and services.
hooks	This folder contains scripts that can be executed as part of the Cordova build process. This is useful if you need to customize anything when you're building the app packages.
node_modules	Ionic projects use npm to import modules, you'll find all imported modules here.
resources	This folder contains the icon and splash images for the different mobile platforms.
typings	This folder contains type definition files for external modules that are not written in TypeScript.
www	This folder contains the index.html, remember all the app code should be in the app folder, not in the www folder.
config.xml	This file contains the configuration for Cordova to use when creating the app packages.
ionic.config.js	Configuration used by the Ionic CLI when excuting commands.
package.json	This file contains the list of all npm packages that have been installed for this project.
tsconfig.json	Configuration for the TypeScript compiler.
webpack.config.js	This file contains the configuration for WebPack, which will create a bundle from the modules in the app.

2.2 Ionic 2 supports to create pages just by a simple command:
#ionic generate page YourPage
or
#ionic g page YourPage

2.3 Ionic 2 has cleaner syntax than Ionic 1, here are some examples:
Ionic 1: <img ng-src="{{photo.image}}" />
Ionic 2: <img [src]="photo.image" />

Ionic 1: <button ng-click="doSomething()">
Ionic 2: <button (click)="doSomething()">

You can see the code of Ionic 2 is easier to read than Ionic 1.

2.4 Ionic 2 has navigation mechanism better than Ionic 1, any time you want to navigate to a page, just push it into the navigation stack:
this.nav.push(YourPage);

When you want to go back the previous page, jus pop the current page out of the navigation stack:
this.nav.pop(YourPage);

2.5 Ionic 2 supports TypeScript and ES6, this allows you code take advantages of TypeScript and ES6 which will be supported natively in browsers in near future. However Ionic 2 will help translate TypeScript to JavaScript, so you don't worry.

2.6 Ionic 2 supports Components feature of Angular 2. Components allow you to quickly construct an interface for your app. You can build your specific Component or use existing Components of Ionic 2 such as modals, popups, and cards.
When you need  to use a Component, just go to http://ionicframework.com/docs/v2/components/

3. Decorators in Ionic 2

Decorators is main concept in Ionic 2. It contains configurations for a class such as template, providers, etc. Here is the general format of a class:

@Decorator({
    /*configurations*/
})
export class MyClass {
    /*functions*/
}

A decorator can be: @App, @Page, @Directive, @Component, @Pipe, @Injectable

@App: the root component where starts the other components in your app. It often is bound with a root page. Below is an example:
@App({
  template: `<ion-nav [root]="root"></ion-nav>`
  config: {
    backButtonText: 'Go Back',
    iconMode: 'ios',
    modalEnter: 'modal-slide-in',
    modalLeave: 'modal-slide-out',
    tabbarPlacement: 'bottom',
    pageTransition: 'ios',
  }
})

@Page: a page (view) component which is often specified by a template. Your app is a set of pages. Below is an example:
@Page({
    templateUrl: 'build/pages/mypage/mypage.html'  
})
export class MyPage {
}

@Directive: a custom directive which can be used in a Page or Component. Here is an example:
import {Directive} from 'angular2/core';
@Directive({
  selector: 'foo',
  template: './foo.html'
)}
export class FooDirective { }

And it is used in a Page:
import {FooDirective} from './foo'
@Page({
  templateUrl: '../page.html',
  directives: [FooDirective],
})

@Component: a built-in or custom component (module) has an interface and functionalities. Ionic 2 has many built-in Components, but you can make a custom component whatever you want as long as it fits your app. The following is a sample of a custom Component:
@Component({
  selector: 'custom-component',
  template: `
    <h1>My awesome custom component</h1>
    <ion-list>
      <ion-item>
        I am an awesome ionic component.
      </ion-item>
    </ion-list>
  `,
  directives: [IONIC_DIRECTIVES]
})
class MyComponent {
}

@Pipe: a data filter. Below is an example:
import {Pipe} from 'angular2/core'
@Pipe({
 name: 'myPipe'
})
export class MyPipeClass{
 transform(value, args) {
  return value;
 }
}

Use this pipe in HTML:
value | myPipe:args[0]:args[1]

@Injectable: a service which can be injected into another module. Here is a sample:

@Injectable()
export class DataService {
}

Use it in a page:
@Page({
  templateUrl: 'build/pages/my-page/my-page.html',
  providers: [DataService],
  directives: [MyCoolDirective, MyCoolerDirective],
  pipes: [MyPipe]
})

Hope you can start your journey with Ionic 2 after reading this article.

Happy coding!