javascript - Bidirectional sub/resource relationships in Angular ui-router -

so there's nifty thing can resource classes in jax-rs:

@path("/clubs") class clubsresource {       @path("/")       @get       public response getclubs() {           // return list of clubs       }        @path("/{id}")       @get       public response getclub(@pathparam("id") long id) {           // return club given id        }       //lots of other club endpoints }  @path("/people") class peopleresource {       @path("/")       @get       public response getpeople() {           // return list of people       }        @path("/{id}")       @get       public response getperson(@pathparam("id") long id) {           // return person id        }         //this nifty part                @path("/{id}/clubs")       public clubsresource getclubstuffforperson(@pathparam("id") long personid) {           return new clubsresource(personid);       } } 

what's nifty allows me "extend" peopleresource clubsresource - gives me endpoints /people/1234/clubs, /people/1234/clubs/5678, , people/1234/clubs/<every other clubsresource endpoint>, free.

i'd analogous in angular application using ui-router.

so have:

$stateprovider      .state('people', {            url: '/people'       }).state('people.detail', {            url: '/{personid}'          //lots of other people states         }).state('clubs', {            url: '/clubs'       }).state('clubs.detail', {            url: '/{clubid}'       }).state('clubs.detail.edit', {            url: '/edit'       })        // lots of other clubs states 

and i'd "extend" people.detail state clubs.* states (and vice versa): instance, want people.detail.clubs state (at url /people/1234/clubs) shows me clubs person 1234. , clubs.detail.people state @ /clubs/5678/people shows me people in club 5678.

obviously can create these states manually, i'm wondering whether construct exists in ui-router that's analogous of sub-resource locators in jax-rs, allowing me did there (as far more maintainable given "clubs" , "people" states of arbitrary complexity).

update: hackish , incomplete way of achieving this, i'm doing:

//people_states.js   var list = {/* object-style definition of people list state */  }; var detail = {/* object-style definition of people detail state */  };  module.constant('peoplestates', {     list: function(customurl){         //param allows other states use same definition different url         var toreturn = angular.copy(list);         toreturn.url = customurl ? customurl : toreturn.url;          return toreturn;      }     detail: function(url){/* same idea */ } }    //club_states.js    //var list, detail... same idea    module.constant('clubstates', {/*same idea*/})   module.config(function($stateprovider, peoplestates, clubstates){        $stateprovider           .state('clubs', clubstates.list())            .state('clubs.detail', clubstates.detail())            .state('clubs.detail.members', peoplestates.list("/members"))                           .state('clubs.detail.members.detail', peoplestates.detail())             //^^ url /clubs/5678/members/1234               })  

this helps me eliminate of code duplication, feels pretty hacky , doesn't heart of question - whether ui-router provides more elegant way of doing natively.

as far know not supported ui-router out of box, .state() states have declared registered in ui-router. supported states nested , previous states must resolved before entering child state.

i had similar problem duplication of resolve functions in multiple states solved abstracting service doing.

in other project did function generated full state declarations (name, url, template, ctrl, resolve) based on parmaeters because opening more 20 different modals states :)

so in end abstract away generation of state definitions ok.