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存取這些接口可以調用諸如攝影機、羅盤等硬件系統資源。配合上一些基於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中的代碼,看到,瀏覽器已經可以跟着我們的保存實時刷新,非常好用!!!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2026 CODEPRJ.COM