Nested Views VS Separate

Question

I'm trying to decide on an Angular Structure for my app. I started with the Angular Full Stack Generator.

In UI-Router, you can nest states. It seems logical for me to nest related states. ex: Registration, Registration.form, Registration.confirmation.... but those nested states seem to rely on each child view and parent view being viewed on the same page.

Meaning the parent will have an <ui-view> tag that will insert the child view when called.

Is it possible to have a nested state replace the parent?
Or do I have just make unnested states?
Or is this a case for an abstract state?

score 0 · Answer 1 · answered Apr 08 '15 at 04:39

There is a working example

Child replacing parent is almost "native" UI-Router solution. Let's have this state definitions:

.state('parent', {
    url: "/parent",
    templateUrl: 'tpl.html',
})
.state('parent.child', { 
    url: "/child",
    templateUrl: 'tpl.html',
    controller: 'ChildCtrl',
})

And this would be the tpl.html, in our case used for both states:

<div ui-view>
  <h3>current state name: <var>{{$state.current.name}}</var></h3>
   ...  
</div>

So, what we can see, parent root HTML element, does have attribute ui-view. That means, that this element also plays a role of a target for a child.

Check it in action here

Nested Views VS Separate

1 Answers1