This post demonstrates how to create nested views with UI-router.
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
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
... // 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("/"); ... |
We have the following states – second
, second.second-one
, and second.second-two
. From a straight-forward navigation perspective, we navigate in this order:
- 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
orsecond.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
:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!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> |
If we choose the "Go to Second"
link, the contents of second.html
is displayed and it has these codes.
1 2 3 4 5 6 7 8 9 10 11 12 |
<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> |
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
:
1 |
second -> .second-one |
or
1 |
second -> .second-two |
Therefore we need the following configuration.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
... // 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'; } }; ... |
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
.
1 2 3 4 5 6 |
... <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> ... |
Recent Comments