Angular ui-router:容器视图和默认视图

Angular ui-router : Container view and Default view

本文关键字：视图 默认 ui-router Angular      更新时间：2023-09-26

我正在努力为下一个状态创建一个容器，将状态定义为视图，分为header, container, footer。

下一个状态作为一个例子是博客，但我不认为有办法把它放到视图中。

一个想法是把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

在上面更新的问题中，你已经使用了这个柱塞来展示你是如何使它工作的:

.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'

所以，现在又有了页眉和页脚视图，但它们确实不同于根(原始index.htm)。它们的绝对名称将是'header@home'和'footer@home' (如在代码片段中使用的) -并且似乎都在工作。

但那是多余的。除非我们将布局移动到某个'layout'状态和'layout.html'

  • Angular UI Router -有多个布局的嵌套状态
    • 嵌套状态或视图布局与左栏在ui-router?

为什么冗余?因为index.html已经在发挥(作为 root )并且它包含这些目标。它们的绝对名称是"header@"answers"footer@"。这才是我们应该走的路。

为了说清楚，有一个更新的plunker和它的片段:

.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',
});

点击此处查看更新

相关文章：