下面部分內(nèi)容是參考孫亖的使用Ionic2開(kāi)發(fā)Todo應(yīng)用楔敌，最好先動(dòng)手實(shí)現(xiàn)一下他的代碼，或者看一次驻谆。
0 創(chuàng)建新的Ionic2項(xiàng)目
在命令行下運(yùn)行
/*blank的意思是空白項(xiàng)目卵凑，如果沒(méi)有blank就是默認(rèn)生成Tab模板的項(xiàng)目*/
/*--v2的意思是生成ionic2版本的項(xiàng)目，如果沒(méi)有--v2就是生成ionic1版本的項(xiàng)目胜臊，會(huì)有很大的差別７彰铡！区端！*/
ionic start myApp blank --v2
一旦代碼生成,在文本編輯器打開(kāi)項(xiàng)目“母梗可以看到Ionic 2項(xiàng)目的基本結(jié)構(gòu)织盼， 這些是由Ionic CLI生成的代碼杨何。
基本上,我們的應(yīng)用程序中的所有組件(我們的應(yīng)用程序?qū)⒂刹煌慕M件組成)將在** src ** 文件夾中(包括app文件夾中的根組件和在pages文件夾中我們所有的頁(yè)面組件)。一個(gè)組件將包括一個(gè)模板（.html文件)沥邻，類(lèi)定義(.ts文件)危虱，或者一些樣式(.scss文件)。
先從自動(dòng)生成的**src/app/app.component.ts文件開(kāi)始來(lái)看一下：
import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';
import { HomePage } from '../pages/home/home';
@Component({
templateUrl: 'app.html'
})
export class MyApp {
rootPage = HomePage;
constructor(platform: Platform) {
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();
Splashscreen.hide();
});
}
}
app.component.ts文件中定義了根組件（root component）唐全。相比其他組件該組件是特殊的,因?yàn)樗堑谝粋€(gè)組件被加載到應(yīng)用程序埃跷。基本上,我們的應(yīng)用程序結(jié)構(gòu)就像一棵樹(shù)邮利，根組件就是樹(shù)的根弥雹。
因此,重要的是我們的根組件（root component）知道在哪里可以找到我們的HomePage主頁(yè),因?yàn)樾枰獙⑺O(shè)置為root page根頁(yè)面。注意,我們導(dǎo)入(importing)HomePage** 在這個(gè)文件主頁(yè)的頂部,然后在下面的代碼中設(shè)置它作為根頁(yè)面**
rootPage = HomePage;
我們可以在構(gòu)造函數(shù)上面聲明變量延届，像上面這樣的使其成員變量 member variables,這意味著他們可以通過(guò)引用this.myVal在整個(gè)類(lèi)中被被訪問(wèn)剪勿。
1 添加一個(gè)頁(yè)面
在命令行行下運(yùn)行（進(jìn)入項(xiàng)目路徑，例如項(xiàng)目名稱(chēng)是cute）
cd cute
ionic g page ItemDeetail
就會(huì)在.../src/pages下生成item-deetail文件夾方庭，里面包含了三個(gè)主要文件厕吉。
任何時(shí)候當(dāng)我們創(chuàng)建一個(gè)新頁(yè)面，我們需要確保該頁(yè)面被導(dǎo)入（imported）到我們的 app.module.ts械念，然后在entryComponents和declarations數(shù)組中被聲明头朱。
按如下修改.../src/app/app.module.ts
import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { ItemDeetailPage} from '../pages/item-deetail/item-deetail';
@NgModule({
declarations: [
MyApp,
HomePage,
ItemDeetailPage
],
imports: [
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
ItemDeetailPage
],
providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}
2 頁(yè)面之間的跳轉(zhuǎn)
這里就只是講解幾個(gè)關(guān)鍵的Ionic2 API的關(guān)鍵意思，詳細(xì)的跳轉(zhuǎn)實(shí)例先看孫亖的使用Ionic2開(kāi)發(fā)Todo應(yīng)用
順便貼上ionic2 開(kāi)發(fā)文檔
1龄减、NavController
NavController是導(dǎo)航控制器組件如導(dǎo)航和Tab的基類(lèi)项钮。您使用導(dǎo)航控制器導(dǎo)航到應(yīng)用程序中的頁(yè)。（百度翻譯的_）
簡(jiǎn)單的來(lái)說(shuō)就是從當(dāng)前頁(yè)面跳到下一個(gè)頁(yè)面欺殿。
個(gè)人理解寄纵，下一個(gè)跳轉(zhuǎn)的時(shí)候如果有導(dǎo)航<ion-navbar>，就會(huì)自動(dòng)生成一個(gè)箭頭用于返回上一個(gè)頁(yè)面脖苏。
例如：
如果沒(méi)有導(dǎo)航<ion-navbar>程拭，就沒(méi)有返回箭頭
例如：
這里只是貼出關(guān)鍵代碼
//導(dǎo)入
import { NavController, ModalController } from 'ionic-angular';
//在構(gòu)造器的參數(shù)中聲明一下
constructor(public navCtrl: NavController, public modalCtrl: ModalController) { }
...
//自定義一個(gè)方法，方法的內(nèi)容是從當(dāng)前頁(yè)面調(diào)到ItemDeetailPage頁(yè)面
//push(page, params, opts)棍潘，第二和第三個(gè)參數(shù)是可以空的
//這里第二個(gè)參數(shù)代表傳item到下一個(gè)頁(yè)面
viewItem(item){
this.navCtrl.push(ItemDeetailPage,{
item:item
});
}
2恃鞋、NavParams
用于接收上一個(gè)NavController傳遞的信息
這里只是貼出關(guān)鍵代碼
import { NavController, NavParams } from 'ionic-angular';
constructor(public navCtrl: NavController, public navParams: NavParams) {}
//ionic2的生命周期，當(dāng)頁(yè)面加載時(shí)亦歉，此事件只發(fā)生在每一頁(yè)創(chuàng)建的一次恤浪。
ionViewDidLoad() {
console.log('ionViewDidLoad ItemDeetailPage');
//這里的item就是剛跳轉(zhuǎn)的時(shí)候傳的
this.title = this.navParams.get('item').title;
this.description = this.navParams.get('item').description;
}
3、ModalController
跨越用戶(hù)當(dāng)前頁(yè)面肴楷，通常用于選擇或編輯項(xiàng)目水由。
簡(jiǎn)單的來(lái)說(shuō)也是頁(yè)面的跳轉(zhuǎn)。可以監(jiān)聽(tīng)頁(yè)面的返回赛蔫。
這里只是貼出關(guān)鍵代碼
import { NavController, ModalController } from 'ionic-angular';
constructor(public navCtrl: NavController, public modalCtrl: ModalController) { }
//自定義的方法
addItem(){
//其實(shí)只有l(wèi)et addModal = this.modalCtrl.create(AddItemPagePage);和addModal.present();的時(shí)候就可以實(shí)現(xiàn)頁(yè)面的跳轉(zhuǎn)了砂客。
//onDidDismiss監(jiān)聽(tīng)AddItemPagePage頁(yè)面的關(guān)閉
let addModal = this.modalCtrl.create(AddItemPagePage);
addModal.onDidDismiss((item)=>{
//下面介紹Viewcontroller的時(shí)候回返回一個(gè)item的數(shù)據(jù)
if(item){
this.saveItem(item);
}
});
addModal.present();
}
4泥张、ViewController
當(dāng)前視圖的各種功能和信息。
這里只介紹一個(gè)方法鞠值，dismiss(data, role , NavOptions)媚创，參數(shù)都是可選的。
dismiss() 關(guān)閉當(dāng)前視圖彤恶。
dismiss(data) 關(guān)閉當(dāng)前視圖的時(shí)候返回?cái)?shù)據(jù)钞钙。
這里只是貼出關(guān)鍵代碼
import { NavController, ViewController } from 'ionic-angular';
constructor(public navCtrl: NavController, public view: ViewController) {}
//自定義的方法
saveItem(){
let newItem = {
title: this.title,
description: this.description
};
this.view.dismiss(newItem);
}
3、SQLite的使用
不要看百度的上的教程声离，直接看ionic2 官方文檔 sqlite教程
好好學(xué)習(xí)芒炼，天天向上。<(￣oo,￣)/
