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上的地址是 https://github.com/driftyco/ionic，網站http://ionicframework.com。官方網站上的文檔也比較全，大部分組件都有示例代碼和效果展示。組件文檔可以查看：http://ionicframework.com/docs/components/#overview ，各個組件的api文檔可以查看：http://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" >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)，搜索引擎的參數，應用名等。可以參考：https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json。
theme/variables.scss
ionic有設計良好的手機端的組件，也提供了幾個默認顏色，我們可以通過修改這個文件，修改幾個默認顏色，也可以設置很多組件的顏色等屬性。
assets
這里面就是存放應用中用到的各種圖片等資源文件。
app
這里面有幾個文件：
main.tsapp.module.tsapp.component.tsapp.htmlapp.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。地址是 http://ionicframework.com/docs/ionicons/ 。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等有一定的了解，然后對項目中的各種配置有一些了解，才能在之后的開發中比較順利的進行。