Default Angular UI-Router Nested View
I am trying to open the default state when I go to the parent state profile which loads the main template. 'profile.general'
How to activate nested state for ui-view when navigating to / profile url?
$urlRouterProvider.otherwise("/profile/general");
$stateProvider.state('profile', {
url: '/profile',
abtract: true,
views: {
"main": {
controller: 'ProfileCtrl',
templateUrl: 'src/app/profile/index.tpl.html'
}
}
}).state('profile.general', {
//url: '/register/details',
templateUrl: 'src/app/profile/profile-general.html'
//controller: 'ProfileCtrl'
}).state('profile.security', {
//url: '/register/details',
templateUrl: 'src/app/profile/profile-security.html'
}).state('profile.social', {
//url: '/register/details',
templateUrl: 'src/app/profile/profile-social.html'
}).state('profile.privacy', {
//url: '/register/details',
templateUrl: 'src/app/profile/profile-privacy.html'
}).state('profile.payments', {
//url: '/register/details',
templateUrl: 'src/app/profile/profile-payments.html'
}).state('profile.restrictions', {
//url: '/register/details',
templateUrl: 'src/app/profile/profile-restrictions.html'
});
})
Html
<div id="profile-views" ui-view></div>
source to share
There is a working plunker
These lines should help:
$urlRouterProvider.when("/profile", "/profile/general");
$urlRouterProvider.otherwise("/profile/general");
And we have to give a general sub-state: url
.state('profile.general', {
//url: '/register/details',
url: '/general',
templateUrl: 'src/app/profile/profile-general.html'
Thus, with their help, we have a redirect ... which whenever the user configures only an abstract state, it redirects to the selected URL. .when
Also, since we have entered the url for the child, we can use it as the default shared state. .otherwise
Another way how to do it is to omit the url of one child (exactly one child):
How to set up default child state / index
Check here
source to share