javascript - Angular UI路由器中的双向子/资源关系

因此，我可以使用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);
      }
}

它的妙处在于它允许我用PeopleResource“扩展” ClubsResource-它为我免费提供了端点/people/1234/clubs，/people/1234/clubs/5678和people/1234/clubs/<every other ClubsResource endpoint>。

我想在使用ui-router的角度应用程序中执行与此类似的操作。

所以我有：

$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状态“扩展” clubs.*状态（反之亦然）：例如，我想要一个显示我所有俱乐部的people.detail.clubs状态（在URL /people/1234/clubs）代表1234。在clubs.detail.people的/clubs/5678/people状态向我显示了俱乐部5678中的所有人员。

显然，我可以手动创建这些状态，但是我想知道ui-router中是否存在类似于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
 })

这可以帮助我消除大多数代码重复，但是感觉很hacky，没有引起我的问​​题的核心-这就是ui-router是否提供本机执行此操作的更优雅的方法。

最佳答案

据我所知，ui-router不支持此功能，所有.state()状态必须声明为在ui-router中注册。支持的是嵌套状态，并且必须在进入子状态之前解析所有先前状态。

我在多个状态下重复解析函数时遇到了类似的问题，我通过将其抽象化为服务来解决该问题，方法与您正在做的类似。

在其他项目中，我还执行了一个函数，该函数根据一些参数生成了完整的状态声明（名称，URL，模板，Ctrl，Resolve），因为我打开的状态更像是20种稍微不同的模态：）

因此，最后可以抽象出状态定义的生成，这是可以的。

关于javascript - Angular UI路由器中的双向子/资源关系，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32194484/