angularjs - Default child state with same url as parent -

i have app many main states, 1 of them user profile:

  $stateprovider.state('profile', {     url: '/profile/',     templateurl: 'profile/profile.html',     controller: 'profile',   });

but container nested pages different profile settings. it's template contains main menu , ui-view nested states. controller menu handling.

one of nested views should default url , have same url parent, there shouldn't suffixes added url, can't achieve that.

here's tried:

  $stateprovider.state('profile.details', {       url: '',       templateurl: 'profile/details.html',       controller: 'profiledetails',   });

this not working @ all, @ url /profile/ menu appears , empty ui-view element. second approach:

  $stateprovider.state('profile.details', {       url: '/',       templateurl: 'profile/details.html',       controller: 'profiledetails',   });

this matches on url /profile// (with 2 slashes @ end). @ url /profile/ there still menu , empty ui-view element.

how can achieve result? possible using angular-ui-router?

make parent state abstract. prevent going state, , force go child states only. abstract states perfect templates child ones. rid of url:

$stateprovider.state('profile', {     abstract: true,     templateurl: 'profile/profile.html',     controller: 'profile',   });

now child state define absolute url

$stateprovider.state('profile.details', {       url: '^profile',       templateurl: 'profile/details.html',       controller: 'profiledetails',   });

that should work.

ITEMscalal