角UI路由器：容器视图和默认视图 [英] Angular ui-router : Container view and Default view

问题描述

我在努力创造下一个状态的容器中，定义的状态如视图，分为头，集装箱，页脚。

I am struggling to create a container for next states, defined the states as views, divided into header, CONTAINER, footer.

接下来的状态作为一个例子是博客，但我不认为它获得到视图的方式。

The next state as an example would be the blogs, but I do not see a way of getting it into the view.

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

One idea was to start the HOME view as standard, but also failed.

查看：

<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

Plunker Example: http://plnkr.co/edit/yRgqiAeEVQl2WVajGgG0?p=preview

推荐答案

在上面更新的问题，你使用的这个plunker显示你如何做它的工作：

In the updated question above, you've used this plunker to show how you made it working:

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

虽然这个解决方案的工作，它实际上是在不可以办法你/我们应该去。因为父状态的'家'，注入到未命名视图 itslef - templateUrl：index.html的

While that solution is working, it is in fact not a way you/we should go. Because the parent state 'home', injects into unnamed view itslef - templateUrl: 'index.html'

所以，现在有再次查看的标题和页脚，但他们不从根本上不同的（原 index.htm的）的。他们绝对名称是'头@家和页脚@家的（所用的int code段）的 - 和所有似乎是工作

So, now there are again views header and footer, but they do differ from the root (original index.htm). Their absolute name would be 'header@home' and 'footer@home' (as used int the code snippet) - and all seems to be working.

但是，这是多余的。除非我们将布局搬进了'布局'状态'的layout.html

But that is redundant. Unless we will move the layout into some 'layout' state and 'layout.html'

• 角UI路由器 - 嵌套国多种布局


• 嵌套状态或观看与UI的路由器leftbar布局？

• Angular UI Router - Nested States with multiple layouts
• Nested states or views for layout with leftbar in ui-router?

为什么多余的？因为 index.html的已经处于播放的（为 根 ）的，它包含这些目标。它们的绝对名字是'@头'和'尾@。这应该是要走的路。

Why redundant? Because index.html already is in play (as a root) and it contains these targets. their absolute name is 'header@' and 'footer@'. And that should be the way to go.

要清楚，有更新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',
});

检查更新 rel=\"nofollow\">

Check the update here

这篇关于角UI路由器：容器视图和默认视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！