ionic之ui-view巢狀檢視配置路由
實現的效果是點選左側導航，切換右側檢視內容。
首先建立一個固定檢視的程式碼片段檔案，這個這個程式碼片段分為兩塊區域，一塊為左側導航固定內容，一塊為右側更換內容的ui-view檢視
<body>
<h1>歡迎來到郵箱</h1>
<div class="row">
<div class="col col-33">
<ion-list>
<ion-item ui-sref="sider.home">收件箱</ion-item>
<ion-item ui-sref="sider.detail">發件箱</ion-item>
</ion-list>
</div>
<div class="col">
<div ui-view></div>
</div>
</div>
</body>
在完整的HTML檢視承載檔案中建立一個主ui-view檢視
<body>
<ion-header-bar class="bar-balanced" align-title="center">
<h1 class="title">專案首頁頭</h1>
</ion-header-bar>
<ion-content>
<div ui-view> </div>
</ion-content>
<ion-footer-bar class="bar-balanced">
<h1 class="title">專案首頁尾</h1>
</ion-footer-bar>
</body>
配置路由，相對於普通路由配置而言，就是在配置每個要載入到右側區域的內容程式碼片段檔案時，路由名稱前加上固定頁面的路由配置名稱
<script>
var app = angular.module('myApp', ['ionic']);
app.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider .state("sider", { //配置固定導航程式碼片段路由
url: '/mySider',
templateUrl: 'template/sider.html',
})
.state("sider.home", { //配置右側更換內容的路由，注意在路由名稱前加上固定導航程式碼片段路由的名稱
url: '/myHome',
templateUrl: 'template/main.html',
})
.state("sider.detail", { //配置右側更換內容的路由，注意在路由名稱前加上固定導航程式碼片段路由的名稱
url: '/myDetail/:id',
templateUrl: 'template/detail.html',
});
$urlRouterProvider.otherwise('mySider') //配置異常處理，當url錯誤時自動跳轉到指定的頁面
})
</script>