Ionic環境配置及android打包環境搭建步驟：
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到開發目錄，執行：1ionic start myIonic blank?其中myIonic為我們的項目名稱?執行過程它會從github下載項目源碼，請等待。。。?執行完畢后你到開發目錄下查看會發現多了一個名為myIonic的文件夾，這個文件夾就是Ionic項目的所在目錄了。?目錄下有以下文件： 因為Ionic是基于angularjs框架開發的，所以在使用Ionic之前需要對angularjs有一定的了解。?在開發初期的調試我們一般會使用瀏覽器作為我們的調試工具，Ionic提供了一個serve命令為我們的應用創建web站點可1ionic serve? 執行完畢后Ionic會自動幫我們打開我們的默認瀏覽器并跳轉到我們的應用頁面，瀏覽器打開頁面時Ionic已經給我們開啟了livereload模式，開啟之后我們編輯www下的文件后保存時Ionic會通過websocket通知瀏覽器刷新頁面，我們就不用每次修改完畢手動刷新頁面了，又極大的提高了我們的工作效率。PS. 開啟livereload后Ionic會默認監聽www下面的文件，如果需要自定義的話請編輯ionic.project的watchPatterns來設置需要監聽的范圍1234567891011{???"name":?"myIonic",???"app_id":?"",???"watchPatterns": [?????????"www/js/*",?????????"www/js/*/*",?????????"www/*.html",?????????"www/templates/*.html",?????????"www/css/*.css"????]?}? www/index.html作為我們的程序入口文件，首先編輯這個文件，在body標簽中加入12345?
??這段標簽對于對Ionic不熟悉的人來說可能有點陌生，Ionic針對移動端自定義了一套樣式庫，并且使用Angular的指令封裝了各個模塊，ion-nav-bar是導航頁面頭部、ion-nav-view是導航內容頁面。inde.html入口頁面我們已經寫完了，接下來我們新建兩個我們自己的頁面。我們在www目錄下新建一個templates文件夾，存放我們的頁面并新建頁面：tabs.html?作為我們tab應用的主頁面：12345678910ion-tab為tab應用的底部菜單項?title是菜單按鈕顯示的文字，icon是菜單按鈕圖標，href是點擊菜單的跳轉地址，子元素ion-nav-view是點擊菜單后子頁面顯示的位置，ion-nav-view屬性name為該tab的名稱，后面添加子頁面會詳細描述。然后在app.js中加入該頁面的路由1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556// 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? 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 首頁1234567Scientific Facts?
??????facts.html1234567Home?
??????about.html1234567?
????????About Us?
??????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到開發目錄下執行命令：12ionic platform add android??ionic platform add ios?一般項目都需要兩個平臺同時部署，所以我們就添加兩個，執行完畢之后執行命令查看你已經添加的平臺列表：1ionic platform list?結果：12Installed 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輸入命令返回正確：1adb version?接下來就簡單了，把手機連接到電腦，并開啟usb調試模式，執行命令：1ionic run android??Ionic開始編譯項目生成apk并遠程安裝到手機上后自動打開應用，是不是很簡單？??調試我們在前面已經說過，在開發前期我們一般會在web中調試，而Ionic為我們提供了非常方面的web調試環境，只需要執行ionic serve就可以實現lievereload，而在部署到移動端后也可以開啟livereload的，我們只需要修改下我們run命令參數：1ionic run android --livereload -c -s?這是android的調試模式，無論在虛擬機上還是在手機上都可以實現livereload，不用每次開發完成編譯再部署！-c是開啟客戶端日志輸出，-s是開啟服務器端日志輸出。???android打包能使用Ionic來開發app的很可能對Ios和android的app打包發布流程不是很熟悉，我這里簡單說明下：?Android?Android的打包比較簡單執行命令：1ionic 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打包環境搭建步驟：
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到開發目錄，執行：1ionic start myIonic blank?其中myIonic為我們的項目名稱?執行過程它會從github下載項目源碼，請等待。。。?執行完畢后你到開發目錄下查看會發現多了一個名為myIonic的文件夾，這個文件夾就是Ionic項目的所在目錄了。?目錄下有以下文件： 因為Ionic是基于angularjs框架開發的，所以在使用Ionic之前需要對angularjs有一定的了解。?在開發初期的調試我們一般會使用瀏覽器作為我們的調試工具，Ionic提供了一個serve命令為我們的應用創建web站點可1ionic serve? 執行完畢后Ionic會自動幫我們打開我們的默認瀏覽器并跳轉到我們的應用頁面，瀏覽器打開頁面時Ionic已經給我們開啟了livereload模式，開啟之后我們編輯www下的文件后保存時Ionic會通過websocket通知瀏覽器刷新頁面，我們就不用每次修改完畢手動刷新頁面了，又極大的提高了我們的工作效率。PS. 開啟livereload后Ionic會默認監聽www下面的文件，如果需要自定義的話請編輯ionic.project的watchPatterns來設置需要監聽的范圍1234567891011{???"name":?"myIonic",???"app_id":?"",???"watchPatterns": [?????????"www/js/*",?????????"www/js/*/*",?????????"www/*.html",?????????"www/templates/*.html",?????????"www/css/*.css"????]?}? www/index.html作為我們的程序入口文件，首先編輯這個文件，在body標簽中加入12345?
??這段標簽對于對Ionic不熟悉的人來說可能有點陌生，Ionic針對移動端自定義了一套樣式庫，并且使用Angular的指令封裝了各個模塊，ion-nav-bar是導航頁面頭部、ion-nav-view是導航內容頁面。inde.html入口頁面我們已經寫完了，接下來我們新建兩個我們自己的頁面。我們在www目錄下新建一個templates文件夾，存放我們的頁面并新建頁面：tabs.html?作為我們tab應用的主頁面：12345678910ion-tab為tab應用的底部菜單項?title是菜單按鈕顯示的文字，icon是菜單按鈕圖標，href是點擊菜單的跳轉地址，子元素ion-nav-view是點擊菜單后子頁面顯示的位置，ion-nav-view屬性name為該tab的名稱，后面添加子頁面會詳細描述。然后在app.js中加入該頁面的路由1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556// 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? 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 首頁1234567Scientific Facts?
??????facts.html1234567Home?
??????about.html1234567?
????????About Us?
??????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到開發目錄下執行命令：12ionic platform add android??ionic platform add ios?一般項目都需要兩個平臺同時部署，所以我們就添加兩個，執行完畢之后執行命令查看你已經添加的平臺列表：1ionic platform list?結果：12Installed 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輸入命令返回正確：1adb version?接下來就簡單了，把手機連接到電腦，并開啟usb調試模式，執行命令：1ionic run android??Ionic開始編譯項目生成apk并遠程安裝到手機上后自動打開應用，是不是很簡單？??調試我們在前面已經說過，在開發前期我們一般會在web中調試，而Ionic為我們提供了非常方面的web調試環境，只需要執行ionic serve就可以實現lievereload，而在部署到移動端后也可以開啟livereload的，我們只需要修改下我們run命令參數：1ionic run android --livereload -c -s?這是android的調試模式，無論在虛擬機上還是在手機上都可以實現livereload，不用每次開發完成編譯再部署！-c是開啟客戶端日志輸出，-s是開啟服務器端日志輸出。???android打包能使用Ionic來開發app的很可能對Ios和android的app打包發布流程不是很熟悉，我這里簡單說明下：?Android?Android的打包比較簡單執行命令：1ionic 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采用上述步驟簽名。
