I'm currently using UI-Router and trying to incorporate a subview into another view. Specifically, I want to display the "owner" view within the "dog" view. The following code accomplishes this:
Here is how my UI-Router configuration looks like:
.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 issue I am facing is with the current URL structure which is not ideal. To access a specific "dog," users need to navigate to /dog/dogId. However, I believe it would be more in line with REST principles if the URL was /dogs/dogId. The problem arises when I try changing the URL of 'dogAbstract' to /dogs as it conflicts with the existing "dogsList" page. It seems that I can only have one or the other.
Is there a way to configure the URLs so that I can have the list at /dogs and view an individual dog at /dogs/dogId? Any insights would be greatly appreciated.