2015年4月20日 星期一

Hybrid Apps開發系列之4.1：多頁面App製作與頁籤(Tabs)簡介

前一篇文章介紹使用<ion-header-bar>，<ion-content>製作單一頁面的apps (Hybrid Apps開發系列之3.4：單頁面App製作(貨幣轉換器))；不過如果要製作多頁面 (multiple views) apps，則必須套用AngularUI-Router框架。Ionic已包含angular-ui-router套件，將多頁面apps的介面瀏覽過程，轉為許多"states"；因此，只需使用適當的Ionic指令，以及angular-ur-router services，建立各個"states"的細節，便可完成多頁面apps。

顯示頁面內容指令：<ion-nav-view>

最簡單的多頁面apps是以<ion-nav-view>做為頁面的樣板，而各頁的內容再以<ion-view>標示。至於瀏覽過程中該顯示哪一頁？則由UI-Router決定.，程式中必須告知UI-Router，有幾個states，每一個頁面可能就是一個state，如下圖所示：
圖1. 定義好樣板與內容後，UI-Router會根據瀏覽歷程決定顯示內容

如上圖，index.html的內容只需要加入<ion-nav-view>指令，當成樣板，如：
    <body ng-app="starter">
        <ion-nav-view>
        </ion-nav-view>
    </body>
另外再加入兩個states的頁面內容，例如home.html：
  1.        <ion-view title="首頁">
  2.             <ion-nav-bar>
  3.               <ion-back-buttons></ion-back-buttons>
  4.             </ion-nav-bar>
  5.             <ion-content>
  6.             首頁內容           
  7.             </ion-content>
  8.             <ion-tabs class="tabs-icon-top">
  9.                 <ion-tab title="首頁" icon="ion-home" href="/home"></ion-tab>
  10.                 <ion-tab title="訂位" icon="ion-compose" href="/order"></ion-tab>
  11.             </ion-tabs>   
  12.         </ion-view>
以及order.html：
  1.        <ion-view title="訂位">
  2.             <ion-nav-bar>
  3.               <ion-back-buttons></ion-back-buttons>
  4.             </ion-nav-bar>
  5.             <ion-content>
  6.             訂位內容           
  7.             </ion-content>
  8.             <ion-tabs class="tabs-icon-top">
  9.                 <ion-tab title="首頁" icon="ion-home" href="/home"></ion-tab>
  10.                 <ion-tab title="訂位" icon="ion-compose" href="/order"></ion-tab>
  11.             </ion-tabs>   
  12.         </ion-view>
兩者內容幾乎相同，只有第1行的title屬性值，與第6行頁面內容不一樣。其他說明如下：
  • 第1-12行：頁面以<ion-view>對應index.html的<ion-nav-view>指令，代表每一個頁面的內容。
  • 第2-4行：當頁面樣板是<ion-nav-view>時，每一個頁面都可以用<ion-nav-bar>加入標題列。和<ion-header-bar>不同的是<ion-nav-bar>也會由UI-Router自動套入內容。
  • 第3行：在<ion-nav-bar>內，可加入<ion-nav-back-buttons>指令。該指令會視瀏覽狀態決定是否要在標題列加入「返回」按鈕。
  • 第5-7行：主要內容放置於<ion-content>內。
  • 第8-11行：加上頁籤 (tabs)。頁籤預設的位置在Android平台上是在標題列下，在iOS平台上則是最下方。頁籤的主要指令是<ion-tabs>，透過css設定頁籤是顯示圖示、文字或是兩者皆顯示，此處tabs-icon-top是文字與圖示同時顯示，且圖示在上方。每一個頁籤則是用<ion-tab>設定文字、圖示以及點選之後的連結頁面。
app.js內config定義如下：
  1. angular.module('starter', ['ionic'])
  2.         .config(function ($stateProvider, $urlRouterProvider) {
  3.             $urlRouterProvider.otherwise('/home');
  4.             $stateProvider
  5.                     .state('home', {
  6.                         url: '/home',
  7.                         templateUrl: 'home.html'
  8.                     })
  9.                     .state('order', {
  10.                         url: '/order',
  11.                         templateUrl: 'order.html'
  12.                     });
  13.         })
  14.         .run(function ($ionicPlatform) {
  15.             ...略...
  16.         })

  • 第2行：.config()是用來設定UI-Router各個states的函式。UI-Router提供兩個services—$stateProvider用來定義狀態；$urlRouterProvider用來設定url對應關係，不過一般都用來呼叫.otherwise()設定app的首頁。
  • 第3行：設定app的首頁url為"/home"。該url會定義在後續的states中。
  • 第5-8行：以$stateProvider.state()定義頁面狀態。state用法是—state('名稱',{name1: value2, name2:value2})。故此處定義state名稱是'home'；屬性url定義網址為'/home'，網址亦為自訂；templateUrl則定義此頁面的內容來源，此處設定為home.html。
  • 第9-12：以state定義第二個頁面，名稱是'order'；屬性url定義網址為'/order'，網址亦為自訂；templateUrl則定義此頁面的內容來源，此處設定為order.html。

底下是在JS Bin的執行結果：

用"text/ng-template"設定.html檔的內容

在這個範例裡值得注意的是：home.html以及order.html兩者其實不是真的「檔案」，而是透過<script>指令將內容寫在index.html檔內。
<script id="home.html" type="text/ng-template">
...
</script>>
<script id="order.html" type="text/ng-template">
...
</script>
屬性id設定檔案名稱，該名稱在config內用來協助定義頁面state。type設定值為"text/ng-template"，代表這是頁面內容。

將頁面寫在同一個檔案內對少數頁面apps而言很方便，但對頁面多的apps則不適合。下一個範例將重構程式碼，把每個頁面拆成單獨的檔案。
張貼者： 於
標籤： , , , ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)