0

AngularJS UI-Router Nested Views

This post demonstrates how to create nested views with UI-router.

Software Requirements

UI-Router and Nested Views

Before UI-Router can be used, you have to download it together with the main AngularJS library. Then include them in the main HTML file along with your AngularJS codes.

The most important concept when working with nested views is that your state’s name must the dot notation to represent some hierarchy of sub-states.

The dot notation

As mentioned earlier, using the dot notation in a state’s name makes the state part of some hierarchy of states that is used with nested views and ui-view.

Consider the following code snippet.

We have the following states – second, second.second-one, and second.second-two. From a straight-forward navigation perspective, we navigate in this order:

  1. Go to second state and a associated page is displayed
  2. From that page, display the contents of a page associated with eitherĀ  second.second-one or second.second-two

This is the simplest and most basic navigation as you would imagine. But you could directly use either second.second-one or second.second-two as if you’ve gone from step 1 to step 2. More on this later.

UI-view within a page with UI-view

From index.html, we have an ui-view:

If we choose the "Go to Second" link, the contents of second.html is displayed and it has these codes.

At this point, the content of ui-view depends on which link you click – "Display letters" or "Display numbers".

Notice the state change from index.html to second.html:

or

Therefore we need the following configuration.

Testing our SPA – Part 1

Testing our SPA – Part 2

We modified the index.html a bit to directly use either second.second-one or second.second-two.

Download the codes

https://github.com/Turreta/AngularJS-UI-Router-Nested-Views

With modified index.html

With modified index.html to directly use either second.second-one or second.second-two.