使用具有不同 URL 的 UI-Router 多个状态答案

【问题标题】：Using UI-Router multiple states with different URLs使用具有不同 URL 的 UI-Router 多个状态
【发布时间】：2015-03-17 17:46:59
【问题描述】：

我正在尝试为我的设计师开发一个 UI，但在尝试让 UI-Router 和 Angular 以这种方式正常工作时遇到了一些问题。在主页上，我有 2 个部分，用户和组。主页的 URL 为 /home，我希望能够选择用户或组，并将 URL 分别更改为 /home/user/:id 或 /home/group/:id。问题是我希望嵌套视图直接出现在相应部分的下方。因此，如果他们选择了一个用户，它将在用户部分下方打开用户视图，反之亦然。

我认为这可以通过<div ui-view="users"></div> 和<div ui-view="groups"></div> 等多个视图来实现，但是使用它时没有状态感。无论 URL（状态）如何，视图都会自动呈现。

有没有办法通过在使用 2 个视图的同时保持状态来使用 ui-router 来实现这一点？

Plunker：http://plnkr.co/edit/vfz1l4GAdBdhkyC6zMgQ?p=preview

【问题讨论】：

是的，但它可能会变得复杂，你能设置一个 plunker 吗？这样我们就可以处理那个样本......
请重组您的问题以包含代码示例和“如您所见，A 正在发生，但我想要 B。”声明
在我尝试设置 plunker 之前，这是否完全受支持，或者您是说这需要 hack 才能工作？如果是这样，那我宁愿放弃设计并使用其他东西
据我所知，我不认为它是为那样工作而构建的，这听起来很老套。通常，一个 URL 具有一种状态。我推荐一种不同的方法。
不，不是黑客。它在文档上。很难在不了解您如何构建状态的情况下给出正确的示例，但请看一下：github.com/angular-ui/ui-router/wiki/Multiple-Named-Views 和 github.com/angular-ui/ui-router/wiki/…

标签： angularjs angular-ui-router

【解决方案1】：

您可以创建一个抽象状态来创建布局，然后将该状态作为父状态引用到其他状态。

这是plunker

  $stateProvider.state('home', {
abstract: true,
views: {
  '@': {
    templateUrl: 'home.html',
  },
  'user@home': {},
  'group@home': {
    templateUrl: 'group.html'
  }
}
}).state('root', {
  parent: 'home',
  url: '/',
  views: { . . }

}).state('home.user', {
  parent: 'home',
  url: '/user',
  views: {
    'user@home': {
      controller: 'UserController',
      templateUrl: 'user.html'
    },
    'group@home': {}
  }

})

【讨论】：

嗯，谢谢，我会试一试。你能解释一下根状态的需要是什么吗？
由于主状态是抽象的，它本身并不活跃。