//...
$stateProvider.state('home', {
url: '/home',
templateUrl: 'templates/home.html',
controller: 'HomeCtrl'
})
//...
然而，當要在頁面顯示一些動態資料－例如從資料庫讀取出來的內容、或是處理表單輸入的內容等動作時，還必須要靠「資料繫結」(data binding) 的輔助，才能更容易的達成目的。因此，AngularJS提供$scope變數，做為資料繫結之用。簡單的說，資料繫結(data binding)是指：先在controller中以$scope變數定義資料模型、或是函式，例如： $scope.name = {}; // 資料模型物件
$scope.login = function() {
// 函式主體
}
 |
| 圖1. Ionic app的view(如home.html及page2.html)與controller(app.js)。index.html則做為app的模板(template) |
 |
| 圖1. 側欄選單 |
 |
| 圖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
$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」的方式。 |