ionic

ionic是一個強大的混合式/hybridHTML5移動開發(fā)框架,，特點是使用標(biāo)準(zhǔn)的HTML,、 CSS和JavaScript，開發(fā)跨平臺（目前支持：Android,、iOS,，計劃支持：Windows Phone、Firefox OS） 的原生App應(yīng)用：

ionic主要包括三個部分：

• CSS框架 - 提供原生App質(zhì)感的CSS樣式模擬,。ionic這部分的實現(xiàn)使用了ionicons圖標(biāo)樣式庫,。

• JavaScript框架 - ionic基于AngularJS基礎(chǔ)框架開發(fā)，遵循AngularJS的框架約束,；主要提供了適應(yīng)移動端UI的 AngularJS的擴展,，主要包括指令和服務(wù),。此外，ionic使用AngularUI Router來實現(xiàn)前端路由,。

• 命令行/CLI - 命令行工具集用來簡化應(yīng)用的開發(fā),、構(gòu)造和仿真運行。ionic命令行工具使用了 Cordova,，依賴于平臺SDK（Android & iOS）實現(xiàn)將移動web項目打包成原生app,。

由于ionic使用了HTML5和CSS3的一些新規(guī)范，所以要求 iOS7+/ Android4.1+,。 在低于這些版本的手機上使用ionic開發(fā)的應(yīng)用,，有時會發(fā)生莫名其妙的問題。

ionic.js : 指令

ionic.js對AngularJS進行了擴展,，它的主要貢獻是將移動端開發(fā)中常見 的UI組件抽象成AngularJS的指令,，便于我們可以在HTML開發(fā)中快速應(yīng)用。

比如,，我們使用ion-tabs指令就可以實現(xiàn)一個功能完備的選項卡：

1. <ion-tabs>

2. <ion-tab title="首頁">...</ion-tab>

3. <ion-tab title="交流">...</ion-tab>

4. <ion-tab title="設(shè)置">...</ion-tab>

5. </ion-tabs>

ionic.js實現(xiàn)的指令基本覆蓋了移動端開發(fā)所需,，下面的圖可以幫助我們快速簡要地了解 ionic.js的能力：

ionic.js : 路由管理

在單頁應(yīng)用（Single Page App）中，路由的管理是很重要的環(huán)節(jié),。ionic.js 沒有使用AngularJS內(nèi)置的ng-route模塊,，而是選擇了AngularUI項目 的ui-router模塊。

ui-router的核心理念是將子視圖集合抽象為一個狀態(tài)機,，導(dǎo)航意味著 狀態(tài)的切換,。在不同的狀態(tài)下，ionic.js渲染對應(yīng)的子視圖（動態(tài)加載的HTML片段） 就實現(xiàn)了路由導(dǎo)航的功能：

ionic.js : 手勢支持

考慮到移動應(yīng)用交互的特點,，ionic.js也提供了手勢操作的事件,，比如：

• hold - 長按

• tap - 敲擊

• drag - 拖動

• swipe - 滑動

• ...

參考資料：http://www./course/55010505e564e5172c0b9405/