UI-Router Child State For Multiple Parent States - angular-ui-router

Question

I have a project that requires parent routes that are separated, in order to isolate URLs, controllers and API calls.
/boardgames/:id/review/
/boardgames/:id/setup/
The issue I am trying to solve is how to have a common child route, for all of the parent routes?
/boardgames/:id/review/rules/
/boardgames/:id/setup/rules/
Here is a simplified version of the current UI-Router config:
.state('app.frontend.view', {
abstract: true,
url: '/boardgames/:id',
views: {
'page#': {
templateUrl: 'public/html/game/view/index.html',
resolve: {},
controller: 'View'
}
}
})
.state('app.frontend.view.review', {
url: '/review/',
views: {
'tab#app.frontend.view': {
templateUrl: 'public/html/game/tabs/review/index.html',
resolve: {},
controller: 'ViewReview'
}
}
})
.state('app.frontend.view.setup', {
url: '/setup/',
views: {
'tab#app.frontend.view': {
templateUrl: 'public/html/game/tabs/setup/index.html',
resolve: {},
controller: 'ViewSetup'
}
}
});
Here is the HTML structure: (public/html/game/view/index.html)
<div class='item'>
<div ui-view='tab'></div>
</div>
ALL IS WORKING UP TO THIS POINT.
I was thinking of passing another parameter to create a dynamic state... and then chaining the child route:
.state('app.frontend.view.{{:path}}', {
url: '/:path/',
views: {
'tab#app.frontend.view': {
templateUrl: 'public/html/game/tabs/:path/index.html',
resolve: {},
controller: ':path' (format :path into friendly name)
}
}
})
.state('app.frontend.view.{{:path}}.rules', {
url: '/rules/',
views: {
'rules#app.frontend.view': {
templateUrl: 'public/html/game/tabs/rules/index.html',
resolve: {},
controller: 'ViewRules'
}
}
});
Is this the best way to go forward?

Answer 1

After researching this topic further, I found that:
State naming should be locked in during the config phase.
.state('app.frontend.view.{{:path}}', {}
Would equal:
.state('app.frontend.view.image', {}
The Url would include the parameter '/:path/, templateUrl and controller can all have locked in names and use the parameter differently:
In the router resolve it would be:
resolve: {
tabResolve: ['$stateParams', 'game', function($stateParams, game) {
return game.show({
id: $stateParams.id,
tab: $stateParams.tab
}).$promise;
}]
}
Only one controller is needed now, since the data being passed in is different for every parameter (review, setup).