嵌套状态或观看与UI的路由器leftbar布局？ [英] Nested states or views for layout with leftbar in ui-router?
问题描述
我有以下布局：
补充工具栏与Headerbar永远是present尽管他们的内容是针对具体情况的。
Sidebar and Headerbar will always be present though their content is context-specific.
我觉得有两个选项：嵌套状态（sidenav> Headerbar>内容）或视图（如果我理解正确的）。我仍然在努力让我的头围绕UI路由器不管我有多少视频和文章阅读包裹着。
I think there are two options here: nested states (sidenav > Headerbar > Content) or with views (if I understand that correctly). I'm still struggling to get my head wrapped around ui-router regardless of how many videos and articles I've read.
点击Sidenav将一个国家（或视图）加载到内容和Headerbar将根据什么加载到内容调整的内容。
Clicking on Sidenav would load a state (or view) into Content and Headerbar would adjust its content based on whatever is loaded into Content.
我的感觉是，嵌套的状态看起来像最简单直接的方法，尤其是考虑继承时。
My sense is that nested states seem like the simplest direct approach, particularly when thinking about inheritance.
从另一个角度来看看着吧，这些看起来他们可能是兄弟姐妹（虽然继承问题，可能让我错了）。我的暗示是，意见可以让我更多的灵活性，在未来与分项和这样的。
Looking at it from another point of view, these seem like they could be siblings (although inheritance issues probably make me wrong). My inkling is that views would allow me more flexibility in the future with sub-items and such.
当然NG-包括和指令可以玩成这样。
And of course ng-include and directives could play into this.
作为新UI的路由器可能有人打我朝着正确的方向？凡我卡是加载主视图。我希望我的用户看到他们的仪表盘在内容部分，一旦他们登录。然后，我怎么加载新元素融入到内容的用户从侧边栏导航？
Being new to ui-router could someone slap me in the right direction? Where I'm stuck is loading the home view. I want my users to see their dashboard in the Content section once they log in. And then, how do I load new elements into Content as the user navigates from the Sidebar?
推荐答案
一个方法如何设计方案，其中包含1）边栏，2）操作部分; 3）主要区域也能像在的this工作示例
One way how to design scenario with 1) side bar, 2) action section and 3) main area could be like in this working example
首先在根状态。这是一个名为索引根状态。它是抽象的，能为我们做一些决心。它不影响孩子的状态的命名和不延长URL（因为是不确定的）
Firstly the root state. Here is root state named 'index'. It is abstract and could do some resolve for us. It does not effect child state naming and does not extend the url (because is undefined)
$stateProvider
.state('index', {
abstract: true,
//url: '/',
views: {
'@' : {
templateUrl: 'layout.html',
controller: 'IndexCtrl'
},
'top@index' : { templateUrl: 'tpl.top.html',},
'left@index' : { templateUrl: 'tpl.left.html',},
'main@index' : { templateUrl: 'tpl.main.html',},
},
})
第一次真正的状态列表，它的父的继承，但与属性父：索引，因此父名不影响国家名称。
The first real state is list, and it inherits from parent but with an attribute parent: 'index', so the parent name is not effecting the state name.
好处是，它可以继承很多东西解决。此外，根状态可以加载一次，其他所有的父的状态
Advantage is, that it could inherit lot of resolved stuff. Also, the root state could be loaded once, for all other parent states
.state('list', {
parent: 'index',
url: '/list',
templateUrl: 'list.html',
controller: 'ListCtrl'
})
这是UI的路由器的实权，因为现在我们可以看到孩子的东西注入到两个地方 - 1）操作部分; 2）主要区域
This is the real power of UI-Router, because now we can see that child is injecting stuff into two places - 1) action section and 2) main area
.state('list.detail', {
url: '/:id',
views: {
'detail@index' : {
templateUrl: 'detail.html',
controller: 'DetailCtrl'
},
'actions@index' : {
templateUrl: 'actions.html',
controller: 'ActionCtrl'
},
},
})
这样，我们就可以使用在现实世界中的场景命名视图和多意见。请过目不忘的范围定义如何去：
This way, we can use named views and multi views in real world scenario. Please, never forget how the scope definition goes:
记住，如果你的国家的意见是嵌套作用域属性只继承下来的状态链。作用域属性的继承无关，与你的国家的嵌套和一切与你的视图（模板）嵌套。
Keep in mind that scope properties only inherit down the state chain if the views of your states are nested. Inheritance of scope properties has nothing to do with the nesting of your states and everything to do with the nesting of your views (templates).
这是完全可能的，你嵌套状态的模板填充在站点内的各种非嵌套位置UI的意见。在这种情况下，你不能指望子女国的意见内访问的父状态视图的范围变量。
It is entirely possible that you have nested states whose templates populate ui-views at various non-nested locations within your site. In this scenario you cannot expect to access the scope variables of parent state views within the views of children states.
Check that all in action here
这篇关于嵌套状态或观看与UI的路由器leftbar布局？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
