<ion-modal-view></ion-modal-view>建置頁面，$ionicPopup則是對話框 (dialog)式，直接用JavaScript設定對話框的一些餐數值，通常用於訊息通知、確認等作用。兩種彈出式視窗外觀如下圖所示。
 |
| 圖1.各種資料來源可透過factory進行管理 |
angular.module('starter',['ionic])
.factory('serviceName',function(){
return {}
}
)
angular.module('starter.controllers',[])
.controller('homeCtrl',function($scope,$location){
$scope.citys = citys;
$scope.showWeather = function(index){
$location.path('/tab/home/'+index);
}
})
.controller('settingsCtrl',function($scope){
$scope.citys = citys;
})
.controller('weatherCtrl', function ($scope, $stateParams, $http) {
$scope.city = citys[$stateParams.id];
$scope.img_base_url = image_base_url;
$http.get('http://api.openweathermap.org/data/2.5/weather',
{params: {'q': $scope.city.q}})
.then(function (response) {
$scope.weather = response.data;
}, function (err) {
alert("Error!!")
})
})
var citys = [
{name: "台北", q: "Taipei", on: true},
{name: "台中", q: "Taichung", on: true},
{name: "台南", q: "Tainan", on: true},
{name: "高雄", q: "Kaohsiung", on: true},
{name: "花蓮", q: "Hualian", on: true},
]
var image_base_url = "http://openweathermap.org/img/w/"; // open weather api icon
$http.get("http://url/service", { params: { "key1": "value1", "key2": "value2" } })
.success(function(response) {
// 處理http回應資料; response為回傳資料
})
.error(function(err) {
// 連線錯誤
});
另一種寫法則是：$http.get("http://url/service", { params: { "key1": "value1", "key2": "value2" } })
.then(function(response) {
// 建立天氣資料模型變數,response.data為回傳資料
}, function(err) {
// 連線錯誤
});
兩者有所差別，可參考此討論串。在此建議用
.then(function(resp),function(err))
<ion-tabs class="tabs-icon-top">
<ion-tab href="/home" icon="ion-home" title="首頁"></ion-tab>
<ion-tab href="/order" icon="ion-compose" title="訂位"></ion-tab>
</ion-tabs>
此外，<ion-nav-bar>等指令也同樣重複出現。為了讓程式碼共用，必須採用「共用states」的方式。 |
 |
| 圖1. 左邊是清單，點選項目後會出現該項目細節 |
 |
| 圖1.重構程式步驟1~3 |
 |
| 圖1. 定義好樣板與內容後，UI-Router會根據瀏覽歷程決定顯示內容 |
 |
| 圖1. 單頁面版面 |
<button class="button button-positive">button-positive</button> <button class="button button-block">button-block </button> <button class="button button-clear">button-clear</button> <button class="button button-positive button-outline">button-outline</button> <button class="button icon-left ion-home">icon button</button>下圖為上述各種設定結果。
 |
| 圖1. 按鈕各種css設定。 |
 |
| 圖1.Ionic官網文件：CSS/JavaScript/Input Types/ Ionicons都會經常使用。 |
<label class="item item-input item-select">
<div class="input-label">
選擇顏色
</div>
<select>
<option>藍色</option>
<option selected>綠色</option>
<option>紅色</option>
</select>
</label>