如何使用具有多个模块的ui路由器管理状态

我有一个包含3列的应用程序页面。中间栏是主要活动，并始终显示。两侧的列是widget列表，它们有自己的控制器和状态，可以隐藏或不隐藏，也可以有多个视图。理想情况下，我想像的URL路径如下所示：如何使用具有多个模块的ui路由器管理状态

/应用 - 主要活动显示，两个面板隐藏

/应用/ 1234 - 主要活动显示，但显示的信息为1234实体

/应用/ 1234/leftpanel - 主要的活动被示为具有1234的实体，并且leftpanel是开放

/应用/ 1234/leftpanel /列表 - 主要的活动被示为具有1234的实体，并且leftpanel是显示在列表视图

/app/leftpanel/list - main ac tivity显示默认状态，左侧面板仍然显示列表

这是可以使用ui路由器进行设置吗？我已经看到了这个例子：

https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions

它展示了如何使用$ stateProvider多个模块之间，但我仍然没有看到如何使这种情况与工作

来源

2013-08-02 chrismarx

你算出：

$stateProvider.state('off',{ //url: //there is no url views:{ container:{ template: 'blank', controller:['$scope', '$stateParams', function($scope, $stateParams){ console.log("off yay"); //just for sanity, not necessary }] } }});

然后设置应用程序的路由的其余部分什么都没有？我真的很想知道如何做到这一点。我在这里添加了一个问题，https://github.com/angular-ui/ui-router/issues/306 –

我的理论是，如果您能够拥有独立于根范围的ui状态，则可以进行粒度控制在一个模块内。但是，它似乎直接与$ rootScope耦合... –

您是否曾经解决过这个问题？ –

我没解决问题。我还在angular-ui github上发布了这个消息，他们的回应基本上是这样的，“好吧，这种情况并不是真正的路由器设计的，所以如果你想要更好的状态管理，把数据放入参数并亲自看看他们，并执行你所需要的任何逻辑“。我有点觉得这是ui-router设计的，所以我扩展了一下（没有源代码的变化）来实现这一点。解决方案是抽象状态，假“关闭”状态，路由器URL中的参数以及扩展$ urlRouterProvider服务的组合。

首先延长$ urlRouterProvider：

urlRouterProvider.when(/^((?!leftpanel).)*$/, ['$state', '$location', function ($state, $location) { 
//we've got just /app or /app/3434, nothing that contains /leftpanel, so turn off  
$state.transitionTo("off"); 
    }]);

然后补充说， “关闭” 状态：

appModule.constant('LEFT_PANEL_STATES', function() { 

var leftPanelRoot = { 
    name: 'root.leftpanel', //mandatory 
    template: '', 
    url: "/app/:primaryId/leftpanel", 
    views:{ 
     '[email protected]': { 
      templateUrl: "partials/leftpanel_container_partial.html", 
      controller:"LeftPanelRootCtrl", 
      resolve: { 
      //etc 
      } 
     } 
    }, 
    "abstract":true //makes this view only viewable from one of its child states 
}; 

var leftPanelItemsList = { 
    name: 'root.leftpanel.itemslist', //mandatory 
    parent: leftPanelRoot, //mandatory 
    url: "/items-list", 
    views:{ 
     '[email protected]': { 
      templateUrl: "partials/leftpanel_items_list.html", 
      controller:"LeftPanelItemsListCtrl", 
      resolve: { 
      //etc 
      } 
     } 
    }}; 


var leftPanelListDetail = { 
name:"root.leftpanel.itemslist.detail", 
parent:leftPanelItemsList, 
url:"/:id/detail", 
views:{ 
    "detail":{ 
    templateUrl:"partials/leftpanel_item_detail.html", 
    controller:"LeftPanelItemListDetailCtrl" 
    } 
}}; 

    var leftPanelExtendedDetailList = { 
name:"root.leftpanel.itemslist.extendedlist", 
parent:leftPanelItemsList, 
url:"/:id/extendedDetail/list", 
views:{ 
    "extendeddetaillist":{ 
    templateUrl:"partials/leftpanel_extended_detail_list.html", 
    controller:"LeftPanelExtendedDetailListCtrl" 
    } 
}};

来源

2014-01-28 20:50:56 chrismarx

我已经看到好几例我试图让ui-router做类似这样的事情，而且开发团队的反应基本相同。 –

如何使用具有多个模块的ui路由器管理状态

回答

相关问题