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.

end

Previous Post

09/24/2015

DevOps

Docker everything

Next Post

08/10/2015

Front-end

Build responsive websites more easily

Small enough to care,
big enough to get the job done

La Plata, ARGENTINA

Av. 13 #99, Offices 201 & 204

Neuquén, ARGENTINA

Independencia 596, Edificio Fidtech

Paris, FRANCE

24 Cour des Petites Écuries, 75010

© 2021

NAN

LABS. All Rights Reserved.