Angularjs ui路由器中带有leftbar的布局的嵌套状态或视图？

我的布局如下：

侧边栏和标题栏将始终存在，尽管它们的内容是特定于上下文的

我认为这里有两个选项：嵌套状态（sidenav>Headerbar>Content）或视图（如果我理解正确的话）。不管我读了多少视频和文章，我仍然在努力让自己的头脑集中在ui路由器上

单击Sidenav会将一个状态（或视图）加载到内容中，Headerbar会根据加载到内容中的内容调整其内容

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

从另一个角度来看，他们似乎是兄弟姐妹（尽管继承问题可能让我错了）。我的想法是，这些观点将使我在未来的子项目等方面有更大的灵活性

当然，ng include和指令也可以发挥作用

---

作为ui路由器的新手，有人能给我一个正确的方向吗？我被卡住的地方是加载主视图。我希望我的用户登录后在内容部分看到他们的仪表板。然后，当用户从侧边栏导航时，如何将新元素加载到内容中？

我只想分享我的经验。有

• 类似问答：
• 和一个链接

state 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'
          },
        }

简而言之，我确实使用了嵌套方法

它类似于此处提供的“核心示例”。它是分层的（实体列表/详细信息）

更重要的是，我使用隐藏的超级根状态：

• 请在此处查看详细信息

处理与安全相关的内容-一次，并在所有子州之间共享：

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

$stateProvider
.state（'根'{
摘要：没错，
模板：“”，
解析：{objectX:function（）{return{x:'x'，y:'y'}；}}，
控制器：“rootController”，
})
.州（“家”{
父项：“根”，
url:“/home”，
templateUrl:'tpl.example.html'，
})
.state（'搜索'{
父项：“根”，
url:“/search”，
templateUrl:'tpl.example.html'，
})

---

希望它能对这一点有所启发，因为我在多视图、视图嵌套、范围继承和逻辑状态机背后看到的UI路由器的威力，一种方法是如何设计具有1）侧栏、2）操作部分和3）主区域的场景，就像

首先是根状态。这是名为“索引”的根状态。它是抽象的，可以为我们解决一些问题。它不影响子状态命名，也不扩展url（因为未定义）

第一个实际状态是list，它继承自父级，但具有属性

parent:“index'

，因此父级名称不影响状态名称

优点是，它可以继承很多已解决的内容。此外，对于所有其他父状态，根状态可以加载一次

这就是UI路由器的真正威力，因为现在我们可以看到，child正在向两个地方注入东西——1）操作部分和2）主区域

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

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

请记住，如果您的状态视图是嵌套的，则范围属性仅继承状态链。范围属性的继承与状态的嵌套无关，而与视图（模板）的嵌套有关

完全可能存在嵌套状态，其模板在站点中的各种非嵌套位置填充ui视图。在这种情况下，您不能期望在子状态的视图中访问父状态视图的范围变量

---

检查所有的功能是否正常

谢谢，Radim。这是一个深思熟虑、清晰明了的回答。我要花一整天或者尽可能多的时间才能把这件事弄清楚。我仍然有一些问题，希望在完成这项工作后，我能找到答案。例如，在第一个代码片段中，我假设layout.html有3个视图（top、left、main）。因此，我假设当我转到index.list时，它将替换layout.html，而在我的用例中，我只想替换主视图并更新顶部和左侧的$scope项。我的理解正确吗？我决定创建一个全新的plunker和完整的工作示例。我用另一个答案来描述这种方法。希望这将有助于了解UI路由器是多么强大。。。祝你好运这帮了我很大的忙谢谢你。最后的几点意见：1）Plunker不再工作，但我在我的本地电脑上使用了它。你知道为什么现在不行吗？2） 我假设模板名称（app.js中的第17-19行）后面的“，”是正确的输入错误？3） 我不知道list.html是如何加载到tpl.left.html的。你能澄清一下吗？事实上我现在明白了。再次感谢。Radim，你能发布每个州应该访问的URL吗？从这个例子中我不清楚。@SaqibAli检查答案中的例子。在那辆破车里。。单击右上角的图标。。。“在单独的窗口中启动预览”。。一旦状态更改，您将看到任何url

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

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