Javascript 角度用户界面路由器中的双向子/资源关系

因此，我可以用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 with 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 with id 
      }

       //THIS IS THE NIFTY PART         
      @Path("/{id}/clubs")
      public ClubsResource getClubStuffForPerson(@PathParam("id") long personId) {
          return new ClubsResource(personId);
      }
}

它的妙处在于它允许我用

ClubsResource

“扩展”

PeopleResource

——它几乎免费为我提供端点

/people/1234/clubs

，

/people/1234/clubs/5678

，以及

people/1234/clubs//code>

我想在我的angular应用程序中使用ui路由器做类似的事情

因此，我：

$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

我想用所有的
俱乐部来“扩展”people.detail
状态。*

状态（反之亦然）：例如，我想要一个

people.detail.clubs

状态（在url

/people/1234/clubs

），它向我显示了所有针对people 1234的俱乐部。还有一个

clubs.detail.people

状态为

/clubs/5678/people

，显示了俱乐部5678中的所有人

显然，我可以手动创建这些状态，但我想知道ui路由器中是否存在类似于Jax RS中的子资源定位器的构造，允许我在那里做我在那里做的事情（因为考虑到任意复杂性的“俱乐部”和“人”状态，这将更易于维护）

更新：作为实现这一目标的一种不切实际且不完整的方式，我正在做：

//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 to use same definition with 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()) 
           //^^ so URL is /clubs/5678/members/1234             
 }) 

---

这有助于我消除大部分代码重复，但感觉相当粗糙，并没有触及我问题的核心——即ui路由器是否提供了一种更优雅的本机方式

据我所知，

ui-router

开箱即用不支持这一点，所有

.state（）

状态必须声明在

ui-router

中注册。支持的是状态是嵌套的，并且在进入子状态之前必须解析所有以前的状态

我在多个状态下重复解析函数时遇到了类似的问题，我通过将其抽象为一个服务解决了这个问题，就像您现在所做的那样

在另一个项目中，我还做了一个函数，它根据一些参数生成完整的状态声明（名称、url、模板、ctrl、resolve），因为我打开了20个稍微不同的模态作为状态：）

---

因此，最终您将抽象出状态定义的生成，这是正常的。

很抱歉接受的太晚。这是我的直觉，谢谢你的确认。不用担心，希望能有所帮助！