CODEWITHSUNDEEP
angularjsangularjs-routingangular-ui-router
TommyK
TommyK

Reputation: 416

Defaulting to Angular UI-Router Nested View

I am trying to open the state 'profile.general' by default when I navigate to the parent state profile which loads the main template.

How do I activate the nested state for the ui-view when the /profile url is navigated to?

$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>

Upvotes: 3

Views: 250

Answers (1)

Radim K&#246;hler
Radim K&#246;hler

Reputation: 123861

There is a working plunker

These lines should help:

$urlRouterProvider.when("/profile", "/profile/general");
$urlRouterProvider.otherwise("/profile/general");

And we should give url to the general sub state:

.state('profile.general', {
    //url: '/register/details',
    url: '/general',
    templateUrl: 'src/app/profile/profile-general.html'

So, with these in place, we have .when redirection... which whenever user is targeting just the abstract state - does redirect to selected url.

Also, because we introduced the url for a child, we can use the .otherwise as the overall default state.

Other way how to do that, is to omit the url of one child (just exactly one child):

How to: Set up a default/index child state

Check it here

Upvotes: 3

Related Questions