ui-router多视图使用

• 开发者可以在一个状态中设置多个有名称的视图。该功能在ui-router中很强大，开发者可以在同一个模板中改变和切换不同的视图。

• 如果设置了视图选项，则该状态的‘template’，‘templateUrl’及‘templateProvider’将被忽略。如果想在路由里包含父级模板，就需要创建一个包含模板的抽象模板。

1.设置占位符,绑定视图

<div class="header" ui-view="head"></div>
<div class="content">
    <div class="content_l" ui-view="left"></div>
    <div class="content_r" ui-view="right"></div>
</div>

2.配置路由

app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
            $stateProvider.state('index', {
                url:'/index',
                views:{
                    head:{
                        template:'<h1>头部</h1>'
                    },
                    left:{
                        template:'<h1>左边</h1>'
                    },
                    right:{
                        template:'<h1>右边</h1>'
                    }
                }
            });
            $urlRouterProvider.otherwise('/index');
        }]);