Multiple UI-Views not working as expected - html

Question

I am trying to use multiple UI-views in my AngularJS app and it is not working as expected. The app is a dashboard.
My directory structure is as follows:
index.html
app/
app.js
dashboard/
dashboard.html
dashboard.js
partials/
business.html
items.html
orders.html
sales.html
login/
login.html
login.js
The problem that I am having is that my index.html file has the following line of code:
<div ui-view></div>
The above line enables my application to show the login.html page and dashboard.html page. Now I want to be able to have partial views in my dashboard.html page and so I have also put the same line of code
<div ui-view></div>
in order to be able to embed partial views in my dashboard page. Instead of embedding though, the page instead just redirects. So for example if I am in my dashboard.html and click on a navigation item such as 'business', I am redirected to partials/business.html instead of the content being embedded.
1) Can I have multiple ui-views embedded within each other?
2) Am I correctly embedding the partial views?
I have scoured the internet but cannot find a solution. Thanks in advance for the help!

Answer 1

You can definitely have multiple embedded views.
Check out these AngularJS UI-Router tutorials: Nested Views and Multiple Named Views.
Let me know if you still have issues after looking them over.

Answer 2

You can define a ui-view inside another ui-view. I have implemented it in the following manner and its pretty straight forward.
Inside index.html I have code:
<div ui-view=""></div>
Then inside user.html I have code
<div ui-view=""></div>
And I have defined a config for displaying my views as
.config(function($urlRouterProvider, $stateProvider) {
var users = {
//Name must be in format Parent.Child
name: 'users',
url: '/user',
templateUrl: 'users/user.html',
controller: 'usersHandler',
data: {
pageTitle: 'Welcome to Users'
},
},
createUsers = {
name: 'users.createUsers',
url: '/createUser',
templateUrl: 'users/createUser.html',
data: {
pageTitle: 'Create Users'
}
},
listUsers = {
name: 'users.listUsers',
url: '/listUsers',
templateUrl: 'users/userLists.html',
data: {
pageTitle: 'Users listing'
}
},
getUserDealer = {
name: 'users.getUserDealer',
url: '/getUserDealer',
templateUrl: 'users/getUserDealer.html',
data: {
pageTitle: 'Users dealer listing'
}
},
editUser = {
name: 'users.editUser',
url: '/editUser',
templateUrl: 'users/editUser.html',
data: {
pageTitle: 'Edit User'
}
};
//Similarly define all the combination you want to separate
//add routes to stateProvider
$stateProvider
.state('users', users)
.state('users.createUsers', createUsers)
.state('users.listUsers', listUsers)
.state('users.getUserDealer', getUserDealer)
.state('users.editUser', editUser);
$urlRouterProvider.otherwise('/user/listUsers');
});
Whats happening is this that user.html is my parent file which is loaded inside index.html and editUser.html, getUserDealer.html and userLists.html etc are its children which I load within user.html using ui-view.
And I provide the links for nested pages as:
<ul class="nav navbar-nav">
<li>NEW USER</li>
<li>GET USER</li>
</ul>
This can be extended to additional parents and their children as per the need.
Hope it helps!!