CODEWITHSUNDEEP
javascriptangularjsangular-uiangular-ui-router
Michael Lewis
Michael Lewis

Reputation: 4302

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

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?

Upvotes: 29

Views: 25688

Answers (2)

James-Jesse Drinkard
James-Jesse Drinkard

Reputation: 15703

To add to the other answer, Multiple Named Views do not use a URL.

From the docs:

If you define a views object, your state's templateUrl, template and templateProvider will be ignored. So in the case that you need a parent layout of these views, you can define an abstract state that contains a template, and a child state under the layout state that contains the 'views' object.

The reason for using named views is so that you can have more than one ui-view per template or in other words multiple views inside a single state. This way, you can change the parts of your site using your routing even if the URL does not change and you can also reuse data in different templates because it's a component with it's own controller and view.

See Angular Routing using ui-router for an in-depth explanation with examples.

Upvotes: 0

Nate Abele
Nate Abele

Reputation: 5770

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).

Upvotes: 41

Related Questions