angular-ui-router 多视图

文件结构：

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

index.html （第一个路由）

    <script type="text/javascript" src="jsLib/angular.js"></script>
    <script type="text/javascript" src="jsLib/angular-ui-router.js"></script>

<a ui-sref="monitoring">monitoring</a>
<a ui-sref="seach">seach</a>

<div ui-view></div>

app.js

var faceApp = angular.module('faceApp',['ui.router']);
faceApp.config(function($stateProvider, $uilRouterProvider){
   $urlRouterProvider.otherwise('/monitoring') ;
   
   $stateProvider
        .state('monitoring',{
            url: '/monitoring',
            templateUrl: 'pages/monitoring.html',
            controller: function($state) {
                $state.go('monitoring.page1')//默认显示出第一个tab
            }
        })
        .state('monitoring.page1',{
            url: '/page1',
            templateUrl: 'pages/page1.html',
            controller:  'Page1Ctrl'
        })
        .state('monitoring.page2',{
            url: '/page2',
            templateUrl: 'pages/page2.html',
            controller:  'Page2Ctrl'
        })
        .state('search',{
            url: '/search',
            templateUrl: 'pages/search.html',
            controller: 'SearchCtrl'
        })
});

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

<a ui-sref=".page1">monitoring</a>
<a ui-sref=".page2">seach</a>

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