WebApp開發架構Ionic+AngularJS+Cordova

標籤：

目前的手機APP有三類：原生APP、WebAPP、HybridApp；HybridApp結合了前兩類APP各自的優點，越來越流行。

 

Ionic

Ionic是一個新的、可以使用HTML5構建混合行動裝置 App的使用者介面架構，它自稱為是“本地與HTML5的結合”。該架構提供了很多基本的移動使用者介面範例，例如像列表（lists）、標籤頁欄（tabbars）和觸發開關（toggleswitches）這樣的簡單條目。它還提供了更加複雜的可視化布局樣本，例如在下面顯示內容的滑出式菜單。

Ionic宣稱他們極度強調效能，並且通過限制DOM互動、完全移除jQuery以及使用像translate(z)這種特定的硬體加速的CSS濾鏡觸發行動裝置上GPU——與由動力不足的行動瀏覽器提供的互動相比這種方式提供了硬體加速的互動——等方式使速度最大化。

Ionic同時它是基於 AngularJs的。

AngularJs

AngularJS是建立在這樣的信念上的：即聲明式編程應該用於構建使用者介面以及編寫軟體構建，而指令式編程非常適合來表示商務邏輯。架構採用並擴充了傳統HTML，通過雙向的資料繫結來適應動態內容，雙向的資料繫結允許模型和視圖之間的自動同步。因此，AngularJS使得對DOM的操作不再重要並提升了可測試性。

Cordova

Cordova就是一個中介軟體，讓我們把WebAPP打包成HybridAPP，並且它提供了非常多的外掛程式，方便我們使用原生APP的功能。

Cordova是一款開放原始碼的App開發架構，旨在讓開發人員使用HTML、Javascript、CSS等WebAPIs開發跨平台的移動平台應用程式，其原名稱之為PhoneGap，Adobe收購Nitobi公司後，PhoneGap商標保留，代碼貢獻給了Apache基金會，而Apache將其命名為ApacheCallback，其後發布新版本時，定名為ApacheCordova。

Cordova是一個行動裝置的API介面集，利用JavaScript存取這些介面可以調用諸如攝影機、羅盤等硬體系統資源。配合上一些基於HTML5、CSS3技術的UI架構，如jQueryMobile、DojoMobile或SenchaTouch，開發人員得以快速地開發跨平台App而不需要編寫任何的原生代碼。

注意到因為Cordova本身仍是一個原生程式，為App打包時依然需要用到這些系統平台的SDK。

 

本文我們在win7中搭建 AngularJS+Ionic+Cordova 開發環境，包括所涉及的Node.js、Cordova CLI、JDK及Android SDK等。

關於Android開發環境的搭建，以及Cordova的安裝教程：http://www.cnblogs.com/webapi/p/5519468.html

這一篇，我們來使用 AngularJS+Ionic+Cordova 快速地做出我們第一個HybridAPP，開始吧！

開始步驟網站上有： http://ionicframework.com/getting-started/

官網css組件： http://ionicframework.com/docs/components/#header

1 安裝Ionic和Cordova

官網 http://ionicframework.com/

國內 http://www.ionic.wang/

命令列安裝ionic

$ npm install -g cordova ionic

2 建立一個Ionic項目

$ ionic start myApp tabs

3 運行我們剛才建立的Ionic項目

$ cd myApp$ ionic platform add android$ ionic build android$ ionic emulate android

4 在瀏覽器預覽並即時重新整理

$ ionic serve

我們選擇localhost，並把瀏覽器調成mobile模式；

然後我們進入編輯器修改專案檔夾www中的代碼，看到，瀏覽器已經可以跟著我們的儲存即時重新整理，非常好用！！！

WebApp開發架構Ionic+AngularJS+Cordova