Multiple Named Views in AngularJS

Using Angular UI router

Sharing is caring!

by Fernando Buccella

08/25/2015

The problem

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 (inboxsentarchivedtrash 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 (DashboardReviewsVillage 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.sentmy.messages.archivedmy.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.

"
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 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.

More articles to read

Previous blog post

Enterprise

09/24/2015

Docker everything

Read the complete article

Next blog post

Web Technologies

08/10/2015

Build responsive websites more easily

Read the complete article