Ionic是一個(gè)基于Angular2的開(kāi)發(fā)手機(jī)web app的框架唆铐，它包含了一整套手機(jī)端的樣式組件哲戚，和一系列的功能服務(wù)組件。樣式包括像按鈕或链、表單惫恼、列表、header等都有提供澳盐。服務(wù)組件的話祈纯，包括tab、slider叼耙、側(cè)邊欄腕窥、模態(tài)窗口等也有很多，基本上能滿足大部分手機(jī)web應(yīng)用的開(kāi)發(fā)需求筛婉。
需要說(shuō)明的是簇爆，Ionic的版本也跟隨Angular的版本，Ionic1是基于Angular1的爽撒，Ionic2是基于Angular2的入蛆。而Ionic提供了一個(gè)命令行的工具ionic-cli，他同時(shí)支持Ionic1和2的版本硕勿，只是通過(guò)選項(xiàng)來(lái)幫助創(chuàng)建不同版本項(xiàng)目腳手架哨毁。
同時(shí)，我們開(kāi)發(fā)手機(jī)web應(yīng)用的時(shí)候源武，經(jīng)常會(huì)結(jié)合Cordova來(lái)將它打包成手機(jī)應(yīng)用扼褪。對(duì)于這一點(diǎn)，ionic也提供了ionic-native來(lái)更方便的使用ng-cordova的插件粱栖。
總之话浇，ionic提供了一整套完整的手機(jī)app開(kāi)發(fā)的解決方案，從創(chuàng)建項(xiàng)目闹究、開(kāi)發(fā)幔崖、測(cè)試、打包、生成app甚至簽名和提交app store都提供了完整的工具岖瑰。（要使用它的云編譯功能叛买，需要上傳開(kāi)發(fā)者賬號(hào)的證書(shū)，國(guó)內(nèi)用戶一般為了安全都不會(huì)這么用蹋订。）在這個(gè)教程里面率挣，我們就來(lái)看看用如何用ionic來(lái)創(chuàng)建一個(gè)最簡(jiǎn)單的手機(jī)web應(yīng)用，我們還是實(shí)現(xiàn)一個(gè)Todolist的例子露戒，大家也可以結(jié)合著之前的教程Angular2入門(mén)教程-2 實(shí)現(xiàn)TodoList App 椒功，來(lái)看看ionic2和Angular2在使用上的區(qū)別。
在教程的第一部分智什，我們先介紹Ionic2动漾，包括安裝、創(chuàng)建項(xiàng)目荠锭，以及了解一下用Ionic2命令行工具創(chuàng)建的項(xiàng)目結(jié)構(gòu)和各個(gè)部分的代碼旱眯。
Ionic在github上的地址是 https://github.com/driftyco/ionic，網(wǎng)站http://ionicframework.com证九。官方網(wǎng)站上的文檔也比較全删豺，大部分組件都有示例代碼和效果展示。組件文檔可以查看：http://ionicframework.com/docs/components/#overview 愧怜，各個(gè)組件的api文檔可以查看：http://ionicframework.com/docs/api/呀页。

安裝Ionic命令行工具
首先我們需要安裝Ionic命令行工具，使用npm安裝：
npm install -g ionic

因?yàn)槲覀冞@個(gè)實(shí)例是只創(chuàng)建web應(yīng)用拥坛，不打包成手機(jī)app蓬蝶，如果你需要打包，或使用cordova插件猜惋，還需要安裝cordova
丸氛。安裝完成后，可以通過(guò)ionic help
來(lái)查看各個(gè)提供的功能著摔。ionic命令行工具除了提供創(chuàng)建項(xiàng)目雪位、打包web應(yīng)用（底層使用的是webpack來(lái)編譯、minify和打包代碼）等功能以外梨撞，它還封裝了cordova
的功能，所以它也可以用來(lái)添加cordova
的插件香罐、平臺(tái)卧波、打包手機(jī)app等。
我當(dāng)前的版本是2.2.1庇茫。如果你之前安裝過(guò)之前的版本港粱，請(qǐng)先更新。雖然2.x版本開(kāi)始就支持Angular2，但是查坪，新版本總是會(huì)修復(fù)一些bug寸宏，或者完善編譯、打包的一些功能和選項(xiàng)偿曙。

創(chuàng)建項(xiàng)目和運(yùn)行
接下來(lái)使用下面的命令創(chuàng)建一個(gè)應(yīng)用：
ionic start ionic2-todolist blank --v2 --no-cordova

