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