代码之家 › 专栏 › 技术社区 › Marco Riesco

Angular ui路由器:容器视图和默认视图

angular-ui-router state angularjs javascript

Marco Riesco · 技术社区 · 11 年前

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

下一个例子是博客,但我看不到将其纳入视图的方法。

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

1 回复 | 直到 11 年前

Community Mohan Dere 9 年前

在上面更新的问题中,您使用了 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'

所以,现在又有观点了 收割台,收割台 和页脚 ,但它们确实与根不同 (原件 index.htm ) 。它们的绝对名称为'header@home'和'footer@home' (在代码段中使用) -一切似乎都在起作用。

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

为什么冗余?因为 index.html 已经在使用中 (作为 root ) 它包含这些目标。它们的绝对名称是“header@”和“footer@”。这应该是一条路。

要说清楚 an updated 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',
});

检查更新 here