angular-ui-router 多視圖

文件結構：

- index.html                   
- app.js                        
- monitoring.html           
      - page1.html             
      - page2.html        
- search.html  

index.html （第一個路由）

1     <script type="text/javascript" src="jsLib/angular.js"></script>
2     <script type="text/javascript" src="jsLib/angular-ui-router.js"></script>
3 
4 <a ui-sref="monitoring">monitoring</a>
5 <a ui-sref="seach">seach</a>
6 
7 <div ui-view></div>

app.js

 1 var faceApp = angular.module('faceApp',['ui.router']);
 2 faceApp.config(function($stateProvider, $uilRouterProvider){
 3    $urlRouterProvider.otherwise('/monitoring') ;
 4    
 5    $stateProvider
 6         .state('monitoring',{
 7             url: '/monitoring',
 8             templateUrl: 'pages/monitoring.html',
 9             controller: function($state) {
10                 $state.go('monitoring.page1')//默認顯示出第一個tab
11             }
12         })
13         .state('monitoring.page1',{
14             url: '/page1',
15             templateUrl: 'pages/page1.html',
16             controller:  'Page1Ctrl'
17         })
18         .state('monitoring.page2',{
19             url: '/page2',
20             templateUrl: 'pages/page2.html',
21             controller:  'Page2Ctrl'
22         })
23         .state('search',{
24             url: '/search',
25             templateUrl: 'pages/search.html',
26             controller: 'SearchCtrl'
27         })
28 });

monitoring.html （添加第二個路由,第二級路由，嵌套在第一級路由中）

1 <a ui-sref=".page1">monitoring</a>
2 <a ui-sref=".page2">seach</a>
3 
4  <div ui-view></div>

ui-router 視圖嵌套時指定二級視圖顯示默認頁面:

     當跳轉到 monitoring 頁面時，monitoring 中的頁面默認爲空，要點擊了導航才能插入模板，須要使用 $state.go()來指向某個路由（代碼如上）

 

【二級視圖默認頁面】：若二級實圖有本身的控制器，能夠將二級視圖的主頁面和第一個子頁面設置爲同一個控制器，來達到設置默認頁面的方法。

$stateProvider
        .state('page',{
            url: '/page',
            templateUrl: 'pages/page.html',
            controller: 'PageCtrl'
        })
        .state('page.page1',{
            url: '/page1',
            templateUrl: 'pages/page1.html',
            controller: 'PageCtrl'
        })
        .state('page.page2',{
            url: '/page2',
            templateUrl: 'pages/page2.html',
            controller: 'Page2Ctrl'
        })