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

So I am using UI-Router to build my AngularJS app. However I am confused as to how the URL Routing works in case of nested states mainly due to the conflicting ideas (as per my understanding) provided in the wiki for UI-Router.

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

The first idea

第一个想法

Hence maybe abstract state is used below

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

The second idea

第二个想法

As given in the documentation (first idea), url of parent state is prepended to that of it's children only in case of 'abstract':true property defined on the parent state.

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

However the documentation (second idea) also mentions how the above is a default feature.

然而,文档(第二个想法)也提到了上述是如何默认功能。

Aren't the two ideas above conflicting for the same concept ? Or have I completely misunderstood them ?

对于同一个概念,上述两个想法不是冲突的吗?还是我完全误解了他们?

2 个解决方案

#1

Well, the documentation statements are correct. Maybe not clear for someone - but correct. It simply says:

那么,文档声明是正确的。也许对某人不清楚 - 但是正确的。它只是说:

1) No inheritance of url: "..url..." setting. It means, that child state won't have the url set with the same value as parent. Both values are independent.

1)没有url的继承:“..url ...”设置。这意味着,子状态不会将url设置为与父级相同的值。两个值都是独立的。

2) There is implicit url concatenation. Child state url (in address bar, not the setting) is built from all its ancestors url.

2)存在隐式URL连接。子状态URL(在地址栏中,而不是设置)是从其所有祖先URL构建的。

So, the documentation is correct. This example is just for play ... It shows what we know. Child has different url setting then parent. Child state url in address bar is build from its url setting - prefixed with parent(s) url

所以,文档是正确的。这个例子只是为了播放...它显示了我们所知道的。孩子有不同的网址设置然后父母。地址栏中的子状态URL是从其URL设置构建的 - 以父(ur)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:

href中的url:

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

#2

They are trying to show concept only in this doc,so don't expect actual example here.

他们试图只在这个文档中显示概念,所以不要指望这里有实际的例子。

This is common concept for ui router.

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

Behavior of abstract state.

抽象状态的行为。

1) You can not call abstract state directly, So here we can not call contacts state directly

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

/contsacts This redirect to our default state

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

2) Abstract state should have always at least one child state. So we can call here

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

/contact/list as contacts.list state

/ contact / list as contacts.list state

3) Parent state's template must have

3)父状态的模板必须具有

<div ui-view></div>

directive where child state will propagate.

子状态将传播的指令。

#1