AngularJs UI路由器URL格式化

Question

我正在使用angularjs-ui router模块来管理我的状态。

我有这样的结构：

$stateProvider.state('menu', { 
     templateUrl: '/templates/menu/wrap.html', 
     params: { 
      slug: { 
       value: '' 
      }, 
      id: { 
       value: null 
      } 
     }, 
     ncyBreadcrumb: { 
      label: 'Menu' 
     } 

    }).state('menu.list', { 
     url: '/:slug', 
     parent: 'menu', 
     params: { 
      slug: { 
       value: '' 
      }, 
      id: { 
       value: null 
      }, 
      Name: { 
       value: '{{Name}}' 
      }, 
      Type: { 
       value: null 
      } 
     }, 

     views: { 
      // the main template will be placed here (relatively named) 
      '': { 
       templateUrl: '/templates/menu/main.html', 
       controller: 'MenuMainCtrl as MNC' 
      }, 

      // for column two, we'll define a separate controller 
      'productList@menu.list': { 
       templateUrl: '/templates/menu/productlist.html', 
       controller: 'ProductListCtrl as PLC' 
      }, 
      // for column two, we'll define a separate controller 
      'navigation@menu.list': { 
       templateUrl: '/templates/menu/navigation.html', 
       controller: 'MenuNavigationCtrl as MN' 
      }, 
      // for column two, we'll define a separate controller 
      'cart@menu.list': { 
       templateUrl: '/templates/menu/cart.html', 
       controller: 'CartCtrl as CC' 
      } 
     }, 
     ncyBreadcrumb: { 
      label: '{{Name}}' 
     } 
    }).state('menu.detail', { 
      parent: 'menu.list', 
      url: '/:productSlug', 
      params: { 
       productID: { 
        value: "" 
       }, 
       productSlug: { 
        value: "" 
       }, 
       productName: { 
        value: "" 
       }, 
       Name: { 
        value: "Breakfast" 
       }, 
       Type: { 
        value: null 
       }, 
       MenuListItemID: { 
        value: null 
       } 

      }, 
      views: { 
       '@': { 
        templateUrl: '/templates/menu/productSingle.html', 
        controller: 'ProductSingleCtrl as PSC' 
       } 
      }, 

      ncyBreadcrumb: { 
       label: '{{productName}}' 
      } 

     }); 

见名为 “menu.detail” 最后的状态。这个的基本URL是“/ menu /”，当这个状态激活时，我的URL是例如。 “localhost：8081/menu/breakfast-sandwiches/farmtotable-breakfast-sandwiches”但我的客户想要成为“localhost：8081/product/farmtotable-breakfast-sandwiches”。

这是甚至可能的，如果是，你能帮我吗？

Answer 1

您可以覆盖父URL方式如下：

.state('menu.detail', { 
    parent: 'menu.list', 
    url: '^/product/:productSlug', 
    params: { 
     productID: { 
      value: "" 
     }, 
     productSlug: { 
      value: "" 
     }, 
     productName: { 
      value: "" 
     }, 
     Name: { 
      value: "Breakfast" 
     }, 
     Type: { 
      value: null 
     }, 
     MenuListItemID: { 
      value: null 
     } 

    }, 
    views: { 
     '@': { 
      templateUrl: '/templates/menu/productSingle.html', 
      controller: 'ProductSingleCtrl as PSC' 
     } 
    }, 

    ncyBreadcrumb: { 
     label: '{{productName}}' 
    } 

});