以角度管理动态URL

Manage dynamic URLs in angular

本文关键字：动态 URL 管理      更新时间：2023-09-26

我遇到了一个问题，几乎所有的URL部分都是可选的，但控制器是相同的。我有一个带有动态URL部分的URL，当用户选择一些过滤器参数时，它取决于过滤器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路由器或angular ui构建这样的动态URL？

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

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

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

/search/：id

/search/：id/：min

/搜索/：id/：min/：max

/搜索/：id/：min/：max/：类型

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

这里有一个例子，类似于你在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

我用可选参数完成了这项工作：

$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'
    });
相关文章：