angularjs - 在ui-router中使用leftbar进行布局的嵌套状态或 View ？

Question

我有以下布局:



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

我认为这里有两个选项:嵌套状态(sidenav > Headerbar > Content)或带有 View (如果我理解正确的话)。不管我读了多少视频和文章，我仍然在努力让我的头脑围绕着 ui-router。

单击 Sidenav 会将状态(或 View )加载到 Content 中，而 Headerbar 将根据加载到 Content 中的任何内容调整其内容。

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

从另一个 Angular 来看，这些看起来像是 sibling (尽管继承问题可能让我错了)。我的想法是， View 将使我在 future 的子项目等方面具有更大的灵 active 。

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

作为 ui-router 的新手，有人可以朝正确的方向扇我一巴掌吗？我被困的地方是加载主视图。我希望我的用户在登录后在内容部分看到他们的仪表板。然后，当用户从侧边栏导航时，如何将新元素加载到内容中？

Answer 1

使用 1) 侧栏、2) Action 部分和 3) 主要区域来设计场景的一种方法可能类似于 this working example
首先是 根状态。这是名为“索引”的根状态。它是抽象的，可以做一些 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',},
        },
      })

第一个真实状态是列表，它继承自父级，但具有属性 parent: 'index' ，因此父名称不会影响州名称。
优点是，它可以继承很多已解决的东西。此外，对于所有其他父状态，根状态可以加载一次

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

这是 UI-Router 的真正威力，因为现在我们可以看到 child 正在向两个地方注入(inject)东西 - 1) action section 和 2) main area

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

这样，我们可以在现实世界场景中使用命名 View 和多 View 。请永远不要忘记范围定义是如何进行的:
Scope Inheritance by View Hierarchy Only

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).

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.

检查所有操作 here