學(xué)習(xí)要點(diǎn)：
1. Ionic?中路由管理介紹
2. ionic?中內(nèi)聯(lián)模板介紹
3. i onic?路由機(jī)制:?狀態(tài)
4.?導(dǎo)航視圖?: ion-nav-view
5.?模板視圖?: ion-view
6.?導(dǎo)航欄?: ion-nav-bar
7.?回退按鈕?: ion-nav-back-button
8.?視圖特定按鈕?: ion-nav-buttons
9.?定制標(biāo)題內(nèi)容?: ion-nav-title
10.?定制視圖切換方式?: nav-transition
11.?定制視圖切換方向?: nav-direction
12.導(dǎo)航欄腳本接口?: $ionicNavBarDelegate
13.訪問歷史?: $ionicHistory

1． Ionic中路由管理介紹
在單頁應(yīng)用（?Single Page App）中，路由的管理是很重要的環(huán)節(jié)。?ionic.js?沒有使用?AngularJS
內(nèi)置的?ng-route?模塊，而是選擇了?AngularUI?項(xiàng)目 的?ui-router?模塊。
ui-router?的核心理念是將子視圖集合抽象為一個(gè)狀態(tài)機(jī)，導(dǎo)航意味著 狀態(tài)的切換。在不同
的狀態(tài)下，?ionic.js?渲染對應(yīng)的子視圖（動(dòng)態(tài)加載的?HTML?片段） 就實(shí)現(xiàn)了路由導(dǎo)航的功能
ui-router:
https://github.com/angular-ui/ui-router
2．?ionic?中內(nèi)聯(lián)模板介紹

可能你沒有注意過， HTML 中常用的 script 標(biāo)簽在 AngularJS 中被重新定義了： 除了原來的腳本聲明功能
之外，如果 script 元素的 type 屬性 定義為 text/ng-template，則被稱為內(nèi)聯(lián)模板。例如：
<script type="text/ng-template" id="a.html">
<p>This is the content of the template.</p>
</script>
內(nèi)聯(lián)模板在單頁應(yīng)用（ SAP）開發(fā)中非常有用。 SAP 應(yīng)用通常需要通過 AJAX 從后臺載入眾多的 HTML 片段，
這些 HTML 片段都用文件存放的話，看起來、想起來 都很不爽。使用內(nèi)聯(lián)模板，就可以把這些零散的 HTML
片段模板都集中在一個(gè) 文件里，維護(hù)和開發(fā)的感覺都會(huì)好很多。
AngularJS 在編譯時(shí)會(huì)將內(nèi)聯(lián)模板的 id 屬性值和其內(nèi)容，分別作為 key 和 value，存入$templateCache 管
理的 hash 表中:

使用內(nèi)聯(lián)模板
內(nèi)聯(lián)模板的使用，常見的有幾種情況。
?使用 ng-include 指令
可以利用 ng-include 指令在 HTML 中直接使用內(nèi)聯(lián)模板，例如：
<div ng-include="'a.html'"></div>
注意：其中 a.html 是一個(gè)字符串常量，需要使用單引號包裹起來。
?使用$templateCache 服務(wù)
也可以直接使用$templateCache 服務(wù)的方法 get()從模板緩存中讀出 其內(nèi)容：

1. var partial = $templateCache.get("a.html");
?使用$http 服務(wù)
還有一種常見的用法是使用$http 服務(wù)時(shí)指定 cache 參數(shù)，這將直接從$templateCache 中取出模板，而不
必進(jìn)行網(wǎng)絡(luò)訪問：
$http.get("a.html",{cache:$templateCache})
.success(function(d,s){..})
.error(function(d,s){...});

3．?ionic?路由機(jī)制:?狀態(tài)
對于視圖的路由，ionic沒有使用AngularJS的路由模塊（ ng-route），而是使用了 angular-ui
項(xiàng)目的 ui-route 模塊。?ionic.bundle.js 已經(jīng)打包了 ui-route 模塊， 所以我們使用時(shí)不
需要單獨(dú)引入。
和通常基于 URL 匹配的路由機(jī)制不同， ui-route 是基于狀態(tài)機(jī)的導(dǎo)航：
可以認(rèn)為視圖元素?ui-view?有多個(gè)狀態(tài)，比如： state1/state2/state3。 在任何一個(gè)時(shí)刻，
視圖元素只能處于某一狀態(tài)下。這些狀態(tài)是由狀態(tài)機(jī)管理的。
在 ui-route 中的$state?服務(wù)就是一個(gè)狀態(tài)機(jī)實(shí)例，在任何時(shí)刻，我們可以使用其?go()方
法跳轉(zhuǎn)到指定名稱的狀態(tài)。
配置狀態(tài)機(jī)
需要指出的是，狀態(tài)的劃分以及每個(gè)狀態(tài)的元信息（比如模板、 url 等）是在配置 階段通
過$stateProvider?完成的：

angular.module("myApp",["ionic"])
.config(function($stateProvider){
$stateProvider.state("state1",{...})
.state("state2",{...})
.state3("state3",{...});
});
觸發(fā)狀態(tài)遷移的幾種方式（通俗的講就是頁面跳轉(zhuǎn)的幾種方式）

1. 調(diào)用$state.go()方法，這是一個(gè)高級的便利方法；
2. 點(diǎn)擊包含 ui-sref 指令的鏈接 <a ui-sref="state1">Go State 1</a>
3. 導(dǎo)航到與狀態(tài)相關(guān)聯(lián)的 url。
當(dāng)用戶點(diǎn)擊這個(gè)鏈接時(shí)，?$state?服務(wù)將根據(jù)狀態(tài)名?state1?找到對應(yīng)的元信息，提取、編譯
模板，并將其顯示在 ui-view 指令指定的 視圖窗口中。

交流QQ群：187269144?

QQ群2：438443293

QQ群3：248403526

轉(zhuǎn)載于:https://blog.51cto.com/dingzhaoqiang/1708103

總結(jié)

以上是生活随笔為你收集整理的ionic路由(一)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。