其中ionic start
就是根據(jù)項(xiàng)目腳手架創(chuàng)建一個(gè)項(xiàng)目, ionic2-todolist
是我們的app的名字氮凝，blank
的腳手架的模板，我們使用blank來(lái)從頭創(chuàng)建一個(gè)應(yīng)用望忆。ionic2提供了幾個(gè)模板罩阵，有sidemenu
, tabs
， blank
, complex-list
等启摄，可以通過(guò)ionic start -l
查看可用的模板稿壁。當(dāng)然你也可以在github上找其他開(kāi)發(fā)者提供的模板或腳手架，可以直接下載下來(lái)來(lái)使用歉备。--v2
指的是我們要?jiǎng)?chuàng)建ionic2的版本傅是。--no-cordova
是說(shuō)不使用cordova，因?yàn)檫@個(gè)例子里我們不打包手機(jī)app蕾羊。創(chuàng)建創(chuàng)建完以后喧笔，它會(huì)自動(dòng)調(diào)用npm install
安裝依賴包，根據(jù)你的網(wǎng)絡(luò)情況肚豺，可能很慢甚至有些無(wú)法下載溃斋，請(qǐng)自行想辦法解決。
然后吸申，進(jìn)入新建的目錄梗劫，運(yùn)行：
ionic serve

它會(huì)編譯ts文件，打包截碴、使用監(jiān)聽(tīng)方式啟動(dòng)測(cè)試服務(wù)器運(yùn)行梳侨，如果修改了文件，會(huì)自動(dòng)編譯然后刷新頁(yè)面日丹。
項(xiàng)目結(jié)構(gòu)
ionic是基于Angular2的走哺，所以它的項(xiàng)目結(jié)構(gòu)跟Angular2類似，目錄結(jié)構(gòu)如下：
├── ionic.config.json #ionic的配置文件├── package.json├── resources # 打包app使用的icon圖標(biāo)和加載頁(yè)圖片│ ├── android # 生成的android平臺(tái)的各個(gè)尺寸的圖標(biāo)和加載頁(yè)圖片│ ├── icon.png # 應(yīng)用圖標(biāo)│ ├── ios # 生成的ios平臺(tái)的各個(gè)尺寸的圖標(biāo)和加載頁(yè)圖片│ └── splash.png # 加載頁(yè)圖片├── src # 頁(yè)面源文件│ ├── app│ ├── assets│ ├── declarations.d.ts│ ├── index.html│ ├── manifest.json│ ├── pages│ ├── service-worker.js│ └── theme├── tsconfig.json├── tslint.json└── www # 編譯后的文件夾, Cordova默認(rèn)用www路徑并打開(kāi)里面的index.html ├── manifest.json └── service-worker.js

在上面的目錄結(jié)構(gòu)中哲虾，對(duì)于部分ionic用到的文件丙躏，在它的文件后面作了簡(jiǎn)要的說(shuō)明，下一節(jié)再詳細(xì)說(shuō)明每個(gè)部分的用途的配置方式束凑。
項(xiàng)目環(huán)境相關(guān)文件說(shuō)明
首先晒旅，package.json
就不用說(shuō)了，每個(gè)基于node平臺(tái)的項(xiàng)目都有一個(gè)這樣的文件汪诉，里面定義了項(xiàng)目的基本信息废恋，還有開(kāi)發(fā)和運(yùn)行需要用到的庫(kù)谈秫。
ionic.config.json
這個(gè)ionic項(xiàng)目的基本配置文件，不管你是創(chuàng)建一個(gè)單純的web應(yīng)用鱼鼓，還是想要封裝成cordova的混合app拟烫，都會(huì)有一個(gè)這樣的文件。里面的內(nèi)容也很簡(jiǎn)單迄本，我們最常用到的可能就是代理設(shè)置：
{ "name": "TodoList系統(tǒng)", "app_id": "", "v2": true, "typescript": true, "proxies": [ { "path": "/api", "proxyUrl": "http://service.mydomain.com/api" } ]}

