下面部分内容是参考孙亖的使用Ionic2开发Todo应用，最好先动手实现一下他的代码，或者看一次。
0 创建新的Ionic2项目
在命令行下运行
/*blank的意思是空白项目，如果没有blank就是默认生成Tab模板的项目*/
/*--v2的意思是生成ionic2版本的项目，如果没有--v2就是生成ionic1版本的项目，会有很大的差别！！！*/
ionic start myApp blank --v2
一旦代码生成,在文本编辑器打开项目。可以看到Ionic 2项目的基本结构， 这些是由Ionic CLI生成的代码。
基本上,我们的应用程序中的所有组件(我们的应用程序将由不同的组件组成)将在** src ** 文件夹中(包括app文件夹中的根组件和在pages文件夹中我们所有的页面组件)。一个组件将包括一个模板（.html文件)，类定义(.ts文件)，或者一些样式(.scss文件)。
先从自动生成的**src/app/app.component.ts文件开始来看一下：
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）。相比其他组件该组件是特殊的,因为它是第一个组件被加载到应用程序。基本上,我们的应用程序结构就像一棵树，根组件就是树的根。
因此,重要的是我们的根组件（root component）知道在哪里可以找到我们的HomePage主页,因为需要将它设置为root page根页面。注意,我们导入(importing)HomePage** 在这个文件主页的顶部,然后在下面的代码中设置它作为根页面**
rootPage = HomePage;
我们可以在构造函数上面声明变量，像上面这样的使其成员变量 member variables,这意味着他们可以通过引用this.myVal在整个类中被被访问。
1 添加一个页面
在命令行行下运行（进入项目路径，例如项目名称是cute）
cd cute
ionic g page ItemDeetail
就会在…/src/pages下生成item-deetail文件夹，里面包含了三个主要文件。
任何时候当我们创建一个新页面，我们需要确保该页面被导入（imported）到我们的 app.module.ts，然后在entryComponents和declarations数组中被声明。
按如下修改…/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 页面之间的跳转
这里就只是讲解几个关键的Ionic2 API的关键意思，详细的跳转实例先看孙亖的使用Ionic2开发Todo应用
顺便贴上ionic2 开发文档
1、NavController
NavController是导航控制器组件如导航和Tab的基类。您使用导航控制器导航到应用程序中的页。（百度翻译的_）
简单的来说就是从当前页面跳到下一个页面。
个人理解，下一个跳转的时候如果有导航<ion-navbar>，就会自动生成一个箭头用于返回上一个页面。
例如：
页面代码.jpg
APP页面.jpg
如果没有导航<ion-navbar>，就没有返回箭头
例如：
页面代码.jpg
APP页面.jpg
这里只是贴出关键代码
//导入
import { NavController, ModalController } from 'ionic-angular';
//在构造器的参数中声明一下
constructor(public navCtrl: NavController, public modalCtrl: ModalController) { }
...
//自定义一个方法，方法的内容是从当前页面调到ItemDeetailPage页面
//push(page, params, opts)，第二和第三个参数是可以空的
//这里第二个参数代表传item到下一个页面
viewItem(item){
this.navCtrl.push(ItemDeetailPage,{
item:item
});
}
2、NavParams
用于接收上一个NavController传递的信息
这里只是贴出关键代码
import { NavController, NavParams } from 'ionic-angular';
constructor(public navCtrl: NavController, public navParams: NavParams) {}
//ionic2的生命周期，当页面加载时，此事件只发生在每一页创建的一次。
ionViewDidLoad() {
console.log('ionViewDidLoad ItemDeetailPage');
//这里的item就是刚跳转的时候传的
this.title = this.navParams.get('item').title;
this.description = this.navParams.get('item').description;
}
3、ModalController
跨越用户当前页面，通常用于选择或编辑项目。
简单的来说也是页面的跳转。可以监听页面的返回。
这里只是贴出关键代码
import { NavController, ModalController } from 'ionic-angular';
constructor(public navCtrl: NavController, public modalCtrl: ModalController) { }
//自定义的方法
addItem(){
//其实只有let addModal = this.modalCtrl.create(AddItemPagePage);和addModal.present();的时候就可以实现页面的跳转了。
//onDidDismiss监听AddItemPagePage页面的关闭
let addModal = this.modalCtrl.create(AddItemPagePage);
addModal.onDidDismiss((item)=>{
//下面介绍Viewcontroller的时候回返回一个item的数据
if(item){
this.saveItem(item);
}
});
addModal.present();
}
4、ViewController
当前视图的各种功能和信息。
这里只介绍一个方法，dismiss(data, role , NavOptions)，参数都是可选的。
dismiss() 关闭当前视图。
dismiss(data) 关闭当前视图的时候返回数据。
这里只是贴出关键代码
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教程
好好学习，天天向上。<(￣oo,￣)/
Potato_zero.jpg
