本例是在win10系統(tǒng)下搭建的一個android應(yīng)用實(shí)例
1.首先安裝node.js
下載適合你電腦的版本，過程自行百度
2.使用node.js集成的包管理工具npm
安裝ionic和cordova
在命令行里輸入
npm install -g cordova ionic
下載過程由于國內(nèi)墻的問題可能失敗,可以使用淘寶國內(nèi)的鏡像
npm install -g cnpm --registry=https://registry.npm.taobao.org
下載完后運(yùn)行命令
cnpm install -g cordova
cnpm install -g ionic
Paste_Image.png
3.創(chuàng)建應(yīng)用
使用使用ionic官方提供的現(xiàn)成的應(yīng)用程序模板僻澎，或一個空白的項(xiàng)目創(chuàng)建一個ionic應(yīng)用：
ionic start myApp tabs
4.運(yùn)行或調(diào)試app
瀏覽器窗宦，安卓模擬器和真機(jī)三種方式
- 直接在瀏覽器運(yùn)行
在項(xiàng)目主目錄打開命令窗口，執(zhí)行ionic serve,首次執(zhí)行，會讓你選擇服務(wù)器地址，一般選擇localhost，此時你的app就會顯示在瀏覽器中锌俱，按f12，打開手機(jī)模式敌呈，就可以運(yùn)行你的app了嚼鹉，有一點(diǎn)：瀏覽器是熱部署的方式，當(dāng)你修改完代碼驱富，點(diǎn)擊保存后锚赤，瀏覽器就會重新啟動服務(wù)，獲取最新的代碼褐鸥，你的修改立刻就會展現(xiàn)出來线脚。 - 使用安卓模擬器運(yùn)行
在項(xiàng)目主目錄打開命令行窗口，執(zhí)行下列命令
ionic platform add android （添加android平臺）
ionic build android （生成android的apk文件）
ionic emulate android （在模擬器或者真機(jī)上運(yùn)行）
生成apk文件和運(yùn)行以后，這兩步可以合并成ionic run android一個命令浑侥，當(dāng)修改程序代碼后姊舵，執(zhí)行這一個命令查看即可。
Paste_Image.png
- 使用手機(jī)運(yùn)行
在使用模擬器運(yùn)行ionic_app步驟中執(zhí)行完那幾行創(chuàng)建運(yùn)行代碼后寓落，使用數(shù)據(jù)線連接電腦括丁，打開USB調(diào)試模式，修改連接方式為“媒體設(shè)備（MTP）”模式
執(zhí)行
ionic run android命令
Paste_Image.png
但是運(yùn)行在Android真機(jī)上伶选，會出現(xiàn)標(biāo)簽欄置于頂部的問題史飞。將下面的代碼復(fù)制粘貼到app.js的config配置下，標(biāo)簽欄就會出現(xiàn)在底部了
$ionicConfigProvider.platform.ios.tabs.style('standard');
$ionicConfigProvider.platform.ios.tabs.position('bottom');
$ionicConfigProvider.platform.android.tabs.style('standard');
$ionicConfigProvider.platform.android.tabs.position('standard');
$ionicConfigProvider.platform.ios.navBar.alignTitle('center');
$ionicConfigProvider.platform.android.navBar.alignTitle('left');
$ionicConfigProvider.platform.android.navBar.alignTitle('left');
$ionicConfigProvider.platform.ios.backButton.previousTitleText('').icon('ion-ios-arrow-thin-left');
$ionicConfigProvider.platform.android.backButton.previousTitleText('').icon('ion-android-arrow-back');
$ionicConfigProvider.platform.ios.views.transition('ios');
$ionicConfigProvider.platform.android.views.transition('android');
