角ui -路由器在相同的URL上的默认状态

This is going to be difficult to explain but I'll try.

这很难解释，但我会试一试。

I am using UI-router in an angular app and would like t use the following URLS:

我正在一个有棱角的应用程序中使用UI-router，我不想使用以下url:

/contacts
/contacts/{id}

When you visit the /contacts page it will get a list of contacts from the server and display them. When you go to /contacts/1 it will get the contact 1 record from the server and show it.

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

My code currently looks like this:

我的代码现在是这样的:

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

So far so good. but when you go to the second URL the parent is also activated so it's going to the server to get the list of contacts, even though they're not displayed, which is a waste.

目前为止一切都很顺利。但是当你转到第二个URL时父节点也被激活了所以它会转到服务器去获取联系人列表，即使它们没有显示出来，这是一种浪费。

I could set /contacts to "abstract:true" and use /contacts/list as the first URL, but that's not the URL I want to use and I do need to set a controller on the parent because I do have some logic I want to put in the parent (creating the navigation for that section).

我可以设置/联系人“文摘:真正的“和使用/联系人/列表作为第一个URL,但这并不是我想要的URL使用和我父母需要设置一个控制器,因为我确实有一些逻辑我想把在父(创建的导航部分)。

Ideally, when the user hits /contacts I'd like the parent state to activate (to create the navigation) and run a default child state to list the contacts without redirecting to another URL. If the user goes to /contacts/8 then It would still activate the parent state but not the default state so it never goes to the server to get the contacts.

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

I hope that makes sense. I've not been able to create a plunkr, but the Angular UI guys kindly created one which shows the imperfect solution above.

我希望这说得通。我还没能创造出一个柱塞，但是有棱角的UI设计人员创造了一个上面显示不完美解的。

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

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

1 个解决方案

#1

I could set /contacts to "abstract:true"

我可以将/联系人设置为"abstract:true"

That would be one part of the correct approach. A parent state should not load data that doesn't apply to a child, but your state tree doesn't have to reflect your URL structure exactly. For example:

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