Geometrical reflections of buildings

Multiple Named Views in AngularJS

Using Angular UI router

The problem

Suppose you are developing a user profile navigation view. In this scenario you would probably define a template like the following:

webpage basic architecture

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.

user inbox navigation software development

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 theDashboard 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 andmy.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.

Note: When setting multiple views you need to use the views property which is a javascript object. Views override state’s template properties. If you define a views object, your state’s templateUrl, template and templateProvider will be ignored.

3. Defining inbox child states with their correspondingcontent 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.