Ionic App Views製作：ng指令與$scope變數

Ionic apps透過angular.module().config()設定每個頁面組態，以'templateUrl'指定頁面HTML檔所在，以'controller'指定該頁面對應的controller，例如下列程式碼便設定了'home' state的url、html檔所在位置、以及controller名稱：

//...
$stateProvider.state('home', {
                        url: '/home',
                        templateUrl: 'templates/home.html',
                        controller: 'HomeCtrl'
                    })
//...

然而，當要在頁面顯示一些動態資料－例如從資料庫讀取出來的內容、或是處理表單輸入的內容等動作時，還必須要靠「資料繫結」(data binding) 的輔助，才能更容易的達成目的。因此，AngularJS提供$scope變數，做為資料繫結之用。簡單的說，資料繫結(data binding)是指：先在controller中以$scope變數定義資料模型、或是函式，例如：

   $scope.name = {}; // 資料模型物件
   $scope.login = function() {
        // 函式主體
   }

Ionic App 程式結構之一：Views、Controllers、Configuration

如前文Hybrid Apps開發系列之2：第一個專案所說，Ionic專案建立之後，有app.js, index.html等重要檔案。事實上，Ionic apps有其運作機制，其中每一個app都會包括: views、controllers、與app設定（configuration）等部分，而視情況，還會建立services/factories，作為app資料服務串接之用。底下先就views、controllers、與app整體設定進行說明。

Ionic views、controllers與組態設定

Ionic apps有關views, controllers,組態設定(configuration)等基本運作機制，及其與index.html、app.js等檔案的關聯如下圖所示：

圖1. Ionic app的view(如home.html及page2.html)與controller(app.js)。index.html則做為app的模板(template)