Why give an "abstract: true" state a url?

Question

I've be fiddling around with ui-router today in trying to better understand the scaffolding in Ionic and one thing that I noticed was that they give the abstracted state of "tabs" a url.

The only times I've ever used abstract states, I used an empty string as the url and I notice that if I've ever accidentally attempted to navigate to an abstracted state (as opposed to the child state) I get the error:

Cannot transition to abstract state '[insertAbstractStateHere]'

edit:

"Moreover, in experimenting, when I try to assign a url to my abstract state (outside of Ionic) and still render the nested state views, I get a big goose egg. Nothing shows up at all."

the above quoted statement is false! I tried it again in Plunker and the nested states did show up.

 angular.module('routingExperiments', ['ui.router'])
      .config(function($urlRouterProvider, $stateProvider) {

    $stateProvider

      .state('abstractExperiment', {
        abstract: true,
        url: '', //<--- seems as if any string can go here.
        templateUrl: 'abstractExperiment.html'
      })
      .state('abstractExperiment.test1', {
        url: '/test1',
        templateUrl: 'abstractTest1.html'
      });
  });

Apparently I was indeed doing it wrong. So my new question is:

Is there any reason why one would use a named state as opposed to an empty string in employing abstract states, or is it just a style choice?

Solution

The reason you would use an abstract state is to keep your definition dry when you have a part of your url non-navigable. For example, say that you had a url scheme like the following:

/home/index
/home/contact

However, for whatever reason in your design, this url was invalid (i.e. no purpose for a page):

/home

Now you could simply create two states for this situation, with the complete urls, however then you would be writing /home/ twice, and the description is a bit more convoluted. The best idea instead is to create a home abstract parent of which the two other states are children (for ui-router docs):

$stateProvider
    .state('parent', {
        url: '/home',
        abstract: true,
        template: '<ui-view/>'
    })
    .state('parent.index', {
        url: '/index',
        templateUrl: 'index.html'
    })
    .state('parent.contact', {
        url: '/contact',
        templateUrl: 'contact.html'
    })

Just notice that inside the parent state, we assign a template whose only child is a ui-view. This ensures that the children are rendered (and might be why yours is appearing blank).

---

Sometimes you might notice the use of an abstract state with a blank url. The best use of this setup is when you need a parental resolve. For example, you may require some particular server data for a subset of your states. So instead of putting the same resolve function into each of your states, you could create a blank url parent with the desired resolve. It could also be useful if you want hierarchical controllers, where the parent has no use for a view (not sure why you would want this, but it is plausible).

Comments

[spb]

Thanks, Matt. Have you ever used an empty string where you have '/home', though? That's more the source of my confusion, at this point. Why do one as opposed to the other? It doesn't seem to make a difference.

[Matt Way]

Added extended info for you :)

[alphapilgrim]

@MattWay could you also set the .otherwise state to the abstract state? Or this not recommended.

[Yuriy Dyachkov]

Hello, thanks for the explanation! In some tutorial, I've seen a field parent: '<state name>' in child state options, why it is absent here, is ui-router able to map the relationship from state names using dot as separator? Sorry, I've just started to learn/use ui-router.

[Yuriy Dyachkov]

Silly me, the answer is barely on the front, yes it is able to use dot separator to establish states hierarchy