搭建 AngularJS+Ionic+Cordova 開發環境並運行一個demo

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

Cordova就是一個中間件，讓我們把WebAPP打包成HybridAPP，並且它提供了非常多的插件，方便我們使用原生APP的功能。

Ionic是一個界面樣式庫，仿照原生的ios和android界面；同時它是基於AngularJs的。

 

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

 

關於Android開發環境的搭建，以及Cordova的下載使用，我們上一篇已經說明：《Cordova環境搭建 & HelloWorld》

這一篇，我們來使用 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
$ ionic emulate android (模擬器運行)
$ ionic run android (連接上手機運行)

 首次運行虛擬機可能里邊沒有安裝上我們的應用，可以新開一個cmd，運行：

$ adb install [APK-PATH]

然后虛擬機里邊就能找到應用並打開了。

 

4 在瀏覽器預覽並實時刷新

$ ionic serve

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

然后我們進入編輯器修改項目文件夾www中的代碼，看到，瀏覽器已經可以跟着我們的保存實時刷新，非常好用！！！

 

也可以使用指定IP地址來啟動serve，這樣方便用手機來預覽：

ionic serve --address 192.168.xxx.xxx

 

 

安卓手機中導航顯示在頂部的問題

http://bbs.phonegap100.com/thread-1495-1-1.html