
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到。
頁面加載都是通過URLs配置的。在Angular中創建模板最一個簡單的方式就是直接將他放到html模板文件中並且用<script type="text/ng-template">包含。
所以這也是一種方式將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>

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>

<body ng-app="starter"> <!-- 當我們瀏覽時，導航欄會隨之更新。 --> <ion-nav-bar class="bar-positive nav-title-slide-ios7"> </ion-nav-bar> <!-- 初始化時渲染視圖模板 --> <ion-nav-view></ion-nav-view> </body>

<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>

<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 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>

<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);
}
}


