Angular UI-router, vue "nested" par défaut

Bonjour,

Je suis sur angular ui-router, avec un menu horizontal (haut de page) composé de plusieurs boutons qui affichent chacun un autre menu vertical (sur la gauche de l'écran) lui même composé de plusieurs boutons qui présentent chacuns une page.

Lors d'un clic sur le menu horizontal (haut de page), un menu vertical s'ouvre mais aucun lien n'est présélectionné par défaut.

Donc j'aimerai que lors d'un clic sur le menu horizontal, il y ait le menu vertical qui s'affiche avec une page par défaut comme si nous avions cliqué sur un bouton du menu vertical.

D'après mes recherches sur le net, il faut mettre abstract : true, ne rien mettre dans l'url et mettre un urlRouteProvider.when(). J'ai réalisé cette démarche mais cela a été infructueux (voir ci-dessous le dernier code nommé essai).

donc voici mon menu horizontal :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<header>
	<nav class="navbar navbar-inverse">
		<div class="container">
			<div class="navbar-header navbar-left">
				<a class="navbar-brand" ui-sref="home">Brand add 2 morues</a>
			</div>
 
			<ul class="nav navbar-nav navbar-right">
				<li><a ui-sref="home"><i class="glyphicon glyphicon-home"></i> Home </a></li>
				<li><a ui-sref="pushs"><i class="glyphicon glyphicon-comment"></i> Pushs </a></li>
				<li><a ui-sref="photos"><i class="glyphicon glyphicon-camera"></i> Photos </a></li>
				<li><a ui-sref="users"><i class="glyphicon glyphicon-user"></i> Users </a></li>
				<li><a ui-sref="plants"><i class="glyphicon glyphicon-grain"></i> Plants </a></li>
				<li><a ui-sref="contact"><i class="glyphicon glyphicon-envelope"></i> Contact </a></li>
			</ul>
		</div>
	</nav>
</header>

voici le menu vertical qui s'affiche lorsque je clique sur le bouton "Users" du menu horizontal :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<div class="col-sm-3 col-md-2 affix-sidebar">
	<div class="sidebar-nav">
		<div class="navbar navbar-inverse" role="navigation">
			<div class="navbar-collapse collapse sidebar-navbar-collapse">
				<ul class="nav navbar-nav" id="sidenav01">
					<li class="active">
						<a class="collapsed">
							<h4>
								<i class="glyphicon glyphicon-user"></i> Users
							</h4>
						</a>
					</li>
					<li>
						<a ui-sref=".allUsers" data-toggle="collapse" class="collapsed">
							<span class="glyphicon glyphicon-user"></span> All users
						</a>
					</li>
					<li>
						<a data-toggle="collapse" data-target="#toggleDemo" data-parent="#sidenav01" class="collapsed">
							<span class="glyphicon glyphicon-flag"></span> By country <span class="caret pull-right"></span>
						</a>
						<div class="collapse" id="toggleDemo" style="height: 0px;">
							<ul class="nav nav-list">
								<li><a ui-sref=".allUsers">France</a></li>
							</ul>
						</div>
					</li>
					<li>
						<a ui-sref=".allUsers" data-toggle="collapse" class="collapsed">
							<span class="glyphicon glyphicon-user"></span> Get users near position
						</a>
					</li>
				</ul>
			</div><!--/.nav-collapse -->
		</div>
	</div>
</div>

voici le fichier js avec la config du router :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 var myApp = angular.module('myApp', ['ui.router']);
 
myApp.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
 
 	$urlRouterProvider.otherwise('/home');
 
 	$stateProvider
......
	// route for the users page
	.state('users', {
		url : '/users',
		templateUrl : 'vues/users.html'
	})
 
	// route for the users page
	.state('users.allUsers', {
		url : '/allUsers',
		templateUrl : 'vues/allUsers.html',
		controller: 'allUsersCtrl'
	})
 
	// route for the users page
	.state('users.usersByCountry', {
		url : '/usersByCountry',
		templateUrl : 'vues/usersByCountry.html',
		controller: 'usersByCountryCtrl'
	})

essai :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
.....
 
 	$urlRouterProvider.when('/users', '/allUsers');
 
 	$stateProvider
.....
	// route for the users page
	.state('users', {
		url : '/users',
		abstract : true,
		templateUrl : 'vues/users.html'
	})
 
	// route for the users page
	.state('users.allUsers', {
		url : '',
		templateUrl : 'vues/allUsers.html',
		controller: 'allUsersCtrl'
	})
 
	// route for the users page
	.state('users.usersByCountry', {
		url : '/usersByCountry',
		templateUrl : 'vues/usersByCountry.html',
		controller: 'usersByCountryCtrl'
	})

Merci pour votre aide !:P