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

標籤：nod   hybridapp   建立   for   結合   重新整理   dex   webapp   tin   

目前的手機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

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

$ ionic serve

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

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

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