搭建 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