如何使用破折号而不是斜线创建 AngularJS 路由答案

【问题标题】：How to create AngularJS Route with dashes instead of slashes如何使用破折号而不是斜线创建 AngularJS 路由
【发布时间】：2014-10-14 09:47:14
【问题描述】：

是否可以在 URL 片段中使用破折号而不是斜杠和可变内容来创建 Angular 路由？例如：

在 Angular 手机教程中，URL 如下所示，例如：

http://angular.github.io/angular-phonecat/step-11/app/#/phones/motorola-xoom

这是通过 Route Provider 实现的，例如：

  when('/phones/:phoneId', {
    templateUrl: 'partials/phone-detail.html',
    controller: 'PhoneDetailCtrl'
  })

我想做的是让 URL 看起来更像：

http://angular.github.io/angular-phonecat/step-11/app/#/phones/{{manufacturer}}--{{devicename}}--{{phoneid}}

其中 {{phoneid}} 是数字数据库键，而 {{manufacturer}} 文本因手机而异。这是因为我需要数字键来驱动我的数据库，但希望 URL 中的制造商和设备名称文本（或我的等效文本）用于 seo 目的......

实际上，我想在 Angular Routes 中执行我可以在 htaccess 文件中执行的操作，我会在其中执行以下操作： RewriteRule ^(.)--by--(.)--(.*)$ phone.php?mfg=$1&devicename=$2&phoneid=$3

我知道 Angular 路由不支持这样的通配符，但想知道我如何才能达到这样的效果。或者也许有一些扩展可以实现这一点？

【问题讨论】：

标签： angularjs routing angular-routing

【解决方案1】：

您可以使用 :name 在 url (source) 中使用变量

在您的配置中：

config(function($routeProvider, $locationProvider) {
    $routeProvider
    .when('/phones/:manufacturer--:devicename--:phoneid', {
          templateUrl: 'file.html',
          controller: 'PhoneController'
     });

访问控制器中的参数：

$routeParams.manufacturer
$routeParams.devicename
$routeParams.phoneid

【讨论】：

天才。这很完美。没有意识到您可以在 url 中放置多个变量。谢谢！