如何使用具有多个模块的ui-router管理状态

Question

我有一个包含3列的应用页面.中间列是主要活动,始终显示.两个侧面列是小部件列表,它们有自己的控制器和状态,可以是隐藏的也可以是非隐藏的,并且在它们中也有多个视图.理想情况下,我想象url路由如下:

/ app - 显示主要活动,两个面板都隐藏

/ app/1234 - 显示主要活动,但显示1234实体的信息

/ app/1234/leftpanel - 主活动显示为1234实体,左侧面板打开

/ app/1234/leftpanel/list - 主要活动显示为1234实体,左侧窗格显示列表视图

/ app/leftpanel/list - 主要活动显示默认状态,左侧面板仍显示列表

这可以用ui-router设置吗？我见过这个例子:

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

它展示了如何在多个模块之间使用$ stateProvider,但我仍然没有看到如何使这个场景工作 -

Answer 1

我确实解决了这个问题.我也在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");
   }]);

然后添加"关闭"状态:

$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
     }]
   }
 }});

然后设置应用程序路由的其余部分:

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

var leftPanelRoot = { 
  name: 'root.leftpanel',  //mandatory
  template: '',
  url: "/app/:primaryId/leftpanel",
  views:{
      'container@': {
          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:{
      'childview@root.leftpanel': {
          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"
  }
}};