<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>
