Suppose you are developing a user profile navigation view. In this scenario you would probably define a template like the following:
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 (
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(
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.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.
1. Defining the root state and its view.
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
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.