Support 'children' property on stateConfig

[marklagendijk]

Currently there are 3 ways of defining states:

1. Using 'dot' notation. For example name: 'contacts.list'
2. Using the parent property with the parent name as string. For example: parent: 'contacts'
3. Using the parent property with the parent object. For example parent: contacts (where 'contacts' is an stateObject)

To me it would make sense to also support a 'children' property. This would be used as follows:

$stateProvider
  .state('contacts', {
    children: [
      {
        name: 'list'
      }
    ]
  });

In the end it is all a matter of preference. I don't think it matters a lot which ways are supported. Currently I use the following function to support the method described above.

function setState(state){
    $stateProvider.state(state);

    if(state.children && state.children.length){
        state.children.forEach(function(childState){
            childState.parent = state;
            setState(childState);
        });
    }
}

What would be more useful is the fact that you would have the children property available afterwards. This way a state would know which children it has. Which would allow for things like:

<ul>
    <li ng-repeat='childState in $state.current'>
        <a ui-sref='childState.name'>{{ childState.name }}</a>
    </li>
</ul>

[timkindberg]

It's a decent idea. Not urgent though.

[nateabele]

If anything I think we would implement this as a getter method.

[timkindberg]

Is this a good example of something that could be added via the decorator?

[nateabele]

Not really, because when defining a parent, the child states wouldn't have been added yet. I just don't think it makes sense. Also, for this:

Currently there are 3 ways of defining states:

1. Using 'dot' notation. For example name: 'contacts.list'
2. Using the parent property with the parent name as string. For example: parent: 'contacts'
3. Using the parent property with the parent object. For example parent: contacts (where 'contacts' is an stateObject)

You really only ever use (1) & (3), and which one you use is going to be pre-determined for you based on whether you use string or object states.

[marklagendijk]

I have created a simple module with my helper function, ui-router.stateHelper. With this helper you can easily define nested states by using children properties.
The module is available via Bower.

[timkindberg]

@marklagendijk I added your helper to our guide as a recommended way to build state trees. Thanks for the contribution!