UI-Router routes with abstract views conflicting

问题:

I am using UI-Router and need a subview in another view. I need to render the "owner" view within the "dog" view. The following works for that purpose:

UI-Router config is as follows

.state('dogAbstract', {
    url: '/dog/:dogId',
    abstract: true,
    templateUrl: 'client/dogs/views/dog.ng.html',
    controller: 'dogCtrl',
})
.state('dog', {
    url: "",
    parent: "dogAbstract",
    views: {
        "owner": {
            templateUrl: 'client/owners/views/owner.ng.html',
            controller: 'ownerCtrl'
        }
    }
})
.state('dogsList', {
    url: '/dogs',
    templateUrl: 'client/moves/views/dogs-list.ng.html',
    controller: 'dogsListCtrl',
})

The problem is that the url structure is suboptimal. Currently to access a specific "dog" you have to go to /dog/dogId. However, I would like it to be /dogs/dogId because that goes better with standard REST principles. Unfortunately, when I change the 'dogAbstract' url to /dogs, it conflicts with the "dogsList" page, and I can only have one or the other.

Is there a way to make it work so that I can have the list at /dogs and view an individual dog at /dogs/dogId?

回答1:

There is a working plunker

The point is to change the order of definition:

the less specific url first, the more detailed last

Because UI-Router uses the order of state declaration to set the priority. First which matches - is used:

// if /dogs is url, this will match
.state('dogsList', {
  url: '/dogs',
  ...
})

// if /dogs + something e.g. /dogs/1 - this ONLY will fit
.state('dogAbstract', {
  url: '/dogs/:dogId',
  ...
})

Check it in action here