No display when setting up multiple ui-view in index.html
Question
I'm trying to implement something as shown in the Multi-Named-Views wiki page of ui-router . The example is the following:
$stateProvider
.state('report', {
views: {
'filters': { ... templates and/or controllers ... },
'tabledata': {},
'graph': {},
}
})
With my current setup as seen below, the routing is not working. Not sure what I'm doing wrong here?
My current index.html looks like this:
<body>
<div ui-view="anonymous"></div>
<div ui-view="home"></div>
</body>
Then my app.js:
app.constant("AccessLevels", {
anon: 0,
user: 1
});
app.config(["$stateProvider", "$urlRouterProvider", "AccessLevels", function ($stateProvider, $urlRouterProvider, AccessLevels) {
/* ANONYMOUS USERS */
$stateProvider
.state('anon', {
abstract: true,
template: '<ui-view/>',
data: {
access: AccessLevels.anon
}
})
.state('anon.login', {
url: '/login',
views: {
anonymous: {
templateUrl: 'Client/scripts/app/partials/account/login.html',
controller: 'loginCtrl'
}
}
})
.state('anon.register', {
views: {
anonymous: {
url: '/register',
templateUrl: 'Client/scripts/app/partials/account/registration.html',
controller: 'registerCtrl'
}
}
});
/* AUTHENTICATED USERS */
$stateProvider
.state('user', {
abstract: true,
template: '<ui-view/>',
data: {
access: AccessLevels.user
}
})
.state('user.home', {
views: {
'home': {
url: '/home',
templateUrl: 'Client/scripts/app/partials/home/dashboard/index.html',
controller: 'homeCtrl'
}
}
})
.state('user.deliveries', {
views: {
'home_content': {
url: '/home/deliveries',
templateUrl: 'Client/scripts/app/partials/home/deliveries/deliveries.html',
controller: 'deliveryCtrl'
}
}
});
$urlRouterProvider.otherwise('/login');
}]);
1 answers
solution1
1 ACCPTED 2015-03-31 06:08:18
In general, we can use simplified, so called relative view target names only, if we target the parent. And that is not your case, because
.state('anon', {
abstract: true,
template: '<ui-view/>', // parent contains unnamed view
...
})
.state('anon.login', {
url: '/login',
views: {
anonymous: { // this view is not in parent
So we have to use absolute naming
.state('anon.login', {
url: '/login',
views: {
'anonymous@': { // no we target root
// realtive
'' : { // here we target unnamed parent view
// absolute
'@anon' : { //the same as the line above
A link to doc:
View Names - Relative vs. Absolute Names
Behind the scenes, every view gets assigned an absolute name that follows a scheme of
viewname@statename, where viewname is the name used in the view directive and state name is the state's absolute name, egcontact.item. You can also choose to write your view names in the absolute syntax.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.