Javascript 同一URL上的角度UI路由器默认状态

这很难解释，但我会尽力的

我正在angular应用程序中使用UI router，希望不要使用以下URL：

/contacts
/contacts/{id}

当您访问/contacts页面时，它将从服务器获取联系人列表并显示它们。当您转到/contacts/1时，它将从服务器获取联系人1记录并显示它

我的代码当前如下所示：

.state('contacts', {
    url: "/contacts",
    templateUrl: "templates/contacts.tpl.html",
    controller: "ContactsCtrl"
})
.state('contacts.contact', {
    url: "/{contactID}",
    templateUrl: "templates/contact.tpl.html",
    controller: "ContactCtrl"
})

到目前为止还不错。但是，当您转到第二个URL时，父URL也被激活，因此它将转到服务器以获取联系人列表，即使这些联系人没有显示出来，这是一种浪费

我可以将/contacts设置为“abstract:true”，并使用/contacts/list作为第一个URL，但这不是我想要使用的URL，我确实需要在父级上设置一个控制器，因为我确实有一些逻辑要放在父级中（为该部分创建导航）

理想情况下，当用户点击/联系人时，我希望父状态激活（以创建导航），并运行默认子状态以列出联系人，而无需重定向到其他URL。如果用户转到/contacts/8，那么它仍然会激活父状态，但不是默认状态，因此它永远不会转到服务器获取联系人

我希望这是有道理的。我还不能创建一个plunkr，但是Angular UI的家伙们很友好地创建了一个，它显示了上面不完美的解决方案

我可以将/contacts设置为“abstract:true”

这将是正确方法的一部分。父状态不应加载不适用于子状态的数据，但您的状态树不必准确反映URL结构。例如：

.state('contacts', {
    abstract: true,
    url: "/contacts",
    /* Various other settings common to both child states */
})
.state('contacts.list', {
    url: "", // Note the empty URL
    templateUrl: "templates/contacts.tpl.html",
    controller: "ContactsCtrl"
})
.state('contacts.item', {
    url: "/{id}",
    templateUrl: "templates/contact.tpl.html",
    controller: "ContactCtrl"
})

---

“注意空URL”-非常棒。我没有意识到，你仍然可以把逻辑控制器在一个抽象的状态。我以为它只是一个占位符。+1，但这只在我以抽象状态添加

template:

时起作用（或

template:用于支持旧IE版本）。也许这曾经适用于旧版本的ui路由器，但我认为这个答案应该更新，以包括我提到的内容（但我将把它留给你，以防我做了一些愚蠢的事情，让它停止工作，就像你有它一样…）。