The feature of multiple nested views in the ui-router is quite convenient as it allows for seamless transitions between different states within an application.
Sometimes, there may be a need to modify the URL while navigating through states, while at other times, maintaining the same URL might be preferable. It would be beneficial if the concept of state could be decoupled from routing and treated as optional.
If you want to see this functionality in action, check out the modified plunker available at this link. The example demonstrates how two states share the same URL with minor adjustments in the code snippets below:
.state('route1', {
url: "/route", // <---- URL IS SHARED WITH ROUTE2
views: {
"viewA": {
template: "route1.viewA"
},
"viewB": {
template: "route1.viewB"
}
}
})
.state('route2', {
url: "/route", // <---- URL IS SHARED WITH ROUTE1
views: {
"viewA": {
template: "route2.viewA"
},
"viewB": {
template: "route2.viewB"
}
}
})
While this setup seems to function properly without changing the URL, one might question the efficiency and redundancy in its implementation. Is this considered a validated approach in the context of ui-router?
It might enhance usability if omitting the url declaration from a state were permissible.
UPDATE: Contrary to previous assumptions, it turns out that omitting a url from a state is indeed possible. Check out the updated example at this plunker.
Further query: Is this unconventional usage officially endorsed or tested by the framework developers?