設(shè)置了proxies
以后硕淑，我們的服務(wù)端就不需要考慮跨域訪問(wèn)的問(wèn)題。當(dāng)然岸梨，如果你的服務(wù)器端不允許跨域訪問(wèn)喜颁，在你部署你的應(yīng)用的時(shí)候，也需要相應(yīng)的配置曹阔，例如在nginx中設(shè)置反向代理半开。
config.xml
如果你在創(chuàng)建項(xiàng)目的時(shí)候，沒(méi)有使用--no-cordova
赃份，也就是說(shuō)寂拆，你的項(xiàng)目啟用了cordova，并且打算封裝成混合手機(jī)app抓韩，那就會(huì)有這個(gè)文件纠永。這個(gè)文件的內(nèi)容大致如下：
... <name>TodoList系統(tǒng)</name> <description>hunt tickets on-site management system.</description> <author email="mavlarn@test.com" >mavlarn@獵票</author> <content src="index.html"/> <access origin=""/> <allow-navigation href="http://ionic.local/"/> <allow-intent href="http:///"/> <platform name="ios"> <allow-intent href="itms:"/> <allow-intent href="itms-apps:"/> </platform> <preference name="webviewbounce" value="false"/> ...... <preference name="SplashShowOnlyFirstTime" value="false"/> <plugin name="ionic-plugin-keyboard" spec="~2.2.1"/> <plugin name="cordova-plugin-splashscreen" spec="~4.0.1"/></widget>

其中，name
就是你的app將來(lái)打包成app的時(shí)候的應(yīng)用的顯示名谒拴。plugin是使用的cordovas插件尝江。里面還有一些其他配置，請(qǐng)參考cordova的文檔英上。
tslint.json炭序、tsconfig.json
這是用tslint做代碼檢查的配置。
resources
里面有2個(gè)文件苍日，icon.png和splash.png惭聂，分別的打包的應(yīng)用的顯示名稱和加載頁(yè)的圖片。你只要加了這兩個(gè)文件相恃，運(yùn)行ionic resources
就可以生成各個(gè)尺寸的圖標(biāo)文件和圖片辜纲。它會(huì)根據(jù)你設(shè)置的平臺(tái)，生成各個(gè)平臺(tái)的圖標(biāo)和文件的各個(gè)尺寸的文件拦耐。
plugins
這里面存在的你添加的cordova插件耕腾。
platforms
里面存放平臺(tái)相關(guān)的文件，每次編譯app的時(shí)候杀糯，就會(huì)根據(jù)添加的平臺(tái)幽邓，在這里面生成編譯文件和打包的文件。
hooks
這里面存放的是hook文件火脉，也就是鉤子。我們可以編寫(xiě)腳本，來(lái)定義在每次執(zhí)行某些任務(wù)的時(shí)候被調(diào)用的任務(wù)倦挂。也可以定義某個(gè)插件相關(guān)的腳本畸颅。例如，如果你加了某一個(gè)微信的插件方援，這個(gè)插件可能有一個(gè)鉤子没炒，幫助你在每次添加完這個(gè)插件的時(shí)候，運(yùn)行一些任務(wù)犯戏，來(lái)進(jìn)行一些項(xiàng)目的配置送火，例如微信的appId等。
如果你只是想開(kāi)發(fā)一個(gè)web應(yīng)用先匪，上面這些基本都不會(huì)管种吸，有些文件甚至都不會(huì)生成。而我們開(kāi)發(fā)具體的業(yè)務(wù)需要的呀非，就是src下面的文件坚俗。
業(yè)務(wù)相關(guān)文件說(shuō)明
index.html
src下面有幾個(gè)文件，index.html當(dāng)然就是打開(kāi)的首頁(yè)了岸裙。這個(gè)首頁(yè)里面的內(nèi)容(main.js, polyfills.js等)會(huì)在編譯后生成猖败。
menifest.json
這個(gè)文件是在index.html使用，用來(lái)設(shè)置網(wǎng)頁(yè)的很多屬性降允，包括網(wǎng)站的圖標(biāo)(favicon.ico)恩闻，搜索引擎的參數(shù)，應(yīng)用名等剧董〈鄙校可以參考：https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json。
theme/variables.scss
ionic有設(shè)計(jì)良好的手機(jī)端的組件送滞，也提供了幾個(gè)默認(rèn)顏色侠草，我們可以通過(guò)修改這個(gè)文件，修改幾個(gè)默認(rèn)顏色犁嗅，也可以設(shè)置很多組件的顏色等屬性边涕。
assets
這里面就是存放應(yīng)用中用到的各種圖片等資源文件。
app
這里面有幾個(gè)文件：
main.tsapp.module.tsapp.component.tsapp.htmlapp.scss

這幾個(gè)文件褂微，從名字就能看出來(lái)功蜓，跟Angular2項(xiàng)目中的幾個(gè)入口文件類似。其中main.ts就是入口文件宠蚂，它用下面的方式初始化我們的app模塊：
platformBrowserDynamic().bootstrapModule(AppModule);

