ionic入門之AngularJS擴展(一)

ionic

ionic是一個強大的混合式/hybridHTML5移動開發框架，特色是使用標準的HTML、 CSS和JavaScript，開發跨平臺（目前支持：Android、iOS，計劃支持：Windows Phone、Firefox OS） 的原生App應用：

ionic主要包括三個部分：

• CSS框架 - 提供原生App質感的CSS樣式模擬。ionic這部分的實現使用了ionicons圖標樣式庫。
• JavaScript框架 - ionic基於AngularJS基礎框架開發，遵循AngularJS的框架約束；主要提供了適應移動端UI的 AngularJS的擴展，主要包括指令和服務。此外，ionic使用AngularUI Router來實現前端路由。
• 命令行/CLI - 命令行工具集用來簡化應用的開發、構造和仿真運行。ionic命令行工具使用了 Cordova，依賴於平臺SDK（Android & iOS）實現將移動web項目打包成原生app。

因爲ionic使用了HTML5和CSS3的一些新規範，因此要求 iOS7+/ Android4.1+。 在低於這些版本的手機上使用ionic開發的應用，有時會發生莫名其妙的問題。

ionic.js : 指令

ionic.js對AngularJS進行了擴展，它的主要貢獻是將移動端開發中常見 的UI組件抽象成AngularJS的指令，便於咱們能夠在HTML開發中快速應用。

好比，咱們使用ion-tabs指令就能夠實現一個功能完備的選項卡：

1. <ion-tabs>
2. <ion-tab title="首頁">...</ion-tab>
3. <ion-tab title="交流">...</ion-tab>
4. <ion-tab title="設置">...</ion-tab>
5. </ion-tabs>

ionic.js實現的指令基本覆蓋了移動端開發所需，下面的圖能夠幫助咱們快速簡要地瞭解 ionic.js的能力：

ionic.js : 路由管理

在單頁應用（Single Page App）中，路由的管理是很重要的環節。ionic.js 沒有使用AngularJS內置的ng-route模塊，而是選擇了AngularUI項目 的ui-router模塊。

ui-router的核心理念是將子視圖集合抽象爲一個狀態機，導航意味着 狀態的切換。在不一樣的狀態下，ionic.js渲染對應的子視圖（動態加載的HTML片斷） 就實現了路由導航的功能：

ionic.js : 手勢支持

考慮到移動應用交互的特色，ionic.js也提供了手勢操做的事件，好比：

• hold - 長按
• tap - 敲擊
• drag - 拖動
• swipe - 滑動
• ...