29

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?

Michael Lewis
  • 4,252
  • 6
  • 28
  • 39

2 Answers2

41

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

extempl
  • 2,987
  • 1
  • 26
  • 38
Nate Abele
  • 5,771
  • 32
  • 27
  • 7
    [Docs for abstract states](https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views#abstract-states) – Michael Lewis Apr 01 '14 at 18:33
  • 1
    Could you explain why you wouldn't do it like Mike Lewis did in his example? We are using this in our production system with no problems. It is an SPA with a behavior like a desktop application. For downward compatibility with non HTML5 capable browsers we are using parameters for feeding the history cache, but thats the only reason we are changing the query string. So we have not seen any downsides, but it's easier to declare states without a root abstract parent state. – Sebastian Aug 15 '14 at 12:11
  • I mean without using a URL parameter in state. – Sebastian Aug 15 '14 at 12:28
  • Is it possible to use abstract states for, for example, 404 page without changing ANY url which is 404? – extempl Oct 04 '15 at 09:34
  • I wouldn't do it that way because using identical URLs for different states is ambiguous, and we don't make any guarantees about state definition order and URL matching, so that could easily break across versions. – Nate Abele Jul 10 '17 at 13:57
0

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.

James Drinkard
  • 15,342
  • 16
  • 114
  • 137