javascript - Angular ui-router: Can you change state without changing URL?

Question

The multiple nested views functionality of the ui-router is very nice - you can easily jump from one state of your app to another.

Sometimes you might want to change the URL, but sometimes not. I feel like the concept of state should be separate/optional from routing.

Here's a plunker that shows what I mean. This is a fork of one of the plunkers in the ui-router documentation, with 2 minor changes noted 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"
            }
        }
    })

This seems to work - the URL stays the same. Again, how much redundant work is done here? Is this an approved/tested usage?

It would be nice if you could omit the url from a state..

UPDATE: You can omit a url from a state. plunker

Update question: Is this an approved/tested usage?

Answer 1

You can absolutely have a state without a URL. In fact, none of your states need URLs. That's a core part of the design. Having said that, I wouldn't do what you did above.

If you want two states to have the same URL, create an abstract parent state, assign a URL to it, and make the two states children of it (with no URL for either one).