URL ui-路由器中嵌套状态的路由

Question

所以我正在使用 UI-Router 来构建我的 AngularJS 应用程序。但是，我对 URL 路由在嵌套状态下的工作方式感到困惑，这主要是由于 wiki 中为 UI-Router.

提供的相互矛盾的想法（根据我的理解）

第一个想法

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

第二个思路

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

但是文档（第二个想法）也提到了以上是默认功能。

以上两个想法是不是同一个概念冲突？还是我完全误解了他们？

Answer 1

他们试图仅在此文档中展示概念，所以不要指望这里有实际示例。

这是 ui 路由器的通用概念。

抽象状态的行为。

1) 不能直接调用abstract状态，所以这里不能直接调用contacts状态

/contsacts This redirect to our default state

2) 抽象状态应该总是至少有一个子状态。所以我们可以在这里调用

/contact/list as contacts.list state

3) 父状态的模板必须有

<div ui-view></div> 

子状态将传播到的指令。

Answer 2

好吧，文档陈述是正确的。也许对某人来说不清楚 - 但正确的。它只是说：

1) 没有继承 url: "..url..." 设置。这意味着，child 状态 不会 将 url 设置为 与 parent[=38= 相同的值].这两个值是独立的。

2) 存在隐式 url 串联。 Child 状态 url （在地址栏中，而不是设置） 是从其所有祖先 url.

构建的

因此，文档是正确的。这个 example is just for play ... 它展示了我们所知道的。 Child url 设置 与 parent 不同。地址栏中的 Child 状态 url 是根据其 url 设置 构建的 - 以 parent(s) 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 在 href:

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