鏈接：
ionic3 教程（一）安裝和配置
ionic3 教程（二）登錄頁(yè)制作
ionic3 教程（三）設(shè)置頁(yè)制作
ionic3 教程（四）安卓硬件返回鍵處理
ionic3 教程（五）基本的網(wǎng)絡(luò)請(qǐng)求
學(xué)習(xí)本教程前你需要了解以下內(nèi)容：
- 前端基本知識(shí)（HTML5辜窑、JavaScript、CSS）
- TypeScript
- Angular
TypeScript的話至少需要了解基本語(yǔ)法都哭，可以看看
TS 中文官方文檔
對(duì) Angular 不太熟悉的可以點(diǎn)這里：
Angular 4.0 架構(gòu)詳解
Angular 4.0 內(nèi)置指令全攻略
什么是 ionic田弥？他和 Cordova、Angular2 有什么聯(lián)系陌兑？
ionic = Cordova + Angular + ionic CSS
Cordova 提供了使用 JavaScript 調(diào)用 Native 功能沈跨，ionic CSS 是一套 UI 框架，ionic 對(duì) Angular 進(jìn)行了封裝兔综。
ionic3
ionic 基于 AngularJS 開發(fā)饿凛。由于 AngularJS1.x 版本在性能上已經(jīng)很難有較大提升，Google 推出了全新設(shè)計(jì)的 Angular 2软驰，ionic 也對(duì)應(yīng)著出了2涧窒。
ionic2 與一代相比有較大的變化，基于最新的 Angular 2 锭亏，使用 TypeScript 進(jìn)行開發(fā)纠吴，如果您沒(méi)有接觸過(guò) AngularJS 或 Ionic1.x，完全不用擔(dān)心慧瘤，直接從 ionic2 開始學(xué)習(xí)即可戴已。
ionic3 是 Angular4.0 推出之后的跟進(jìn)版本，變化幅度不大锅减。
安裝和運(yùn)行
如果沒(méi)有安裝過(guò) Node.js糖儡，先去官網(wǎng)下載一下。
// 安裝（失敗的話 Mac 嘗試使用 sudo怔匣，Windows 嘗試管理員身份運(yùn)行 cmd）
$ npm install -g cordova ionic
// 安裝后可以驗(yàn)證一下 ionic cli 版本
$ ionic -version
3.5.0
// 創(chuàng)建應(yīng)用
// cd 到要?jiǎng)?chuàng)建項(xiàng)目的目錄握联，輸入以下內(nèi)容創(chuàng)建ionic項(xiàng)目
// ionic3Demo 是項(xiàng)目名，tabs是模板（默認(rèn)是tabs，其他還有blank的單頁(yè)等）
$ ionic start ionic3Demo tabs
// 安裝依賴
// 會(huì)生成一個(gè) node_modules 文件夾拴疤，并在里面安裝 package.json 上寫下的文件
$ cd ionic3Demo/
$ npm install
// 在瀏覽器中運(yùn)行項(xiàng)目
$ ionic serve
有的朋友可能對(duì) cli 不太熟悉永部，簡(jiǎn)單說(shuō)兩句。
-g 代表全局安裝呐矾、install 可以簡(jiǎn)寫為 i苔埋、-version 可以簡(jiǎn)寫為 -v
剩下的還有 --save、--dev 等蜒犯，想要了解更多可以參考官方文檔
http://ionicframework.com/docs/cli/
如圖：
在web上運(yùn)行 iOS组橄、Android、WindowsPhone 項(xiàng)目
把瀏覽器中的地址改為：
http://localhost:8100/ionic-lab
不喜歡使用命令行的朋友罚随，可以試一試 ionic lab玉工，他是桌面版的開發(fā)環(huán)境。不過(guò)我沒(méi)有嘗試過(guò)淘菩，感興趣的可以下載看看遵班。
下載地址：http://lab.ionic.io
// 如果需要在手機(jī)運(yùn)行，則執(zhí)行以下命令
// 添加iOS項(xiàng)目
$ ionic platform add ios
// 把src里的內(nèi)容同步到ios項(xiàng)目中(src后面會(huì)講到)
$ ionic cordova build ios
// 運(yùn)行iOS項(xiàng)目,相當(dāng)于在Xcode里面按Command+R
$ ionic cordova emulate ios
//安卓的話同理潮改，把ios替換為android即可
$ ionic platform add android
$ ionic cordova build android
$ ionic cordova emulate android
成功后目錄結(jié)構(gòu)如下狭郑，platform 里面是你添加的 iOS 和 Android 項(xiàng)目。
src 就是以后開發(fā)寫代碼主要的地方汇在。每次寫完要同步到手機(jī)項(xiàng)目中翰萨，需要使用
$ ionic cordova build ios
$ ionic platform add android
同步到 iOS 和 Android 平臺(tái)里。
Tabs 分析
打開 app.component.ts 可以看到這句代碼
rootPage:any = TabsPage;
這個(gè)相當(dāng)于 iOS 的 rootViewController 和 Android 的 MainActivity糕殉。
回憶一下我們一開始選擇的 Tabs 模板亩鬼，所以這里生成的是 tabs。打開 src/pages/tabs/tabs.ts阿蝶，可以看到這些代碼：
import { Component } from '@angular/core';
import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { HomePage } from '../home/home';
@Component({
templateUrl: 'tabs.html'
})
export class TabsPage {
tab1Root = HomePage;
tab2Root = AboutPage;
tab3Root = ContactPage;
constructor() {
}
}
這個(gè) TabsPage雳锋，就代表了應(yīng)用最下面的三個(gè) TabBar。上面分別指出了他們的路徑羡洁。
Ionic 3 的導(dǎo)航和 iOS 一樣是一個(gè)棧玷过，push 到新界面，pop 回舊界面焚廊。我們?cè)跇?gòu)造函數(shù)中設(shè)置了 this.navCtrl 屬性，我們可以調(diào)用 this.navCtrl.push() 方法习劫，來(lái)導(dǎo)航到一個(gè)新的頁(yè)面咆瘟。
好了，這一節(jié)內(nèi)容就到這里诽里。
補(bǔ)充
最近有很多朋友私信問(wèn)我袒餐，如何升級(jí) ionic 版本和 ionic cli 版本，也搞不清楚這兩個(gè)東西的區(qū)別和聯(lián)系，這里統(tǒng)一進(jìn)行解釋灸眼。
ionic 版本是 package.json 中的 ionic-angular卧檐。
// 升級(jí)方法：
// 修改 ionic-angular 的版本號(hào)，并在項(xiàng)目目錄下執(zhí)行以下命令
npm install
ionic cli 版本是一套 ionic 的命令行界面焰宣，用于執(zhí)行各種命令行的命令霉囚。
// 升級(jí)方法：
// 在任意目錄下，執(zhí)行以下命令
npm install -g ionic@lastest
