標籤：
環境搭建步驟：
1、安裝node.js 這是為了使用npm來安裝ant，cordova，ionic
驗證是否安裝好node.js的方法是在命令提示字元中輸入“node -v” 若出現版本號碼，證明安裝成功。
nodejs 中文網站 http://nodejs.cn/ 下載安裝就可以了 安裝步驟可以參考 http://www.runoob.com/nodejs/nodejs-install-setup.html
2、下載jdk，並配置java環境（網上教程很多）
驗證是否安裝好的方法是在命令提示字元中輸入“javac”
若出現如下內容，證明安裝成功。
3、安裝ant,並配置相應的環境（網上搜教程）
驗證是否安裝好ant的方法是在命令提示字元中輸入“ant -v”
若出現版本號碼，證明安裝成功。
4、安裝cordova
安裝不成功通過如下方式： npm install -g cnpm --registry=https://registry.npm.taobao.org
執行成功後，輸入 cnpm install -g cordova 安裝
驗證是否安裝好cordova的方法是在命令提示字元中輸入“cordova -v”
若出現版本號碼，證明安裝成功。
5、安裝express
cmd 輸入：npm install express 等待一會即可
6、安裝android sdk 配置環境變數 cmd->adb
7、安裝Ionic
驗證是否安裝好ionic的方法是在命令提示字元中輸入“ionic -v”
若出現版本號碼，證明安裝成功。
建立Ionic項目Ionic官網提供了三個項目模板blank、tabs和sideMenu ，參閱：http://ionicframework.com/getting-started/
我們使用blank空模板建立一個我們的應用，並且完成一個簡單的tabs導航的小應用，開啟PowerShell cd到開發目錄，執行：
ionic start myIonic blank
其中myIonic為我們的項目名稱
執行過程它會從github下載項目源碼，請等待。。。
執行完畢後你到開發目錄下查看會發現多了一個名為myIonic的檔案夾，這個檔案夾就是Ionic項目的所在目錄了。
目錄下有以下檔案：
因為Ionic是基於angularjs架構開發的，所以在使用Ionic之前需要對angularjs有一定的瞭解。
在開發初期的調試我們一般會使用瀏覽器作為我們的調試工具，Ionic提供了一個serve命令為我們的應用建立web網站可
ionic serve
執行完畢後Ionic會自動幫我們開啟我們的預設瀏覽器並跳轉到我們的應用頁面，瀏覽器開啟頁面時Ionic已經給我們開啟了livereload模式，開啟之後我們編輯www下的檔案後儲存時Ionic會通過websocket通知瀏覽器重新整理頁面，我們就不用每次修改完畢手動重新整理頁面了，又極大的提高了我們的工作效率。
PS. 開啟livereload後Ionic會預設監聽www下面的檔案，如果需要自訂的話請編輯ionic.project的watchPatterns來設定需要監聽的範圍
{ "name": "myIonic", "app_id": "", "watchPatterns": [ "www/js/*", "www/js/*/*", "www/*.html", "www/templates/*.html", "www/css/*.css" ] }
www/index.html作為我們的程式入口檔案，首先編輯這個檔案，在body標籤中加入
<ion-nav-bar class="bar-positive"> <ion-nav-back-button> </ion-nav-back-button> </ion-nav-bar> <ion-nav-view></ion-nav-view>
這段標籤對於對Ionic不熟悉的人來說可能有點陌生，Ionic針對移動端自訂了一套樣式庫，並且使用Angular的指令封裝了各個模組，ion-nav-bar是導航頁面頭部、ion-nav-view是導航內容頁面。inde.html入口頁面我們已經寫完了，接下來我們建立兩個我們自己的頁面。我們在www目錄下建立一個templates檔案夾，存放我們的頁面並建立頁面：tabs.html 作為我們tab應用的首頁面：
<ion-tabs class="tabs-icon-top tabs-positive"> <ion-tab title="Home" icon="ion-home" href="#/tab/home"> <ion-nav-view name="home-tab"></ion-nav-view> </ion-tab> <ion-tab title="About" icon="ion-ios-information" href="#/tab/about"> <ion-nav-view name="about-tab"></ion-nav-view> </ion-tab> </ion-tabs>
ion-tab為tab應用的底部功能表項目 title是功能表按鈕顯示的文字，icon是功能表按鈕表徵圖，href是點擊菜單的跳轉地址，子項目ion-nav-view是點擊菜單後子頁面顯示的位置，ion-nav-view屬性name為該tab的名稱，後面添加子頁面會詳細描述。
然後在app.js中加入該頁面的路由
// Ionic Starter App // angular.module is a global place for creating, registering and retrieving Angular modules // ‘starter‘ is the name of this angular module example (also set in a <body> attribute in index.html) // the 2nd parameter is an array of ‘requires‘ angular.module(‘starter‘, [‘ionic‘]).config(function ($stateProvider, $urlRouterProvider) { $stateProvider .state(‘tabs‘, { url: "/tab", abstract: true, templateUrl: "templates/tabs.html", }) .state(‘tabs.home‘, { url: "/home", views: { ‘home-tab‘: { templateUrl: "templates/home.html" } } }) .state(‘tabs.facts‘, { url: "/facts", views: { ‘home-tab‘: { templateUrl: "templates/facts.html" } } }) .state(‘tabs.about‘, { url: "/about", views: { ‘about-tab‘: { templateUrl: "templates/about.html" } } }) $urlRouterProvider.otherwise("/tab/home"); }) .run(function($ionicPlatform) { $ionicPlatform.ready(function() { if(window.cordova && window.cordova.plugins.Keyboard) { // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard // for form inputs) cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); // Don‘t remove this line unless you know what you are doing. It stops the viewport // from snapping when text inputs are focused. Ionic handles this internally for // a much nicer keyboard experience. cordova.plugins.Keyboard.disableScroll(true); } if(window.StatusBar) { StatusBar.styleDefault(); } }); })
哈，我們tab應用的大概樣子已經出來了，但是現在點擊下面的菜單並沒有什麼反應，接下來我們就要開始添加我們的子頁面了，在templates檔案夾中建立：home.html、facts.html、about.html
home.html 首頁
<ion-view view-title="Home"> <ion-content class="padding"> <p> <a class="button icon icon-right ion-chevron-right" href="#/tab/facts">Scientific Facts</a> </p> </ion-content> </ion-view>
facts.html
<ion-view view-title="Facts"> <ion-content class="padding"> <p> <a class="button icon icon-right ion-chevron-right" href="#/tab/home">Home</a> </p> </ion-content> </ion-view>
about.html
<ion-view view-title="About"> <ion-content class="padding"> <p> About Us </p> </ion-content> </ion-view>
ion-view是我們子頁面的內容，屬性view-title可以設定頁面頭部的標題名稱，添加好檔案後我們需要在app.js中加入各個頁面的路由，並且需要對之前的tabs路由做一個調整。
大家發現tabs路由增加了一個abstract欄位，該欄位在angular中的解釋是抽象頁面，不能獨立作為頁面展示只能作為其他頁面父頁面，當載入子頁面之前載入父頁面。
其他子頁面的路由和tabs路由的配置有所不同名稱命名是父路由.子路由的形式，並且增加了一個views字典，欄位的key值對應著我們前面所說的tabs.html中ion-nav-view的name屬性，表示該路由跳轉的頁面屬於某個tab的子頁面，同時修改我們的otherwise預設頁為/tab/home。
儲存之後瀏覽器自動重新整理，我們來看一下效果。
好了，我們來點點看吧，頁面切換Ionic已經幫我們實現了類似原生app的切換動畫效果，是不是有一點原生app的感覺了？下面章節我們會實現在移動端的部署
部署到手機和cordova外掛程式的使用一個簡單的Web應用我們已經開發完成了，接下來我們就要做一些部署到移動端之前的準備了。
Ionic支援兩個平台ios、android，預設的Ionic項目並沒有添加這兩個平台，我們需要手動添加，cd到開發目錄下執行命令：
ionic platform add android ionic platform add ios
一般項目都需要兩個平台同時部署，所以我們就添加兩個，執行完畢之後執行命令查看你已經添加的平台列表：
ionic platform list
結果：
Installed platforms: android 4.0.0, ios 3.8.0 Available platforms: amazon-fireos, blackberry10, browser, firefoxos, windows, windows8, wp8
接下來的部署我們分開講述：
Android
Android部署分真機和虛擬機器，其實方法類似，在部署之前需要安裝JDK、Android SDK到開發環境中，配置好JDK的JAVA_HOME和Android SDK的ANDROID_HOME到環境變數中去，並把Android SDK安裝目錄添加到Path中。
配置好之後開啟PowerShell輸入命令返回正確：
adb version
接下來就簡單了，把手機串連到電腦，並開啟usb偵錯模式，執行命令：
ionic run android
Ionic開始編譯項目產生apk並遠程安裝到手機上後自動開啟應用，是不是很簡單？
調試
我們在前面已經說過，在開發前期我們一般會在web中調試，而Ionic為我們提供了非常方面的web調試環境，只需要執行ionic serve就可以實現lievereload，而在部署到移動端後也可以開啟livereload的，我們只需要修改下我們run命令參數：
ionic run android --livereload -c -s
這是android的偵錯模式，無論在虛擬機器上還是在手機上都可以實現livereload，不用每次開發完成編譯再部署！-c是開啟用戶端日誌輸出，-s是開啟伺服器端日誌輸出。
android打包
能使用Ionic來開發app的很可能對Ios和android的app打包發布流程不是很熟悉，我這裡簡單說明下：
Android
Android的打包比較簡單執行命令：
ionic build android -release
找到www/platform目錄下產生的apk包，此時的apk還不能被安裝到手機上，還需要一步簽名操作，大家可以參考：
http://www.cnblogs.com/qianxudetianxia/archive/2011/04/09/2010468.html
建立key，需要用到keytool.exe (位於jdk1.6.0_24\jre\bin目錄下)，使用產生的key對apk簽名用到的是jarsigner.exe (位於jdk1.6.0_24\bin目錄下)，把上兩個軟體所在的目錄添加到環境變數path後，開啟cmd輸入
D:\>keytool -genkey -alias demo.keystore -keyalg RSA -validity 40000 -keystore demo.keystore/*說明：-genkey 產生密鑰 -alias demo.keystore 別名 demo.keystore -keyalg RSA 使用RSA演算法對簽名加密 -validity 40000 有效期間限4000天 -keystore demo.keystore */D:\>jarsigner -verbose -keystore demo.keystore -signedjar demo_signed.apk demo.apk demo.keystore/*說明：-verbose 輸出簽名的詳細資料 -keystore demo.keystore 密鑰庫位置 -signedjar demor_signed.apk demo.apk demo.keystore 正式簽名，三個參數中依次為簽名後產生的檔案demo_signed，要簽名的檔案demo.apk和密鑰庫demo.keystore.*/ |
注意事項：android工程的bin目錄下的demo.apk預設是已經使用debug使用者簽名的，所以不能使用上述步驟對此檔案再次簽名。正確步驟應該是:在工程點擊右鍵->Anroid Tools-Export Unsigned Application Package匯出的apk採用上述步驟簽名。
Ionic環境配置及android打包
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
