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() {
        // 函式主體
   }

之後便可在HTML頁面中以AngularJS提供的多種ng指令，操作$scope變數所定義的資料模型、或是呼叫$scope定義的函式。下圖為資料繫結的示意圖：

圖1. AngularJS的雙向資料繫結(2-way data binding)機制。所謂雙向(2-way)是指controller與view兩邊對資料模型的操作，都會即時更新，使得controller與view兩邊的資料一致。

ng-model, ng-click, $scope定義的變數與函式
以一個帳號、密碼登入的畫面為例，首先須在controller端，以$scope設定「資料模型」變數，例如：

.controller('LoginCtrl', function($scope){
    $scope.data = {
        name:'',
        passwd:''
    };
});

接著，便可在頁面端的標籤內(如input標籤)使用ng-model指令，設定輸入欄位所對應之資料模型變數，例如：

<input type='text' ng-model = 'data.name'>
<input type='password' ng-model = 'data.passwd'>

兩端做完對應之後，頁面輸入的資料，便可供controller處理使用，此即雙向（2-way）之意涵。

另一種設定資料繫結的方式則是以兩對大括弧，將$scope定義的「變數名」包起來，如{{變數名}}。此外，頁面端也可為按鈕設定ng-click，指定點選按鈕時，應呼叫$scope所定義的那一個函式。相關controller與頁面的程式碼如下：

.controller('LoginCtrl', function($scope){
    $scope.data = {
        name:'',
        passwd:''
    };
    $scope.label = '登入';

    $scope.login = function(){
        // user login process
    } ; 
};

要注意的是，兩個$scope資料模型變數data與label的差異。此處data為物件，頁面資料輸入更新的同時，controller也會同步更新。但相對的，一般變數label，如果在頁面有更新內容，在controller端並不會同步。因此，頁面HTML檔用到ng-model的部分，其對應的$scope資料模型變數必須是「物件」，否則頁面更新變數內容時，controller端並不會同步更新。

<ion-view>
  <ion-content>
    <!--...略...-->
    <p>{{label}}</p>
    <input type='text' ng-model = 'data.name'>
    <input type='password' ng-model = 'data.passwd'>
    <button ng-click='login()'>登入</button> 
    <!--...略...-->
  <ion-content>
</ion-view>

總之，雙向資料繫結(2-way data binding)透過ng-model, ng-click以及controller內$scope變數的資料模型設定，提供了非常方便的頁面製作機制。

迴圈：ng-repeat與陣列資料
雙向資料繫結也可處理陣列(array)資料，不過在頁面端要搭配迴圈指令：ng-repeat。假設在controller裡有一陣列設定如下：

    $scope.array = [1,2,3,4,5];

則ng-repeat最基本的用法是:

<div class='list' ng-repeat='element in array'>
    <div class='item'>
       {{element}}
    </div>
</div>

如此一來頁面產生時，element將會依序取得陣列中的每一個元素值。另外，<div>使用了css類別list與item則是Ionic提供關於清單列表的格式設定。

因此，以一個清單列表的範例而言，如果在controller有一組陣列設定：

        .controller('NgRepeatCtrl', function ($scope) {
            var settings = [
                {label: '飛航模式', value: 'false', icon: 'ion-plane'},
                {label: 'Wi-Fi', value: 'false', icon: 'ion-wifi'},
                {label: '藍牙', value: 'false', icon: 'ion-bluetooth'},
                {label: '個人熱點', value: 'false', icon: 'ion-android-wifi'}
            ];
            $scope.settings = settings;
        })

其中settings有4個元素，而每個元素各有label, value, icon三個屬性，則在頁面HTML檔則可使用ng-repeat取得settings所有元素：

<ion-view title='設定'>
    <ion-content>
        <div class='list' ng-repeat="item in settings">
            <div class='item item-icon-left'>
                <i class='icon {{item.icon}}'></i>
                {{item.label}}
            </div>
        </div>
    </ion-content>
</ion-view>

• [第3行] ng-repeat用於此，則代表第4-7行將視陣列元素個數多寡而重複數次。'list' class是Ionic所定義的清單css設定，list內每一個清單項目，則搭配'item' class設定（如第4行）。ng-repeat指定了settings陣列（controller第8行處）為處理對象，item in settings則設定item為迴圈變數，每一輪都會取得陣列的一個元素內容。
• [第4-7行] 迴圈主體。因settings有4個元素，所以重複4次。第4行css設定是Ionic用來設定清單項目(item)、以及清單項目左側有圖示(item-icon-left)等格式。第5行<i>將解讀為圖示，故css設定搭配 icon、同時須指定icon代號（此處為{{item.icon}}，關於icon代號，請參考ionicons.com）。最後第6行{{item.label}}則顯示settings陣列每個元素中的label屬性。

---

Table of Contents:（持續增修中）

Part 1：基礎篇（Basics）

1. Ionic App開發環境設定-以Windows環境Android SDK為例
2. Ionic App 第一個專案：blank template
3. Ionic App 基本程式結構之一：Views、Controllers、Configuration
4. >>>Ionic App Views製作：ng指令與$scope變數
5. Ionic App 基本程式結構之二：Services/Factories
6. Ionic App 基本程式結構之三：Directives
7. Ionic App 介面元件之一：List/Card
8. Ionic App 介面元件之二：Form（fields & buttons）
9. Ionic App 介面元件之三：以ngMessages進行欄位驗證
10. Ionic App 資料處理之一：儲存資料

Part 2：後台篇（Backends）