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