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}}'
    }

});

AngularJs UI 路由器 URL 格式化

AngularJs UI router URL formatting

javascript

angularjs

angular-ui-router