ionic之AngularJS擴充 移動開發（視圖導航一）

標籤：

目錄：

1. 內聯模板 : script
2. 路由機制 : 狀態機器
3. 導航視圖 : ion-nav-view
4. 模板視圖 : ion-view
5. 導覽列 : ion-nav-bar
6. 回退按鈕 : ion-nav-back-button

內聯模板 : script

可能你沒有注意過，HTML中常用的script標籤在AngularJS中被重新定義了： 除了原來的指令碼聲明功能之外，如果script元素的type屬性 定義為text/ng-template，則被稱為內聯模板。例如：

1. 1. <script type="text/ng-template" id="a.html">　　<p>This is the content of the template.</p></script>

內聯模板在單頁應用（SAP）開發中非常有用。SAP應用通常需要通過AJAX 從後台載入眾多的HTML片段，這些HTML片段都用檔案存放的話，看起來、想起來 都很不爽。使用內聯模板，就可以把這些零散的HTML片段模板都集中在一個 檔案裡，維護和開發的感覺都會好很多。

AngularJS在編譯時間會將內聯模板的id屬性值和其內容，分別作為key 和value，存入$templateCache管理的hash表中:

使用內聯模板

內聯模板的使用，常見的有幾種情況。

• 使用ng-include指令

可以利用ng-include指令在HTML中直接使用內聯模板，例如：

1. <div ng-include="‘a.html‘"></div>

注意：其中a.html是一個字串常量，需要使用單引號包裹起來。

• 使用$templateCache服務

也可以直接使用$templateCache服務的方法get()從模板緩衝中讀出 其內容：

1. var partial = $templateCache.get("a.html");

• 使用$http服務

還有一種常見的用法是使用$http服務時指定cache參數，這將直接從$templateCache 中取出模板，而不必進行網路訪問：

1. $http.get("a.html",{cache:$templateCache}).success(function(d,s){..}).error(function(d,s){...});

    

路由機制 : 狀態機器

對於視圖的路由，ionic沒有使用AngularJS的路由模組（ng-route），而是使用 了angular-ui項目的ui-route模組。ionic.bundle.js已經打包了ui-route模組， 所以我們使用時不需要單獨引入。

和通常基於URL匹配的路由機制不同，ui-route是基於狀態機器的導航：

可以認為視圖元素ui-view有多個狀態，比如：state1/state2/state3。 在任何一個時刻，視圖元素只能處於某一狀態下。這些狀態是由狀態機器管理的。

在ui-route中的$state服務就是一個狀態機器執行個體，在任何時刻，我們可以使用其 go()方法跳轉到指定名稱的狀態。

配置狀態機器

需要指出的是，狀態的劃分以及每個狀態的元資訊（比如模板、url等）是在配置 階段通過$stateProvider完成的：

1. angular.module("ezApp",["ionic"]).config(function($stateProvider){$stateProvider.state("state1",{...}).state("state2",{...}).state3("state3",{...});});

觸發狀態遷移

在ui-router中定義的指令ui-sref用來觸發狀態遷移：

1. <a ui-sref="state1">Go State 1</a>

當使用者點擊這個連結時，$state服務將根據狀態名state1 找到對應的元資訊，提取、編譯模板，並將其顯示在ui-view指令指定的 視圖視窗中。

 

導航視圖 : ion-nav-view

在ionic裡，我們使用ion-nav-view指令代替AngularUI Route中的 ui-view指令，來進行模板的渲染：

1. <ion-nav-view><!--模板內容將被插入此處--></ion-nav-view>

和ui-view一樣，ion-nav-view總是根據狀態的變化，來提取對應的模板 並將其在DOM樹中渲染。

 

模板視圖 : ion-view

儘管在模板視圖中可以隨便寫HTML，但是，在ionic中，我們總是使用指令ion-view來 作為模板視圖內容的容器，這是為了與ionic的導航架構保持相容：

1. <script id="..." type="text/ng-template"><ion-view><!--模板視圖內容--></ion-view></script>

ion-view指令有一些可選的屬性：

• view-title - 視表徵圖題文字

模板被載入導航視圖ion-nav-view顯示時，這個屬性值將顯示在導覽列ion-nav-bar中

• cache-view - 是否對這個模板視圖進行緩衝

允許值為：true | false，預設為true

• hide-back-button -是否隱藏導覽列中的返回按鈕

當模板被載入導航視圖時，如果之前有其他的模板，那麼在導覽列ion-nav-bar上預設會自動 顯示返回按鈕（使用指令ion-nav-back-button定義）。點擊該按鈕將返回前一個模板。

hide-back-button的允許值為：true | false ，預設為false

注意：必須在導覽列中顯式地聲明返回按鈕，否則即使將hide-back-button屬性設為false， 這個按鈕也不會出現:-)

• hide-nav-bar - 是否隱藏導覽列

允許值為：true | false ,預設為false

 

導覽列 : ion-nav-bar

ion-nav-bar指令用來聲明一個居於螢幕頂端的導覽列，它的內容隨導航視圖 的狀態變化而自動同步變化：

1. <ion-nav-bar></ion-nav-bar>

ion-nav-bar有以下可選的屬性：

• align-title - 標題對齊

允許值為： left | right | center。預設為center，置中對齊

• no-tap-scroll - 點擊導覽列時是否將內容滾動到頂部。

允許值為：true | false。預設為true，這意味著如果視圖中的內容下拉很長，那麼在任何時刻 點擊導覽列都可以立刻回到內容的開頭部分。

回退按鈕 : ion-nav-back-button

你可能已經注意到前一節的樣本中，當切換到小說頁時，無處可去了！

好在ionic的指令ion-nav-back-button指令可以自動地讓你回退到前一個視圖：

1. <ion-nav-bar><ion-nav-back-button></ion-nav-back-button></ion-nav-bar>

當視圖切換時，回退按鈕會自動出現在導航條中，並顯示前一個視圖 的標題。點擊回退按鈕將返回前一個視圖。

樣本中的代碼在上一節的基礎上增加了回退按鈕，切換到小說頁再看看！

定製樣式

我們可以定製回退按鈕的表徵圖、文本和樣式：

1. <ion-nav-back-button class="button-clear"><i class="icon ion-ios-arrow-back"></i> 返回</ion-nav-back-button>

ionic之AngularJS擴充 移動開發（視圖導航一）