Angular ui-router：容器视图和默认视图答案

【问题标题】：Angular ui-router : Container view and Default viewAngular ui-router：容器视图和默认视图
【发布时间】：2015-09-25 13:05:11
【问题描述】：

我正在努力为下一个状态创建一个容器，将状态定义为视图，分为页眉、容器、页脚。

例如，下一个状态是博客，但我没有看到将其放入视图的方法。

一个想法是作为标准启动 HOME 视图，但也失败了。

查看：

<main>

    <header ui-view="header"></header>
    <content ui-view="home"></content>
    <footer ui-view="footer"></footer>

</main>

状态：

.state('home',{
        url:'/',
        data: {
            pageTitle: 'Home'
        },
        views: {
            '': {
                templateUrl: 'content/index.html',
            },
            'header@home': {
                templateUrl: 'content/templates/header.html',
                controller: 'HeaderController',
                cache: false
            },
            'home@home': {
                templateUrl: 'content/templates/home.html',
                controller: 'IndexController',
                cache: false
            },
            'footer@home': {
                templateUrl: 'content/templates/footer.html',
                //controller: 'FooterController',
                cache: false
            }
        }
    })

.state('home.blog',{
        url         : '/blog',
        templateUrl : 'content/templates/blog.html',
        controller  : 'BlogController',
        data: { pageTitle: 'Blog' },
        access: {requiredLogin: false}
    })

成功！ :)

Plunker 示例：http://plnkr.co/edit/yRgqiAeEVQl2WVajGgG0?p=preview

【问题讨论】：

页眉和页脚是全局的吗？如果是这样可以使 home 成为父状态，并且只更改子状态中的内容视图
是的，它是全球性的。我试图按照他的提示进行操作，但仍然无法在视图之间转换。我将创建一个 Plunker
Plunker：plnkr.co/edit/yRgqiAeEVQl2WVajGgG0?p=preview

标签： javascript angularjs state angular-ui-router

【解决方案1】：

在上面更新的问题中，您使用了this plunker to show 是如何使其工作的：

.state('home',{
    url:'',
    abstract: true,
    views: {
        '': {
            templateUrl: 'index.html'    // this
        },
        'header@home': {
            templateUrl: 'header.html'

        },
        'footer@home': {
            templateUrl: 'footer.html'
        }
    }
})
.state('home.index',{
    url         : '/',
    templateUrl : 'home.html'
})
.state('home.blog',{
    url         : '/blog',
    templateUrl : 'blog.html',
});

虽然该解决方案有效，但实际上不是您/我们应该采用的方式。因为父状态 'home'，注入到未命名视图 itslef - templateUrl: 'index.html'

所以，现在又出现了 header 和 footer 视图，但它们确实不同于根 （原始 index.htm）。它们的绝对名称将是“header@home”和“footer@home”（在代码 sn-p 中使用） - 一切似乎都在工作。

但这是多余的。除非我们将布局移动到某种“布局”状态和“layout.html”

为什么要冗余？因为index.html 已经在发挥作用（作为root），它包含这些目标。它们的绝对名称是“header@”和“footer@”。这应该是要走的路。

为了明确，有an updated plunker及其sn-ps：

.state('home',{
    url:'',
    abstract: true,
    views: { 
        '': {
            template: '<div ui-view=""></div>'
        },
        'header': {
            templateUrl: 'header.html'

        },
        'footer': {
            templateUrl: 'footer.html'
        }
    }
})
.state('home.index',{
    url         : '/',
    templateUrl : 'home.html'
})
.state('home.blog',{
    url         : '/blog',
    templateUrl : 'blog.html',
});

查看更新here

【讨论】：