Multiple Named Views in AngularJS

Now suppose that the content view will dynamically change as you switch from one aside navigation state to another and that the current top navigation state defines the view of the former. To represent this idea in a more graphic way, assume that you want to navigate the user inbox.

In that case, the content view will depend on which aside navigation state you are in (inbox, sent, archived, trash or new message). So, if you are in the sent state the content view will show all sent messages. Likewise, the aside navigation view will only depend on which top navigation state you are in (Dashboard, Reviews, Village or Inbox). So, if you are in the Dashboard state you will have a specific aside navigation view, with links that are different from the ones you would view from the inbox for example.

The challenge here is to reach an elegant solution considering that: my is the root state. my.messages is the abstract parent state. my.messages.inbox, my.messages.sent, my.messages.archived, my.messages.trash and my.messages.new are the child states. All child states share the same aside navigation view. For this reason the aside navigation controller and view should remain fixed, thereby avoiding any unnecessary reload.

The answer is to take advantage of the power of Angular-ui-router.

The solution

1. Defining the root state and its view.

a) profile-module.js

b) my-view.html: Defining the user profile view structure using multiple named views.

2. Defining the inbox abstract parent state.

Note that we have fixed the aside navigation view and allowed the contentview to change dynamically for all child states.

3. Defining inbox child states with their corresponding content view.

The conclusion

Angular ui-router is a very powerful tool and for this reason it should be widely exploited. For more information, please refer to the official site https://github.com/angular-ui/ui-router/wiki.