5-6 Angular ui-router多视图使用

ui-router多视图使用

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

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

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

2.配置路由

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