Ionic是一個基於Angular2的開發手機web app的框架，它包含了一整套手機端的樣式元件，和一系列的功能服務元件。樣式包括像按鈕、表單、列表、header等都有提供。服務元件的話，包括tab、slider、側邊欄、模態視窗等也有很多，基本上能滿足大部分手機web應用的開發需求。
需要說明的是，Ionic的版本也跟隨Angular的版本，Ionic1是基於Angular1的，Ionic2是基於Angular2的。而Ionic提供了一個命令列的工具ionic-cli，他同時支援Ionic1和2的版本，只是通過選項來幫助建立不同版本專案腳手架。
同時，我們開發手機web應用的時候，經常會結合Cordova來將它打包成手機應用。對於這一點，ionic也提供了ionic-native來更方便的使用ng-cordova的外掛。
總之，ionic提供了一整套完整的手機app開發的解決方案，從建立專案、開發、測試、打包、生成app甚至簽名和提交app store都提供了完整的工具。（要使用它的雲編譯功能，需要上傳開發者賬號的證照，國內使用者一般為了安全都不會這麼用。）在這個教程裡面，我們就來看看用如何用ionic來建立一個最簡單的手機web應用，我們還是實現一個Todolist的例子，大家也可以結合著之前的教程Angular2入門教程-2 實現TodoList App ，來看看ionic2和Angular2在使用上的區別。
在教程的第一部分，我們先介紹Ionic2，包括安裝、建立專案，以及瞭解一下用Ionic2命令列工具建立的專案結構和各個部分的程式碼。
Ionic在github上的地址是 github.com/driftyco/io… ionicframework.com。官方網站上的文件也比較全，大部分元件都有示例程式碼和效果展示。元件文件可以檢視：http://ionicframe… ，各個元件的api文件可以檢視：ionicframework.com/docs/api/。
安裝Ionic命令列工具
首先我們需要安裝Ionic命令列工具，使用npm安裝：
npm install -g ionic複製程式碼因為我們這個例項是隻建立web應用，不打包成手機app，如果你需要打包，或使用cordova外掛，還需要安裝cordova。
安裝完成後，可以通過ionic help來檢視各個提供的功能。ionic命令列工具除了提供建立專案、打包web應用（底層使用的是webpack來編譯、minify和打包程式碼）等功能以外，它還封裝了cordova的功能，所以它也可以用來新增cordova的外掛、平臺、打包手機app等。
我當前的版本是2.2.1。如果你之前安裝過之前的版本，請先更新。雖然2.x版本開始就支援Angular2，但是，新版本總是會修復一些bug，或者完善編譯、打包的一些功能和選項。
建立專案和執行
接下來使用下面的命令建立一個應用：
ionic start ionic2-todolist blank --v2 --no-cordova複製程式碼其中ionic start就是根據專案腳手架建立一個專案, ionic2-todolist是我們的app的名字，blank的腳手架的模板，我們使用blank來從頭建立一個應用。ionic2提供了幾個模板，有sidemenu, tabs， blank, complex-list等，可以通過ionic start -l檢視可用的模板。當然你也可以在github上找其他開發者提供的模板或腳手架，可以直接下載下來來使用。--v2指的是我們要建立ionic2的版本。--no-cordova是說不使用cordova，因為這個例子裡我們不打包手機app。
建立建立完以後，它會自動呼叫npm install安裝依賴包，根據你的網路情況，可能很慢甚至有些無法下載，請自行想辦法解決。
然後，進入新建的目錄，執行：
ionic serve複製程式碼它會編譯ts檔案，打包、使用監聽方式啟動測試伺服器執行，如果修改了檔案，會自動編譯然後重新整理頁面。
專案結構
ionic是基於Angular2的，所以它的專案結構跟Angular2類似，目錄結構如下：
├── ionic.config.json #ionic的配置檔案
├── package.json
├── resources # 打包app使用的icon圖示和載入頁圖片
│ ├── android # 生成的android平臺的各個尺寸的圖示和載入頁圖片
│ ├── icon.png # 應用圖示
│ ├── ios # 生成的ios平臺的各個尺寸的圖示和載入頁圖片
│ └── splash.png # 載入頁圖片
├── src # 頁面原始檔
│ ├── app
│ ├── assets
│ ├── declarations.d.ts
│ ├── index.html
│ ├── manifest.json
│ ├── pages
│ ├── service-worker.js
│ └── theme
├── tsconfig.json
├── tslint.json
└── www # 編譯後的資料夾, Cordova預設用www路徑並開啟裡面的index.html
├── manifest.json
└── service-worker.js複製程式碼在上面的目錄結構中，對於部分ionic用到的檔案，在它的檔案後面作了簡要的說明，下一節再詳細說明每個部分的用途的配置方式。
專案環境相關檔案說明
首先，package.json就不用說了，每個基於node平臺的專案都有一個這樣的檔案，裡面定義了專案的基本資訊，還有開發和執行需要用到的庫。
ionic.config.json
這個ionic專案的基本配置檔案，不管你是建立一個單純的web應用，還是想要封裝成cordova的混合app，都會有一個這樣的檔案。裡面的內容也很簡單，我們最常用到的可能就是代理設定：
{
"name": "TodoList系統",
"app_id": "",
"v2": true,
"typescript": true,
"proxies": [
{
"path": "/api",
"proxyUrl": "http://service.mydomain.com/api"
}
]
}複製程式碼設定了proxies以後，我們的服務端就不需要考慮跨域訪問的問題。當然，如果你的伺服器端不允許跨域訪問，在你部署你的應用的時候，也需要相應的配置，例如在nginx中設定反向代理。
config.xml
如果你在建立專案的時候，沒有使用--no-cordova，也就是說，你的專案啟用了cordova，並且打算封裝成混合手機app，那就會有這個檔案。這個檔案的內容大致如下：
...
<name>TodoList系統</name>
<description>hunt tickets on-site management system.</description>
<author email="mavlarn@test.com" href="http://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將來打包成app的時候的應用的顯示名。plugin是使用的cordovas外掛。裡面還有一些其他配置，請參考cordova的文件。
tslint.json、tsconfig.json
這是用tslint做程式碼檢查的配置。
resources
裡面有2個檔案，icon.png和splash.png，分別的打包的應用的顯示名稱和載入頁的圖片。你只要加了這兩個檔案，執行ionic resources就可以生成各個尺寸的圖示檔案和圖片。它會根據你設定的平臺，生成各個平臺的圖示和檔案的各個尺寸的檔案。
plugins
這裡面存在的你新增的cordova外掛。
platforms
裡面存放平臺相關的檔案，每次編譯app的時候，就會根據新增的平臺，在這裡面生成編譯檔案和打包的檔案。
hooks
這裡面存放的是hook檔案，也就是鉤子。我們可以編寫指令碼，來定義在每次執行某些任務的時候被呼叫的任務。也可以定義某個外掛相關的指令碼。例如，如果你加了某一個微信的外掛，這個外掛可能有一個鉤子，幫助你在每次新增完這個外掛的時候，執行一些任務，來進行一些專案的配置，例如微信的appId等。
如果你只是想開發一個web應用，上面這些基本都不會管，有些檔案甚至都不會生成。而我們開發具體的業務需要的，就是src下面的檔案。
業務相關檔案說明
index.html
src下面有幾個檔案，index.html當然就是開啟的首頁了。這個首頁裡面的內容(main.js, polyfills.js等)會在編譯後生成。
menifest.json
這個檔案是在index.html使用，用來設定網頁的很多屬性，包括網站的圖示(favicon.ico)，搜尋引擎的引數，應用名等。可以參考：developer.mozilla.org/en-US/Add-o…
theme/variables.scss
ionic有設計良好的手機端的元件，也提供了幾個預設顏色，我們可以通過修改這個檔案，修改幾個預設顏色，也可以設定很多元件的顏色等屬性。
assets
這裡面就是存放應用中用到的各種圖片等資原始檔。
app
這裡面有幾個檔案：
main.ts
app.module.ts
app.component.ts
app.html
app.scss複製程式碼這幾個檔案，從名字就能看出來，跟Angular2專案中的幾個入口檔案類似。其中main.ts就是入口檔案，它用下面的方式初始化我們的app模組：
platformBrowserDynamic().bootstrapModule(AppModule);複製程式碼app.module.ts裡面就是定義的app模組，app.component.ts定義的就是應用的根元件，這裡跟Angular2不一樣的地方是，需要用ionic的方式來載入根元件：
declarations: [ MyApp, HomePage ],
imports: [
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],複製程式碼在引入根元件的時候，需要用IonicModule.forRoot(MyApp)來引入，在bootstrap裡面就不是直接初始化MyApp，而是IonicApp。同時，對於Ionic2裡面的所有的元件（簡單來說就是需要顯示在頁面上的元件），需要加入到entryComponents的列表裡。
除了上面說的以為，其他的配置，像declarations，providers，配置方式跟執行機制跟Angular2是一樣的。
ionicons
Ionic還提供了一套設計非常好的圖示庫，ionicons。地址是 ionicframework.com/docs/ionico… 。Ionic的很多元件也都用到了一些圖示，例如後退、關閉等圖示。這些圖示是在ionic的css裡面以字型的方式載入的，所以，你應該在專案中儘量使用這些圖示。
@ionic/app-scripts
最後需要說明的就是ionic-app-scripts，它在package.json檔案中作為devDependencies加入，裡面有很多幫助我們編譯、執行專案的指令碼。除了建立是專案裡面自帶的build, clean，還有很多其他的指令碼可以允許。例如下面的內容：
"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"
},複製程式碼當我們執行ionic serve時，實際上就是執行的是npm run ionic:serve，也就是對應的ionic-app-scripts serve 這個命令。
當我執行npm run min時，執行的是ionic-app-scripts minify。
一般情況下，你執行build就會執行專案的編譯（將TypeScript檔案編譯成js），然後把所有的js檔案打包成main.js，以及把所有的css合併成一個main.css。但是，這樣生成的檔案比較大，也沒有做程式碼混淆，你可以在執行build以後，再執行min,來進行程式碼的壓縮、混淆等。執行完minify以後，main.js檔案可以從原先的6.5M左右，減少到不到1.6M。在進行gzip壓縮的話，基本上下載所有的檔案是550K左右。已經基本可以滿足手機端下載檔案大小的需要。
完整的文件可以檢視GitHub的地址
熟悉Angular2的架構的可能知道Angular2的編譯可以使用Tree Shaking技術進一步減少檔案的大小，ionic-app-scripts也提供了
rollup的引數來實現Tree Shaking，具體方法請參考官方文件。
有關專案的結構和配置，差不多就是這些，雖然說，即使你不知道這些是幹嘛的，也能直接開始著手開發應用。但是，那就像閉著眼睛跑步，隨便一個小坑就能讓你跌倒。何況，很多人所謂的坑，實際上也只是他自己不會用或者用得不對。所以，開始Angular和Ionic的應用，還是需要對node, npm, webpack等有一定的瞭解，然後對專案中的各種配置有一些瞭解，才能在之後的開發中比較順利的進行。