Currently, I am faced with an issue while using angularjs in combination with angular ui routes. The problem arises when dealing with multiple URLs for a single route.
I have a state named "bookDetails" which corresponds to a book that has a unique id and name, allowing users to access it through either the id or name:
/books/:bookName
/books/id/:bookId
These two routes essentially point to the same state. However, due to limitations concerning the use of the same state for multiple routes, I had to split it into two separate states:
$stateProvider.state('bookByName', {
url: '/books/:bookName',
templateUrl: '/templates/book-details.html',
controller: bookController
})
.state('bookById', {
url: '/books/id/:bookId',
templateUrl: '/templates/book-details.html',
controller: bookController
});
Even though there is some code duplication involved, I can manage with it. The real challenge arises when there is another view associated with the book called "bookReaders". This view displays all the users who have read the book.
Ideally, I would like to have a "bookDetails" state and a sub-state within it for "bookReaders". However, due to the multiple routes for books, I am forced to create two additional states:
bookByName.bookReaders and bookById.bookReaders, along with duplicating the existing states as well.
What would be the recommended approach in handling such a scenario? Is there a way to avoid duplicating states?