No errors.
I'm able to access a list of teams at /teams and a specific team at /teams/2 where 2 is the id of a team.
$stateProvider.state('app.teams.team', {
url: '/:team',
templateUrl: 'templates/teams/team.html',
controller: 'TeamCtrl',
resolve: {
team: function($stateParams, TeamsService) {
return TeamsService.getTeam($stateParams.team)
}
}
})
I'm not able to access the roster at /teams/2/roster.
$stateProvider.state('app.teams.team.roster', {
url: '/roster',
templateUrl: 'templates/teams/roster.html'
})
The page loads without errors, and shows templates/teams/team.html instead of templates/teams/roster.html
The problem is the way you treat your states inheritance.
With the current configuration:
app.teams.team state expect the url http://app.teams url/:team
and
app.teams.team.roster state expect the url http://app.teams.team url/roster
each child expect the parent state to hold a ui-view directive so the templateUrl can get injected to.
This mean that for the roster state you have the app.teams htmls, contains the team html, contains the roster html.
To load a diffrent html under same level stay in same hirerchial level ->
app.teams.team
app.teams.roster
I ended up making roster its own state, which works as intended.
$stateProvider.state('app.roster', {
abstract: true,
url: '/teams/:team/',
views: {
content: {
template: '<ion-nav-view></ion-nav-view>'
}
},
resolve: {
team: function($stateParams, TeamsService) {
return TeamsService.getTeam($stateParams.team)
}
}
})
$stateProvider.state('app.roster.index', {
url: 'roster',
templateUrl: 'templates/roster/index.html',
controller: 'TeamCtrl',
})