用ui-router中的左栏布局嵌套状态或视图？

我有以下布局：

边栏和标题栏将始终存在，虽然其内容是特定于上下文的。

我认为这里有两个select：嵌套状态（sidenav>标题栏>内容）或视图（如果我理解正确）。 无论我读过多lessvideo和文章，我仍然在努力让自己的头部缠绕在UI路由器上。

点击Sidenav会将一个状态（或视图）加载到Content中，并且Headerbar会根据加载到Content中的内容来调整其内容。

我的感觉是，嵌套状态似乎是最简单的直接方法，特别是在考虑inheritance时。

从另一个angular度来看，这些看起来可能是兄弟姐妹（尽pipeinheritance问题可能使我错了）。 我的观点是，这些观点将使我在未来能够有更多的灵活性。

当然ng-include和指令可以起到这个作用。

对于路由器来说是新的，可能有人给我正确的方向？ 我卡住的地方是加载主视图。 我希望我的用户在login后在内容部分看到他们的仪表板。然后，当用户从侧边栏导航时，如何将新元素加载到内容中？

Answer 1

如何devise场景的一种方式是1）侧栏，2）动作部分和3）主区域可以像这个实例中那样

首先是根状态。 这里是根状态命名'索引'。 这是抽象的，可以为我们做一些resolve 。 它不会影响子状态的命名，也不会扩展url（因为是未定义的）

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

第一个实际状态是list，它从parentinheritance，但是有一个属性parent: 'index' ，所以父名不影响状态名。

好处是，它可以inheritance很多解决的东西。 而且，对于所有其他的父状态，根状态可以加载一次

  .state('list', { parent: 'index', url: '/list', templateUrl: 'list.html', controller: 'ListCtrl' }) 

这是UI-Router的真正威力，因为现在我们可以看到孩子正在将东西注入两个地方 – 1）行动部分和2）主要区域

  .state('list.detail', { url: '/:id', views: { 'detail@index' : { templateUrl: 'detail.html', controller: 'DetailCtrl' }, 'actions@index' : { templateUrl: 'actions.html', controller: 'ActionCtrl' }, }, }) 

这样，我们可以在真实世界的场景中使用命名视图和多视图。 请不要忘记范围定义如何：

仅按视图层次结构进行范围inheritance

请记住，如果您的状态视图是嵌套的，范围属性只能沿着状态链inheritance。 范围属性的inheritance与嵌套状态无关，与嵌套视图（模板）无关。

完全可能的是，您的嵌套状态的模板在您的站点中的各种非嵌套位置处填充了ui-views。 在这种情况下，您不能期望在子状态视图内访问父状态视图的范围variables。

检查所有在这里的行动

Answer 2

我只想分享我的经验。 有

• 类似的问答： Angular UI Router – 具有多种布局的嵌套状态
• 并链接到工作的重击者

国家def的片段：

 $stateProvider .state('index', { 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',}, }, }) .state('index.list', { url: '/list', templateUrl: 'list.html', controller: 'ListCtrl' }) .state('index.list.detail', { url: '/:id', views: { 'detail@index' : { templateUrl: 'detail.html', controller: 'DetailCtrl' }, } 

简而言之，我使用嵌套方法 。

它与http://angular-ui.github.io/ui-router/sample/#/中的“核心示例”类似。; 它是分层的（实体列表/细节）

而且，我使用隐藏的晚餐根状态：

• 在这里检查细节在ui.router父状态更新parsing的对象
• 检查链接

这是处理安全相关的东西 – 曾经，并在所有的孩子国家共享：

 $stateProvider .state('root', { abstract: true, template: '<div ui-view></div>', resolve: {objectX : function() { return {x : 'x', y : 'y'};}}, controller: 'rootController', }) .state('home', { parent: "root", url: '/home', templateUrl: 'tpl.example.html', }) .state('search', { parent: "root", url: '/search', templateUrl: 'tpl.example.html', }) 

希望它有一点启发，因为UI-Router的function，我在多视图中看到，查看嵌套，范围inheritance和逻辑状态机背后