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>

原文鏈接：http://www.oschina.net/question/2275217_2140289?sort=time