這里詳細介紹下如何用ionic+cordova+angularjs搭建自己的移動端app，包括環境搭建，框架使用等，具體項目已放置在github上，可下載下來自行啟動。
下載地址：https://github.com/foreverjiangting/myApp/tree/master/myApp
一：環境搭建
1.配置java的運行環境，包括path變量的路徑，這里不再詳細講解，請自行百度。
2.下載Android Studio，並配置path變量，以及sdk路徑。這個下載比較麻煩，請自行去官網下載
C:\Program Files (x86)\Android\android-sdk\tools; C:\Program Files (x86)\Android\android-sdk\platform-tools;
3. 安裝node.JS的安裝。下載地址：https://nodejs.org/download/
4. 安裝ionic 和cordova。請參考官網： http://ionicframework.com/getting-started/
5. 打開cmd，進入命令行，注意是在cmd進入的哦，不是git bash里面進入。
npm install -g ionic
安裝成功后查看一下版本，繼續安裝cordova。
npm install -g cordova
6. 開始創建ionic項目，輸入一下命令。
ionic start myApp tabs
進入myApp該項目目錄，輸入 ionic serve，即可以成功的在瀏覽器中進行瀏覽。這個是我自己設計的APP首頁頁面，啟動成功后看到的效果。
7.如何編譯並發布應用？
當你已經順利完成你的應用代碼部分的時候，你現在所需要的就是將你的應用打包並且發布了。 第一步：創建一個獨一無二的圖標。創建好你的圖標之后，請以png/psd/AI格式保存在resource/android/icon.png和resource/android/icon.png。
然后使用如下命令，就可以生成不同尺寸的圖標。
$ ionic resources -icon
第二步：創建啟動頁面圖片。啟動畫面的源文件至少需要2208px×2208px，創建完成后，保存為resource/android/splash.png和resource/android/splash.png。然后使用如下命令就可以生成不同尺寸的啟動畫面圖片： $ ionic resources --splash
看下我創建的啟動圖片：
第三步：編譯Android應用（這里以安卓應用為例）。 1:配置應用的簽名。使用如下命令來配置你的簽名（keystore）
$ keytool -genkey -v -keystore my_jt.keystore -alias my_jt -keyalg RSA -keysize 2048 -validity 10000
注意：請使用你應用的名字來替代my_jt這個命令可以生成一個新文件，在本示例中為my_jt.keystore。 在應用的整個生命周期中將重復使用同一個keystore，請保存好它。
2:使用Cordova編譯應用。使用build命令編譯一個應用的發布版本：
$ cordova build --release android
這個命令會生成一個新的apk文件。此時還未簽名。 3:簽名應用文件。現在我們要用之前創建的keystore文件來簽名生成的未簽名版本的應用。使用如下命令來簽名： $ jarsigner -verbose -sigalg SHALwithRSA -digestalg SHAL -keystore my_jt.keystore unsigned_name.apk my_jt
注意：這里請使用keystore生成文件名來替換my_jt示例名稱，同時用真實的應用文件名替換掉unsigned_name.apk。 這個過程需要一點時間，期間會提示輸入keystore的密碼。命令會修改apk文件並對其進行簽名。OK，需要的環境都已經配置好了，也可以啟動成功，但是以上五個步驟中，不一定都是很順利的，這里總結一下自己的問題，並給出自己的解決方案。
二：安裝遇到的問題
1.進行android 平台配置時候報錯。即執行下面命令,這里的命令是指，將本地的APP打包成Hybrid App時的基於安卓平台，進行的編譯。
ionic platform add android
這里會剛開始安裝出問題，顯示，android版本過低，解決辦法，重新下載一個sdk版本。
2.確保你安裝后，ionic的文件一個不少，如上所示，碰到問題，當時安裝時候，沒有ionic.config.json文件。解決辦法，自己新建一個ionic.config.json文件
{
"name": "myApp",
"app_id": ""
}
將以上內容添加進去即可。不過name要換成你自己的項目目錄名稱。
3. 進行安卓打包時，編譯成apk文件，即執行下面命令時碰到問題。
ionic build android
由於很多東西是從google下載來了，打包會很慢很慢，（等的花兒都謝了）
三：項目規范問題
這里總結一下導師昨天驗收demo時候，指出的幾個問題。
1：angularjs書寫controller時候，注意要將參數寫進數組里面。
看下我的寫法是下面這樣的：
.controller('PlaylistsCtrl', function($scope) {
$scope.playlists = [
{ title: 'Reggae', id: 1 },
{ title: 'Chill', id: 2 },
{ title: 'Dubstep', id: 3 },
{ title: 'Indie', id: 4 },
{ title: 'Rap', id: 5 },
{ title: 'Cowbell', id: 6 }
];
})
這種寫法是有問題的，在進行打包時候，會出問題。正確寫法應該是下面這種。將參數和函數寫在數組里面。
.controller('PlaylistsCtrl',['$scope', function($scope) {
$scope.playlists = [
{ title: 'Reggae', id: 1 },
{ title: 'Chill', id: 2 },
{ title: 'Dubstep', id: 3 },
{ title: 'Indie', id: 4 },
{ title: 'Rap', id: 5 },
{ title: 'Cowbell', id: 6 }
];
}])
2. 我在進行書寫時候，沒有將服務和控制器進行分開，而是混合寫的，而且是單頁面進行路由轉換，導師指出這樣是會存在很多問題的，通常當頁面很多時候，幾百個
甚至幾千個時候，單頁面加載的速度是相當緩慢的，后期需要進行改進。像我下面這種將控制器和服務混合寫是不規范的。
.controller('browseCtrl', ['$scope', '$stateParams','$http','$ionicScrollDelegate','$location','$filter',
function($scope, $stateParams,$http,$ionicScrollDelegate,$location,$filter) {
$scope.requestDate = function() {
$http.get("../data/browse.json").success(function(data) {
console.log("請求全部的數據");
console.log(data);
$scope.data = data;
});
}
}])
四：總結
從開始零搭建到現在這個APP有一定的模型，從功能，到頁面設計，差不多花了四天左右的時間，與后端的聯調也能夠跑通。么么噠，接下來的兩周時間，在保證基本功能前提下，設計
各方面需要繼續完善，優化。哈哈，很喜歡這種調調，自己邊設計，邊做。。。還有好些頁面，功能沒寫，繼續。最終完整版APP請看我github里面的更新(暫未完成版)。
這里貼下自己主頁和列表頁的代碼部分：
主頁部分：
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content >
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left" class="set-side-menu">
<ion-content class="set-background">
<div clas="set-menu-login" style="text-align: center;margin-top: 55px;cursor:pointer;" ng-click="login()">
<div class="set-img-login" style="margin-left: 32%;">
</div>
<p style="margin-top:19px;font-size: 17px;">請登錄賬號</p>
</div>
<ion-list>
<div class="list set-list-menu" style="line-height: 60px;margin-top: 40px;">
<ion-item menu-close href="#/app/personInfo" >
<i class="icon ion-person" ></i>
<span class="set-menu-icon"> 個人中心</span>
</ion-item>
<ion-item menu-close href="#/app/playlists">
<i class="icon ion-calendar"></i><span class="set-menu-icon">投票首頁</span>
</ion-item>
<ion-item menu-close href="#/app/browse">
<i class="icon ion-pinpoint"></i><span class="set-menu-icon"> 試題資料</span>
</ion-item>
<ion-item menu-close href="#/app/personCenter">
<i class="icon ion-star"></i><span class="set-menu-icon"> 個人收藏</span>
</ion-item>
<ion-item menu-close href="#/app/set">
<i class="icon ion-locked"></i><span class="set-menu-icon"> 個人設置</span>
</ion-item>
</div>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
列表頁部分：
<ion-view view-title="問卷列表">
<ion-content on-scroll="scrollFixed(e)" >
<div class="set-btn-all" id="set-btn-all">
<button type="button" class="set-all-list l1 " ng-click="requestDate()" id="btn1">全部 </button>
<button type="button" class="set-all-list l2" ng-click=requestComplete() id="btn2">已完成 </button>
<button type="button" class="set-all-list l3" ng-click=requestInComplete() id="btn3">未完成 </button>
<button type="button" class="set-all-list l4" ng-click=requestDoing() id="btn4">進行中 </button>
</div>
<ion-list>
<ion-item ng-repeat="value in data" href="#/app/timuList/{{value.id}}">
<div class="item item-avatar">
<img ng-src="{{value.url}}">
<h3 style="color: #999;">
<span> {{value.text}} </span>
</h3>
<h3 class="set-wenjuan-list" style="color: #ccc;margin-top: 15px;">
有效期：{{value.timeDate}}
<span class="set-tagComplete">{{value.status}}</span>
<span class="set-tagComplete btn-detail">查看詳情</span>
</h3>
</div>
</ion-item>
</ion-list>
<div class="set-tips-message">
<p>已經到底了</p>
</div>
<div class="fs_top_btn" ng-click="scrollTop()">
</div>
</ion-content>
<ion-footer-bar align-title="left" class="">
<div class="tabs tabs-icon-left">
<a class="tab-item" href="#/app/playlists ">
<i class="icon ion-home"></i>
首頁
</a>
<a class="tab-item" href="#/app/personCenter">
<i class="icon ion-star"></i>
收藏
</a>
<a class="tab-item" href="#/app/set">
<i class="icon ion-gear-a"></i>
我
</a>
</div>
</ion-footer-bar>
</ion-view>
主頁和列表頁已完成，比較頭疼的還是設計，感覺總是達不到自己想要的效果，有比較好的想法親，麻煩給我留言哈！謝謝噠！！！！！！！！！！
作者：婷風
出處：http://www.cnblogs.com/jtjds/p/6056719.html
如果您覺得閱讀本文對您有幫助，請點一下“推薦”按鈕，您的“推薦”將是我最大的寫作動力！歡迎各位轉載，但是未經作者本人同意
轉載文章之后必須在 文章頁面明顯位置給出作者和原文連接否則保留追究法律責任的權利。