app.module.ts里面就是定義的app模塊式撼，app.component.ts定義的就是應(yīng)用的根組件，這里跟Angular2不一樣的地方是求厕，需要用ionic的方式來(lái)加載根組件：
declarations: [ MyApp, HomePage ], imports: [ IonicModule.forRoot(MyApp) ], bootstrap: [IonicApp], entryComponents: [ MyApp, HomePage ],

在引入根組件的時(shí)候著隆，需要用IonicModule.forRoot(MyApp)
來(lái)引入扰楼，在bootstrap
里面就不是直接初始化MyApp
，而是IonicApp
美浦。同時(shí)弦赖，對(duì)于Ionic2里面的所有的組件（簡(jiǎn)單來(lái)說(shuō)就是需要顯示在頁(yè)面上的組件），需要加入到entryComponents
的列表里浦辨。
除了上面說(shuō)的以為蹬竖，其他的配置，像declarations
流酬，providers
币厕，配置方式跟運(yùn)行機(jī)制跟Angular2是一樣的蔬咬。
ionicons
Ionic還提供了一套設(shè)計(jì)非常好的圖標(biāo)庫(kù)端礼，ionicons帽撑。地址是 http://ionicframework.com/docs/ionicons/ 兄春。Ionic的很多組件也都用到了一些圖標(biāo)爹凹，例如后退佩伤、關(guān)閉等圖標(biāo)弯屈。這些圖標(biāo)是在ionic的css里面以字體的方式加載的匀们，所以惭载，你應(yīng)該在項(xiàng)目中盡量使用這些圖標(biāo)旱函。
@ionic/app-scripts
最后需要說(shuō)明的就是ionic-app-scripts，它在package.json文件中作為devDependencies加入描滔，里面有很多幫助我們編譯棒妨、運(yùn)行項(xiàng)目的腳本。除了創(chuàng)建是項(xiàng)目里面自帶的build, clean含长，還有很多其他的腳本可以允許券腔。例如下面的內(nèi)容：
"scripts": { "clean": "ionic-app-scripts clean", "build": "ionic-app-scripts build", "min": "ionic-app-scripts minify", "ionic:build": "ionic-app-scripts build", "ionic:serve": "ionic-app-scripts serve" },

當(dāng)我們運(yùn)行ionic serve
時(shí)，實(shí)際上就是運(yùn)行的是npm run ionic:serve
拘泞，也就是對(duì)應(yīng)的ionic-app-scripts serve
這個(gè)命令纷纫。當(dāng)我運(yùn)行npm run min
時(shí)，運(yùn)行的是ionic-app-scripts minify
陪腌。一般情況下辱魁，你運(yùn)行build
就會(huì)執(zhí)行項(xiàng)目的編譯（將TypeScript文件編譯成js），然后把所有的js文件打包成main.js
诗鸭，以及把所有的css合并成一個(gè)main.css
染簇。但是，這樣生成的文件比較大强岸，也沒(méi)有做代碼混淆锻弓，你可以在運(yùn)行build
以后，再運(yùn)行min
,來(lái)進(jìn)行代碼的壓縮蝌箍、混淆等青灼。運(yùn)行完minify以后暴心，main.js文件可以從原先的6.5M左右，減少到不到1.6M杂拨。在進(jìn)行g(shù)zip壓縮的話酷勺，基本上下載所有的文件是550K左右。已經(jīng)基本可以滿足手機(jī)端下載文件大小的需要扳躬。
完整的文檔可以查看GitHub的地址
熟悉Angular2的架構(gòu)的可能知道Angular2的編譯可以使用Tree Shaking技術(shù)進(jìn)一步減少文件的大小，ionic-app-scripts也提供了rollup
的參數(shù)來(lái)實(shí)現(xiàn)Tree Shaking甚亭，具體方法請(qǐng)參考官方文檔贷币。

有關(guān)項(xiàng)目的結(jié)構(gòu)和配置，差不多就是這些亏狰，雖然說(shuō)役纹，即使你不知道這些是干嘛的，也能直接開(kāi)始著手開(kāi)發(fā)應(yīng)用暇唾。但是促脉，那就像閉著眼睛跑步，隨便一個(gè)小坑就能讓你跌倒策州。何況瘸味，很多人所謂的坑，實(shí)際上也只是他自己不會(huì)用或者用得不對(duì)够挂。所以旁仿，開(kāi)始Angular和Ionic的應(yīng)用，還是需要對(duì)node, npm, webpack等有一定的了解孽糖，然后對(duì)項(xiàng)目中的各種配置有一些了解枯冈，才能在之后的開(kāi)發(fā)中比較順利的進(jìn)行。