# ionic 導航
## ion-nav-view
當用戶在你的app中瀏覽時,ionic能夠檢測到瀏覽歷史。通過檢測瀏覽歷史,實現向左或向右滑動時可以正確轉換視圖。
采用AngularUI路由器模塊等應用程序接口可以分為不同的$state(狀態)。Angular的核心為路由服務,URLs可以用來控制視圖。
AngularUI路由提供了一個更強大的狀態管理,即狀態可以被命名,嵌套, 以及合并視圖,允許一個以上模板呈現在同一個頁面。
此外,每個狀態無需綁定到一個URL,并且數據可以更靈活地推送到每個狀態。
以下實例中,我們將創建一個應用程序中包含不同狀態的導航視圖。
我們的標記中選擇ionNavView作為頂層指令。顯示一個頁眉欄我們用 ionNavBar 指令通過導航更新。
接下來,我們需要設置我們的將渲染的狀態值。
```
var app = angular.module('myApp', ['ionic']);
app.config(function($stateProvider) {
$stateProvider
.state('index', {
url: '/',
templateUrl: 'home.html'
})
.state('music', {
url: '/music',
templateUrl: 'music.html'
});
});
```
再打開應用,$stateProvider 會查詢url, 看是否匹配 index 狀態值, 再加載index.html到<ion-nav-view>。
頁面加載都是通過URLs配置的。在Angular中創建模板最一個簡單的方式就是直接將他放到html模板文件中并且用<script type="text/ng-template"w> 包含。
所以這也是一種方式將Home.html加入到我們的APP中來:
```
<script id="home" type="text/ng-template">
<!-- The title of the ion-view will be shown on the navbar -->
<ion-view view-title="Home">
<ion-content ng-controller="HomeCtrl">
<!-- The content of the page -->
<a href="#/music">Go to music page!</a>
</ion-content>
</ion-view>
</script>
```
這是一個很好的方法,因為模板會很快的加載并被緩存就不同通過網絡再去加載。
### 緩存
通常情況下,視圖都被緩存了能提升性能。當跳出視圖時,他的元素被保留在Dom中,并且它的作用于也從 $watch 中移除。
當我們跳到一個已經被緩存了的視圖,視圖會被激活,它的作用于被重新連接上,Dom中也保存了他的元素。這也允許保持以前的視圖滾動位置。
緩存也可以通過很多方式來開啟和關閉的。默認Ionic將最大緩存頁面數為10個,并且這并不是唯一可以定制的,應用程序可以顯式狀態來設置視圖應不應該被緩存。
注意,因為我們是緩存這些視圖,我們沒有破壞作用于. 相反, 它的作用于也從 $watch 中移除。
因為接下來的觀看作用域并沒有被摧毀和重建,控制器也沒被再次加載。如果app/controller需要知道什么時候進入或離開一個視圖,再視圖事件從 ionView 作用內發出, 例如 $ionicView.enter, 可能是有用的。
### 全局禁用緩存
$ionicConfigProvider 可以用于設置最大允許緩存的視圖數量,通過設置為0來禁用所有緩存。
```
$ionicConfigProvider.views.maxCache(0);
```
### 在STATE PROVIDER中禁用緩存
```
$stateProvider.state('myState', {
cache: false,
url : '/myUrl',
templateUrl : 'my-template.html'
})
```
### 通過屬性禁用緩存
```
<ion-view cache-view="false" view-title="My Title!">
...
</ion-view>
```
### AngularUI 路由
請訪問?[AngularUI Router's docs](https://github.com/angular-ui/ui-router/wiki)?了解更多。
### API
`name(可選)`:`字符串`
一個視圖的名字。這個名字應該是在相同的狀態下其他視圖中唯一的。你可以在不同的狀態中有相同名稱的視圖。欲了解詳細信息,查看ui-router的 [ui-view 文檔](http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-view)。
## ion-view
隸屬于ionNavView。 一個內容的容器,用于展示視圖或導航欄信息。
下面是一個帶有"我的頁面"標題的導航欄載入頁面的例子。
```
<ion-nav-bar></ion-nav-bar>
<ion-nav-view class="slide-left-right">
<ion-view title="我的頁面">
<ion-content>
你好!
</ion-content>
</ion-view>
</ion-nav-view>
```
### API
`title(可選)`:`字符串`
顯示在父`ionNavBar`的標題。
`hide-back-button(可選)`:`布爾值`
默認情況下,是否在父`ionNavBar`隱藏后退按鈕。
`hide-nav-bar(可選)`:`布爾值`
默認情況下,是否隱藏父`ionNavBar`。
## ion-nav-bar
創建一個頂部工具欄,當程序狀態改變時更新。
### 用法
```
<body ng-app="starter">
<!-- 當我們瀏覽時,導航欄會隨之更新。 -->
<ion-nav-bar class="bar-positive nav-title-slide-ios7">
</ion-nav-bar>
<!-- 初始化時渲染視圖模板 -->
<ion-nav-view></ion-nav-view>
</body>
```
### API
`delegate-handle(可選)`:`字符串`
該句柄用`$ionicNavBarDelegate`標識此導航欄。
`align-title(可選)`:`字符串`
導航欄標題對齊的位置。可用: 'left', 'right', 'center'。 默認為 'center'。
## ion-nav-buttons
隸屬于ionNavView
在ionView內的ionNavBar上用ionNavButtons設置按鈕。
你設置的任何按鈕都將被放置在導航欄的相應位置,當用戶離開父視圖時會被銷毀。
### 用法
```
<ion-nav-bar>
</ion-nav-bar>
<ion-nav-view>
<ion-view>
<ion-nav-buttons side="left">
<button class="button" ng-click="doSomething()">
我是一個在導航欄左側的按鈕!
</button>
</ion-nav-buttons>
<ion-content>
這里是一些內容!
</ion-content>
</ion-view>
</ion-nav-view>
```
### API
`side`:`字符串`
在父`ionNavBar`中按鈕放置的位置。 可用: 'left' 或 'right'。
## ion-nav-back-button
在一個ionNavBar中創建一個按鈕。
當用戶在當前導航能夠后退時,將顯示后退按鈕。
### 用法
默認按鈕動作:
```
<ion-nav-bar>
<ion-nav-back-button class="button-clear">
<i class="ion-arrow-left-c"></i> 后退
</ion-nav-back-button>
</ion-nav-bar>
```
自定義點擊動作,用 $ionicNavBarDelegate:
```
<ion-nav-bar ng-controller="MyCtrl">
<ion-nav-back-button class="button-clear"
ng-click="canGoBack && goBack()">
<i class="ion-arrow-left-c"></i> 后退
</ion-nav-back-button>
</ion-nav-bar>
```
```
function MyCtrl($scope, $ionicNavBarDelegate) {
$scope.goBack = function() {
$ionicNavBarDelegate.back();
};
}
```
在后退按鈕上顯示上一個標題,也用$ionicNavBarDelegate。
```
<ion-nav-bar ng-controller="MyCtrl">
<ion-nav-back-button class="button-icon">
<i class="icon ion-arrow-left-c"></i>{{getPreviousTitle() || 'Back'}}
</ion-nav-back-button>
</ion-nav-bar>
```
```
function MyCtrl($scope, $ionicNavBarDelegate) {
$scope.getPreviousTitle = function() {
return $ionicNavBarDelegate.getPreviousTitle();
};
}
```
## nav-clear
nav-clear一個當點擊視圖上的元素時用到的屬性指令,比如一個 <a href> 或者一個 <button ui-sref>。
當點擊時,nav-clear將會導致給定的元素,禁止下一個視圖的轉換。這個指令很有用,比如,側欄菜單內的鏈接。
### 用法
下面是一個側欄菜單內添加了nav-clear指令的一個鏈接。點擊該鏈接將禁用視圖間的任何動畫。
```
<a nav-clear menu-close href="#/home" class="item">首頁</a>
```
## ion-nav-title
ion-nav-title 用于設置 ion-view 模板中的標題。
### 用法
```
<ion-nav-bar>
</ion-nav-bar>
<ion-nav-view>
<ion-view>
<ion-nav-title>
<img src="logo.svg">
</ion-nav-title>
<ion-content>
Some super content here!
</ion-content>
</ion-view>
</ion-nav-view>
```
## nav-transition
設置使用的過渡類型,可以是:ios, android, 和 none。
### 用法
```
<a nav-transition="none" href="#/home">Home</a>
```
## nav-direction
設置導航視圖中過渡動畫的方向,可以是forward, back, enter, exit, swap。
### 用法
```
<a nav-direction="forward" href="#/home">Home</a>
```
## $ionicNavBarDelegate
授權控制 ion-nav-bar 指令。
### 用法
```
<body ng-controller="MyCtrl">
<ion-nav-bar>
<button ng-click="setNavTitle('banana')">
Set title to banana!
</button>
</ion-nav-bar>
</body>
```
```
function MyCtrl($scope, $ionicNavBarDelegate) {
$scope.setNavTitle = function(title) {
$ionicNavBarDelegate.title(title);
}
}
```
### 方法
```
align([direction])
```
在瀏覽歷史中后退。
`event(可選)`:`DOMEvent`
事件對象(如來自點擊事件)
```
align([direction])
```
帶有按鈕的標題對齊到指定的方向。
`direction(可選)`:`字符串`
標題文字對齊的方向。可用: 'left', 'right', 'center'。 默認: 'center'。
**返回值:** 布爾值, 后退按鈕是否顯示。
```
showBar(show)
```
設置或獲取 ion-nav-bar 是否顯示。
`show`:`布爾值`
導航欄是否顯示。
**返回值:** 布爾值, 導航欄是否顯示。
```
showBackButton([show])
```
設置或獲取 ion-nav-back-button 是否顯示。
`show(可選)`:`布爾值`
是否顯示后退按鈕
```
title(title)
```
為ion-nav-bar設置標題。
`title`:`字符串`
顯示新標題。
## $ionicHistory
$ionicHistory 用于跟蹤用戶在 app 內的瀏覽記錄。
### 方法
```
viewHistory()
```
用于查看歷史記錄。
```
currentView()
```
app 的當前視圖。
```
currentHistoryId()
```
歷史堆棧的 ID,是當前視圖的父類容器。
```
currentTitle([val])
```
獲取或設置當前視圖的標題。
```
backView()
```
返回上次瀏覽的視圖。
```
backTitle()
```
獲取上次瀏覽的視圖的標題。
```
forwardView()
```
返回歷史堆棧中當前視圖的上一個視圖。
```
currentStateName()
```
返回當前狀態名。
```
goBack([backCount])
```
app 回退視圖,如果回退的視圖存在。
- ionic 入門
- ionic 簡介
- ionic 安裝
- ionic 創建 APP
- ionic CSS
- ionic 頭部與底部
- ionic 按鈕
- ionic 列表
- ionic 卡片
- ionic 表單和輸入框
- ionic Toggle(切換開關)
- ionic 單選框
- ionic Range
- ionic select
- ionic tab(選項卡)
- ionic 網格(Grid)
- ionic 顏色
- ionic icon(圖標)
- ionic JavaScript
- ionic 上拉菜單(ActionSheet)
- ionic 背景層
- ionic 下拉刷新
- ionic 復選框
- ionic 單選框操作
- ionic 切換開關操作
- ionic 手勢事件
- ionic 頭部和底部
- ionic 列表操作
- ionic 加載動作
- ionic 模型
- ionic 導航
- ionic 平臺
- ionic 浮動框
- ionic 對話框
- ionic 滾動條
- ionic 側欄菜單
- ionic 滑動框
- ionic 加載動畫
- ionic 選項卡欄操作