在 angular 中管理动态 URL

Question

我有一个问题，几乎所有 URL 的部件都是可选的，但控制器是相同的。我有一个带有动态 url 部分的 URL，当用户 select 一些过滤器参数 URL 发生变化时，这取决于过滤器，例如： /search、/search/min-1000、/search/max-10000 等。

我还有详细信息 URL 与搜索几乎相同，但有 id url 部分，例如：/search/{id}/min-1000、/search/{id}/min-1000/max-10000、 /search/{manufacture-name}/{id}/min-1000/max-10000 等等。

如何使用 angular-router 或 angular-ui 建立这样的动态 URLs？

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

Answer 1

您必须在该路由的控制器中为每个定义的路由注册您的参数。显然，$stateParams 从 url 参数创建了一个对象，并将其注入到路由中 - 如果您在该路由中注册了这些参数。

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

/搜索/:id

/search/:id/:min

/search/:id/:min/:max

/search/:id/:min/:max/:type

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

在 angular 中管理动态 URL

Manage dynamic URLs in angular

javascript

angularjs

angular-ui

angular-ui-router