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

Contents

1 Software Requirements
2 UI-Router and Nested Views
- 2.1 The dot notation
- 2.2 UI-view within a page with UI-view
3 Testing our SPA – Part 1
4 Testing our SPA – Part 2
5 Download the codes
- 5.1 With modified index.html

Software Requirements

Windows 10
Notepad++ or Brackets
AngularJS 1.6.2
UI-Router 0.4.2
Main HTML must be HTML5-compliant (optional)

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

[wp_ad_camp_1]

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.

...
         // The "second" route uses the content of second.html for display
        var second = {
            name: 'second',
            url: '/second',
            templateUrl: 'pages/second.html',
            controller: 'secondController',
        };
        
        // First nested view in second.html for display
        var second1 = {
            name: 'second.second-one',
            url: '/second-one',
            templateUrl: 'pages/second-first.html',
            controller: function($scope) {
                $scope.nestedViewData = 'This is the second-first.html page';
            }
        };
        
        // Second nested view in second.html for display
        var second2 = {
            name: 'second.second-two',
            url: '/second2',
            templateUrl: 'pages/secondsecond.html',
            controller: function($scope) {
                $scope.nestedViewData = 'This is the secondsecond.html page';
            }
        };
        
         $stateProvider.state(main);
         $stateProvider.state(second);
         $stateProvider.state(second1);
         $stateProvider.state(second2);

         // Set the default or initial URL
         $urlRouterProvider.otherwise("/");
...

...

// The "second" route uses the content of second.html for display

var second = {

url: '/second',

templateUrl: 'pages/second.html',

controller: 'secondController',

};

// First nested view in second.html for display

var second1 = {

url: '/second-one',

templateUrl: 'pages/second-first.html',

controller: function($scope) {

$scope.nestedViewData = 'This is the second-first.html page';

}

};

// Second nested view in second.html for display

var second2 = {

url: '/second2',

templateUrl: 'pages/secondsecond.html',

controller: function($scope) {

$scope.nestedViewData = 'This is the secondsecond.html page';

}

};

$stateProvider.state(main);

$stateProvider.state(second);

$stateProvider.state(second1);

$stateProvider.state(second2);

// Set the default or initial URL

$urlRouterProvider.otherwise("/");

...

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

[wp_ad_camp_2]

Go to second state and a associated page is displayed
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:

<!DOCTYPE html>
<html lang="en" data-ng-app="myapp">
    <head>
        <meta charset="utf-8">
        <title>Using UI-Router</title>
        <meta name="description" content="Using UI-Router">        
        <script src="js/angular.min.js"></script>
        <script src="js/angular-ui-router.min.js"></script>
        <script src="js/myapp.js"></script>
    </head>
    <body>       
        <ul>
            <li><a ui-sref="main" ui-sref-active="active">Go to Home</a></li>
            <li><a ui-sref="second" ui-sref-active="active">Go to Second</a></li>
        </ul>
        
        <h1>Watch the content below changes</h1>
        <div style="border-style: dotted;padding: 10px 10px 10px">
            <ui-view></ui-view>
        </div>        
    </body>
</html>

<!DOCTYPE html>

<head>

<title>Using UI-Router</title>

</head>

<body>

<ul>

<li><a ui-sref="second" ui-sref-active="active">Go to Second</a></li>

</ul>

<h1>Watch the content below changes</h1>

<ui-view></ui-view>

</div>

</body>

</html>

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

<div>
    <h1>This is the {{name}} page - 2nd PAGE</h1>
    
    <p>Click any of the links below</p>
    <ul>
        <li><a ui-sref=".second-one" ui-sref-active="active">Display letters</a></li>
        <li><a ui-sref=".second-two" ui-sref-active="active">Display numbers</a></li>
    </ul>
    <div style="border-style: dotted; padding: 10px 10px 10px">
        <ui-view></ui-view>
    </div>
</div>

<div>

<p>Click any of the links below</p>

<ul>

<li><a ui-sref=".second-one" ui-sref-active="active">Display letters</a></li>

<li><a ui-sref=".second-two" ui-sref-active="active">Display numbers</a></li>

</ul>

<ui-view></ui-view>

</div>

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

[wp_ad_camp_3]

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

second -> .second-one

1	second -> .second-one

second -> .second-two

1	second -> .second-two

Therefore we need the following configuration.

...
         // The "second" route uses the content of second.html for display
        var second = {
            name: 'second',
            url: '/second',
            templateUrl: 'pages/second.html',
            controller: 'secondController',
        };
        
        // First nested view in second.html for display
        var second1 = {
            name: 'second.second-one',
            url: '/second-one',
            templateUrl: 'pages/second-first.html',
            controller: function($scope) {
                $scope.nestedViewData = 'This is the second-first.html page';
            }
        };
        
        // Second nested view in second.html for display
        var second2 = {
            name: 'second.second-two',
            url: '/second2',
            templateUrl: 'pages/secondsecond.html',
            controller: function($scope) {
                $scope.nestedViewData = 'This is the secondsecond.html page';
            }
        };
...

...

// The "second" route uses the content of second.html for display

var second = {

url: '/second',

templateUrl: 'pages/second.html',

controller: 'secondController',

};

// First nested view in second.html for display

var second1 = {

url: '/second-one',

templateUrl: 'pages/second-first.html',

controller: function($scope) {

$scope.nestedViewData = 'This is the second-first.html page';

}

};

// Second nested view in second.html for display

var second2 = {

url: '/second2',

templateUrl: 'pages/secondsecond.html',

controller: function($scope) {

$scope.nestedViewData = 'This is the secondsecond.html page';

}

};

...

Testing our SPA – Part 1

[wp_ad_camp_4]

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

[wp_ad_camp_5]

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.

...
        <ul>
            <li><a ui-sref="main" ui-sref-active="active">Go to Home</a></li>
            <li><a ui-sref="second.second-two" ui-sref-active="active">Go to Second</a></li>
        </ul>
...

...

<ul>