ionic之AngularJS擴展2 移動開發

目錄：

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.hubwiz.com/course/55010505e564e5172c0b9405/