Ionic_1.x 全套配置搭建開發環境教程(nodejs,jdk,androidsdk)

來自：http://bbs.ionic-china.com/read.php?tid=7&fid=4

搭建環境 安裝教程
ionic簡介

爲何選用ionic:
完全開源且免費
性能優異
基於紅的發紫的AngularJs
漂亮的UI
強大的命令行(基於更熱門的nodejs)
開發團隊很是活躍。
ngCordova，將主流的Cordova API或者Cordova插件封裝爲AngularJS擴展，使用很是方便。
開源免費的webfont icon庫ionicons,基本知足你icon需求。
本篇主要講解windows平臺搭建編譯APK MacOS搭建編譯IPK看這裏
必備:
Node.js (npm安裝工具) 百度下載 官網下載 注:若是官網新版不能安裝請用百度下載0.12.7版
jdk (android編譯依賴) 百度下載 官網下載
android (ADK編譯) 百度下載 官網下載 (建議迅雷)
開發工具建議Sublime + ionic小助手
選件:
phonegap (移動端預覽) 百度下載 phonegap.apk國內下載 phonegap.ipk蘋果下載 phonegap.exe官網下載
Git(bower) 百度下載 官網下載
jre(git須要) 百度下載 官網下載
選件的介紹和安裝請看另外一篇帖子傳送門
大體步驟（注意安裝順序）：安裝node.js - 安裝jdk - 安裝android(adk) - 命令安裝ionic - 建立項目 - 編譯項目apk

注意事項:
百度下載的可能爲舊版,但保證能夠安裝，想裝新版的請官網下載。
安裝ngCordova須要安裝bower(Git和jre)不值得 推薦使用ionic小助手，小助手會自動下載安裝ngCordova。
建議全部程序管理員運行包括cmd androidsdk避免莫名的問題如sdk打不開cmd某些命令不能執行。

1.安裝node.js
沒什麼好說的一路next選好路徑（避免中文目錄，這東西驕着呢我連空格都沒寫）
點擊查看原圖

安裝後cmd執行node -v看到版本就是安裝成功了（無需設置path）
點擊查看原圖

其實如今咱們就能夠安裝ionic了，可是咱們要編譯apk才能看到效果因此須要裝sdk （這裏注意順序先裝sdk再裝ionic）

2.安裝JDK(androidSDK須要)
仍然沒什麼好說的java的jdk一路next
點擊查看原圖

安裝後cmd執行java -version看到版本就是安裝成功了（無需設置path）
點擊查看原圖

3.安裝androidSDK
選好路徑一路next
點擊查看原圖

如今是不能檢查androidsdk的 須要設置環境變量
點擊查看原圖

個人電腦 - 右鍵屬性 - 高級系統設置 - 環境變量
新建變量名 變量值
ANDROID_HOME D:\ionic\androidsdk(你sdk的路徑)
而後在path裏添加(注意前面的分號)
;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools

如今執行android -h看到一堆命令就是安裝設置成功了
點擊查看原圖

注意:執行androidsdk目錄下的SDK Manager.exe就能打開工具包 若是遇到打不開的狀況要用管理員運行!!!
點擊查看原圖

咱們接着配置AndroidSDK 你們知道國內沒法訪問google列表是空的因此須要添加鏡像
選擇Tools - Options 打開設置界面
點擊查看原圖

填入mirrors.neusoft.edu.cn 80而且勾選 Force https://... sources to be fetched using http://...單擊Close關閉
點擊查看原圖

而後依次選擇Packages - Reload 這回有了吧
這裏千萬注意只須要勾選3個Android SDK Platform-tools、Android SDK Build-tools、API23下的SDK Platform (編譯的時候會提示你須要的api版本，目前是API23)
若是你勾選了其它的，可能要下載二、30G的東西。像我這樣選只須要下載200M
點擊查看原圖

接受 - 安裝
點擊查看原圖

安裝完的列表像我這樣子就能夠了注意:新版ionic裝23就好,若是你遇到錯誤就把API 22的platform也勾上
點擊查看原圖

安裝前283M
點擊查看原圖

4.安裝ionic cordova

如今開始用node（npm）安裝ionic 只須要幾條命令
打開cmd（建議管理員運行）npm常常沒法訪問 咱們先映射到淘寶的服務器
npm install -g cnpm --registry=https://registry.npm.taobao.org
點擊查看原圖

而後咱們就能夠用cnpm命令安裝了
cnpm install -g cordova ionic（安裝 cordova ionic）
點擊查看原圖

安裝完成後運行ionic -v能夠看到版本

點擊查看原圖

如今咱們建立個項目看看
ionic start myApp tabs（建立過程y/n詢問是否打開官網n便可）
點擊查看原圖

能夠看到咱們建立的項目文件夾
點擊查看原圖

如今咱們能夠運行ionic server預覽下項目

點擊查看原圖

編譯須要添加platform平臺
ionic platform add android（添加平臺ionic platform remove android移除平臺 平臺大概20M遷移項目時候須要刪掉）
點擊查看原圖

ionic build android（第一次編譯要下載gradle-2.2.1-all.zip和一堆jar 若是gradle-2.2.1-all.zip下載太慢換個時間段再嘗試）

三個模版APK文件百度下載

經常使用命令：

npm install -g cnpm --registry=https://registry.npm.taobao.org（npm鏡像源指向淘寶）
cnpm install -g cordova ionic（安裝cordova ionic）
cnpm update -g cordova ionic（更新cordova ionic）
ionic -help（查看幫助）
ionic -v（查看版本）

ionic start myApp blank（空項目）
ionic start myApp tabs（帶導航條）
ionic start myApp sidemenu（帶側滑菜單）

ionic platform add android（添加android平臺）
ionic platform remove android（移除android平臺）
ionic build android（編譯項目apk）ionic emulate android（運行項目apk 手機鏈接在手機運行 模擬器鏈接在模擬器運行）
ionic run android （至關於build + emulate）
ionic serve （開啓服務調試）

ionic build ios（編譯項目ipk）ionic emulate ios（運行項目ipk）