WebApp開發框架Ionic+AngularJS+Cordova

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

 

Ionic

Ionic是一個新的、可使用HTML5構建混合移動應用的用戶界面框架，它自稱爲是「本地與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存取這些接口能夠調用諸如攝影機、羅盤等硬件系統資源。配合上一些基於HTML五、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中的代碼，看到，瀏覽器已經能夠跟着咱們的保存實時刷新，很是好用！！！