Question

所以我使用UI-Router来构建我的AngularJS应用程序。但是我很困惑URL路由在嵌套状态的情况下如何工作主要是由于UI-Router的wiki中提供的冲突想法（根据我的理解）。

第一个想法

因此，可能在下面使用抽象状态

第二个想法

正如文档（第一个想法）中给出的那样，只有在'abstract'的情况下，父状态的url才会被添加到子状态的url：在父状态上定义的true属性。

然而，文档（第二个想法）也提到了上面的默认功能。

对于同一个概念，上述两个想法是否相互冲突？或者我完全误解了他们？

Answer 1

嗯，文档声明是正确的。也许对某人不清楚 - 但是正确的。它只是说：

1）没有继承url: "..url..." 设置。这意味着，子状态赢了设置了url 与父相同的值。两个值都是独立的。

2）存在隐式url连接。子状态url （在地址栏中，而不是设置中）是从其所有祖先url构建的。

所以，文档是正确的。这个example is just for游戏......它展示了我们所知道的。孩子有不同的url 设置，然后是父。地址栏中的子状态url是根据其url 设置构建的 - 以父网址为前缀

// NON abstract
  .state('parent1', {
      abstract: false,
      url: "/parent1",
      templateUrl: 'tpl.html',
  })
  .state('parent1.child1', { 
      url: "/child1",
      templateUrl: 'tpl.html',
  })
// abstract
  .state('parent2', {
      abstract: true,
      url: "/parent2",
      templateUrl: 'tpl.html',
  })
  .state('parent2.child2', { 
      url: "/child2",
      templateUrl: 'tpl.html',
  })

url in href：

non abstract
<a href="#/parent1">
<a href="#/parent1/child1">
abstract
<a href="#/parent2"> - cannot navigate there - is abstract
<a href="#/parent2/child2">

Answer 2

他们只是试图在这个文档中展示概念，所以不要期待这里的实际例子。

这是ui路由器的常见概念。

抽象状态的行为。

1）你不能直接调用抽象状态，所以这里我们不能直接调用联系人状态

/ contsacts 此重定向到我们的默认状态

2）抽象状态应始终至少有一个子状态。所以我们可以在这里打电话

/ contact / list as contacts.list state

3）父状态模板必须

<div ui-view></div>

子状态将传播的指令。

ui-router

2 个答案: