顯示頁面內容指令：<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： <ion-view title="首頁">
<ion-nav-bar>
<ion-back-buttons></ion-back-buttons>
</ion-nav-bar>
<ion-content>
首頁內容
</ion-content>
<ion-tabs class="tabs-icon-top">
<ion-tab title="首頁" icon="ion-home" href="/home"></ion-tab>
<ion-tab title="訂位" icon="ion-compose" href="/order"></ion-tab>
</ion-tabs>
</ion-view>
以及order.html： <ion-view title="訂位">
<ion-nav-bar>
<ion-back-buttons></ion-back-buttons>
</ion-nav-bar>
<ion-content>
訂位內容
</ion-content>
<ion-tabs class="tabs-icon-top">
<ion-tab title="首頁" icon="ion-home" href="/home"></ion-tab>
<ion-tab title="訂位" icon="ion-compose" href="/order"></ion-tab>
</ion-tabs>
</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>設定文字、圖示以及點選之後的連結頁面。
angular.module('starter', ['ionic'])
.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home.html'
})
.state('order', {
url: '/order',
templateUrl: 'order.html'
});
})
.run(function ($ionicPlatform) {
...略...
})
- 第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的執行結果：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則不適合。下一個範例將重構程式碼，把每個頁面拆成單獨的檔案。
沒有留言:
張貼留言