Ionic 行動應用框架: 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)

如圖1，views以紅色標示，apps所有頁面的內容，都在這些html檔內撰寫；index.html則擔任views的共用模板，因此，通常不會在index.html撰寫頁面內容。除此之外，每一個頁面都稱為state，必須有一組設定：包括state名稱、html檔案所在、url、以及controller名稱等等。而這些組態設定通常定義於app.js內，而app.js也可以直接定義各個state所需的controllers。

底下，便以兩個頁面的範例，說明Ionic apps的基本架構。

2-page apps基本架構

圖2. 兩個pages app。首頁點選按鈕後，進入第2頁；第2頁header處出現「返回」按鈕，按下後，返回首頁。

以上圖2個pages的Ionic app為例，使用blank template建立好專案之後，必須對index.html、app.js進行修改，同時視app.js中的configuration設定，建立起相對應的.html檔案。相關檔案可參考https://github.com/leuowang/IonicAppExample/tree/master/twoPages

ionic start myApp001 blank
ionic platform add android

建立好myApp001之後，首先修改index.html，設定app頁面的共用模板：

<body ng-app="starter">
  <ion-nav-bar>
    <ion-nav-back-button>
    </ion-nav-back-button>
  </ion-nav-bar>
  <ion-nav-view>
  </ion-nav-view>        
</body>

共用模板使用了下列重要ionic或angularJS指令，這也是ionic app最常見的標準寫法。

[第6-7行]ion-nav-view（ionic）：用來建立navigation view，這是ionic apps多頁面的標準作法。當app操作時，navigation view會根據操作過程，帶入頁面檔案顯示內容。
[第2-5行]ion-nav-bar（ionic）：當有需要header bar時，可在<ion-nav-view>前加入此指令。
[第3-4行]ion-nav-back-buttons（ionic）：瀏覽頁面過程中，如有需要出現「返回」上一頁的按鈕時，可在<ion-nav-bar>內加入此指令。
[第1行]ng-app（angularJS）：代表在<body>標籤涵蓋的範圍都是angularJS應用，其名稱為'starter'。以angularJS模組化的概念，app.js裡必須有'starter'模組定義，例如：

angular.module('starter',[])
...

其次是修改app.js，加入states（頁面）設定、以及定義操控頁面的controllers，app.js程式框架如下：

angular.module('starter', ['ionic'])
  .config(function ($stateProvider,$urlRouterProvider) {
  }) // 流程設定
  .controller('HomeCtrl', function ($scope) {
  }) // controller 1 
  .controller('Page2Ctrl', function ($scope) {
  })// controller 2
  .run(function ($ionicPlatform) {
 // ...[略]...
})

[第1-2行]angular.module().config()：設定Ionic app共有幾個states、以及每個states組態，而為了定義state，必須使用$stateProvider，另外，$urlRouterProvider則用來定義app執行流程，特別是設定app進入頁面。
[第4-7行]angular.module().controller()：設定controllers。controller必須給定名稱，同時搭配config()內各個states的定義。

因此，以兩個頁面的app而言，上述app.js的樣板，可寫成：

angular.module('starter', ['ionic'])
        // state設定、流程設定
        .config(function ($stateProvider, $urlRouterProvider) { 
            $stateProvider
                    .state('home', {
                        url: '/home',
                        templateUrl: 'templates/home.html',
                        controller: 'HomeCtrl'
                    })
                    .state('page2', {
                        url: '/page2',
                        templateUrl: 'templates/page2.html',
                        controller: 'Page2Ctrl'
                    });
            $urlRouterProvider.otherwise('/home');
        })
        // home page controller
        .controller('HomeCtrl', function ($scope) {
        })   
        // page 2 controller
        .controller('Page2Ctrl', function ($scope) {           
        })

[第4-14行]$stateProvider.state()：定義頁面states，每個state通常代表一個頁面。.state('arg1',object)的第一個參數arg1為「state名稱」, 第二個object參數則是一組「組態設定」。通常組態設定會包含url－網址設定、templateUrl－頁面html檔所在、以及controller－controller名稱。以上例而言，共定義了2個states。第一個是'home'，其代表url為'/home'，而html檔案位於templates/home.html，controller名稱是'HomeCtrl'。第二個state則是'page2'，其url為'/page2'，HTML檔案位於templates/page2.html，而controller是'Page2Ctrl'。
[第15行]$urlRouterProvider.otherwise()：此函式作用是將所有無法處理的url都移轉至參數所設定的url，因此，app一開始執行，也會將畫面移至參數所設定的url（相當於app的首頁）。以上例而言，app會先出現'/home'這個url－也就是home state。請注意state與url的差別。
[第18-22行]建立兩個空的controller，名稱是'HomeCtrl'與'Page2Ctrl'，分別對應到兩個states組態設定所指定的controller，不過此兩個controllers並沒有任何功能。controller()通常會以$scope作為參數。$scope是angularJS很重要的變數，用來做頁面的資料繫結(data binding)－也就是只有在controller中設定的$scope變數，前端的頁面才能顯示其內容，或是對內容進行編輯。

最後，視config裡的設定，於適當位置建立html檔。以上例而言，此app必須建立templates/home.html與templates/page2.html。而Ionic apps的html檔為了配合index.html檔裡ion-nav-view的設定，至少必須包含下列兩個元素：

<ion-view title='標題'>
<ion-content>
  實際內容
  </ion-content>
</ion-view>

[第1-5行]<ion-view>：頁面必須有ion-view區塊，以對應index.html裡ion-nav-view的設定。ion-view內所有標記會在此頁面被帶入app畫面時被解讀。另外，由於index.html樣板也設定了ion-nav-bar，因此在ion-view裡，可以使用view-title或title屬性，設定header顯示的標題文字。
[第2-4行]<ion-content>：頁面實際內容必須放置在ion-content標記之內。

因此templates/home.html，與templates/page2.html程式碼如下：

templates/home.html

<ion-view view-title="首頁">
    <ion-content>
        <p>首頁內容在此</p>
        <button class="button 
                button-outline 
                button-positive"
                ui-sref="page2">
            下一頁
        </button>
    </ion-content> 
</ion-view>

[第4-9行]製作button：使用<button>標籤可製作按鈕。但ionic的按鈕必須透過ionic提供的css class，設定其外觀。button button-outline button-positive便是ionic css設定，詳情可參考Ionic官網關於按鈕CSS設定的說明。
[第7行]設定按鈕點選的對應動作－ui-sref屬性：按鈕點選對應動作有許多種設定方式，如果只是單純頁面切換，使用angular-UI Router的ui-sref屬性最為方便。屬性值必須是app.js裡透過config()設定的「state名稱」（而非url），此處page2即為第二頁的state名稱。

templates/page2.html

<ion-view view-title="第二頁">
    <ion-content>
        <p>第二頁內容在此</p>
    </ion-content>
</ion-view>

Table of Contents:（持續增修中）

Part 1：基礎篇（Basics）

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

Part 2：後台篇（Backends）

Ionic 行動應用框架

2016年3月8日星期二

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

沒有留言:

張貼留言

2016年3月8日 星期二

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

沒有留言:

張貼留言

2016年3月8日星期二