Question

我有一个问题，几乎所有的URL部分都是可选的，但控制器是相同的。我有一个带有动态url-parts的URL，当用户选择一些过滤器参数URL更改时，它依赖于过滤器，例如： /search，/search/min-1000，/search/max-10000等等。

此外，我的详细信息网址几乎与搜索相同，但有id个网址部分，例如：/search/{id}/min-1000，/search/{id}/min-1000/max-10000，/search/{manufacture-name}/{id}/min-1000/max-10000等。< / p>

如何使用angular-router或angular-ui构建此类动态URL？

以下是示例：http://plnkr.co/edit/70Ihz0nqRjiDOKoEJzRI

Answer 1

您必须在控制器中为该路线注册每个已定义路线的参数。显然$ stateParams从url参数创建一个对象，它被注入到路由中 - 如果你有那些注册了该路径的params。

然后，您可以为每个可能的构造构建路径，注册与该路径关联的所有参数：

/搜索/：ID

/搜索/：ID /：分钟

/搜索/：ID /：分钟/：最大

/搜索/：ID /：分钟/：最大/：类型

https://github.com/angular-ui/ui-router/wiki/URL-Routing#stateparams-service

这是一个类似于你想从egghead.io做的事情的例子（我把它移到了plnkr，让它更容易修补： http://plnkr.co/edit/XhWRMipsfn37bEDwC1sT?p=preview

您的每条路线都需要看起来像这样：

.state('list.item', {
    url: '/:item',
    templateUrl: 'templates/list.item.html',
    controller: function($scope, $stateParams) {
        $scope.item = $stateParams.item;
    }
})

他们在这里也有一个视频： https://egghead.io/lessons/angularjs-introduction-ui-router

Answer 2

我用可选参数完成了这个：

$stateProvider
    .state('details', {
        url: '/cars{make:(?:/[^/]+)?}{model:(?:/[^/]+)?}/{id:[0-9a-fA-F]{24}}{postcode:(?:/postcode\\-\\w+)?}{distance:(?:/\\d+miles)?}{minprice:(?:/min\\-\\d+)?}{maxprice:(?:/max\\-\\d+)?}',
        templateUrl: 'js/app/controllers/details/partials/index.html',
        controller: 'DetailsCtrl'
    })
    .state('search', {
        url: '/cars{postcode:(?:/postcode\\-\\w+)?}{distance:(?:/\\d+miles)?}{minprice:(?:/min\\-\\d+)?}{maxprice:(?:/max\\-\\d+)?}',
        templateUrl: 'js/app/controllers/search/partials/index.html',
        controller: 'SearchCtrl'
    })
    .state('searchMake', {
        url: '/cars{make:(?:/[^/]+)?}{postcode:(?:/postcode\\-\\w+)?}{distance:(?:/\\d+miles)?}{minprice:(?:/min\\-\\d+)?}{maxprice:(?:/max\\-\\d+)?}',
        templateUrl: 'js/app/controllers/search/partials/index.html',
        controller: 'SearchCtrl'
    })
    .state('searchMakeModel', {
        url: '/cars{make:(?:/[^/]+)?}{model:(?:/[^/]+)?}{postcode:(?:/postcode\\-\\w+)?}{distance:(?:/\\d+miles)?}{minprice:(?:/min\\-\\d+)?}{maxprice:(?:/max\\-\\d+)?}',
        templateUrl: 'js/app/controllers/search/partials/index.html',
        controller: 'SearchCtrl'
    });

以角度管理动态网址

2 个答案: