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

Question

我有以下布局：

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

我认为这里有两个选项：嵌套状态（sidenav > Headerbar > Content）或带有视图（如果我理解正确的话）。无论我阅读了多少视频和文章，我仍然在努力思考 ui-router。

单击 Sidenav 会将状态（或视图）加载到内容中，而页眉栏会根据加载到内容中的内容调整其内容。

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

从另一个角度来看，他们似乎是兄弟姐妹（尽管继承问题可能让我错了）。我的想法是，视图会让我在未来使用子项目等时更加灵活。

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

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

Answer 1

我只是想分享我的经验。有

类似问答：Angular UI Router - Nested States with multiple layouts
和一个linkto working plunker

状态定义的片段：

$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/#/ 可用的 "core example" 相似。它是分层的（实体列表/详细信息）

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

在此处查看详细信息Updating resolved objects in ui.router parent states
examle link

它正在处理与安全相关的事情 - 一次，并在所有子状态之间共享：

$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-路由器的强大功能

Answer 2

如何使用 1) 侧边栏、2) 动作部分和 3) 主要区域设计场景的一种方法可能类似于 this working example

首先是root状态。这是名为 'index' 的根状态。它是抽象的，可以为我们做一些 resolve。它不影响 child state 命名并且不扩展 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但是有一个属性parent: 'index'，所以parent名字是不影响州名。

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

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

这就是 UI-Router 的真正威力，因为现在我们可以看到 child 正在向两个地方注入东西 - 1) 动作部分和 2) 主要区域

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

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

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

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

Nested states or views for layout with leftbar in ui-router?

angularjs

angular-ui-router

Scope Inheritance by View Hierarchy Only