javascript - 同一 URL 上的 Angular UI 路由器默认状态

Question

这将很难解释，但我会尝试。

我在 Angular 应用程序中使用 UI-router 并希望使用以下 URLS:

/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 时，父级也被激活，所以它会去服务器获取联系人列表，即使他们没有显示，这是一种浪费。

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

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

我希望这是有道理的。我一直无法创建一个 plunkr，但是 Angular UI 人员友好地创建了一个，它显示了上面不完美的解决方案。

http://plnkr.co/edit/gmtcE2?p=preview

Answer 1

I could set /contacts to "abstract:true"

这将是正确方法的一部分。父状态不应加载不适用于子状态的数据，但您的状态树不必准确反射(reflect)您的 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"
})