 |
| 圖1. Parse app自動產生User class，內有username, password, email等欄位 |
 |
| 圖2. EnrollApp雲端資料庫 |
 |
| 圖1. 顯示Google Map |
http://maps.googleapis.com/maps/api/js?key=[你的API金鑰]&sensor=true因此必須先取得API金鑰，步驟如下：
<script src="http://maps.googleapis.com/maps/api/js?key=[你的API 金鑰]&sensor=true"></script>
 |
圖1.App類型選擇WWW網站
|
 |
| 圖1.Parse.com提供雲端資料庫服務 |
<form name="form" novalidate>帳號: <input type="text" name="user" ng-model="username" required /> <span ng-show="form.user.$error.required">帳號不得為空</span> <input ng-disabled="form.user.$dirty && form.user.$invalid" type="submit" /> </form>
<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
 |
| 圖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設定。 |
<label class="item item-input item-select">
<div class="input-label">
選擇顏色
</div>
<select>
<option>藍色</option>
<option selected>綠色</option>
<option>紅色</option>
</select>
</label>