角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'
- 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屋!