javascript - AngularJS - 使用 UI-Router 进行动态路由

Question

因此，我在由 angularjs 驱动的超赞单页应用程序中拥有功能齐全的静态路由器，现在我得到了使某些路由动态化的任务。

到目前为止，我有以下参数路径:

• ^/user/:用户名
• ^/product/:productName
• ^/category/:categoryName

现在他们都需要响应路径 ^/:slug，这将调用一些后端 API 以获取与该 slug 对应的资源类型，并最终转发请求到特定的 controller 及其特定的 resolve、templateUrl、abstract 和 data。

有什么想法吗？

---

(编辑:我猜路由镜像(又名透明转发)可以实现相同的功能，其中在内部触发了与请求不同的另一条路由，即使路由变化是不公开可见的。但我仍然不知道这在 Angular 或 ui-router 中是否可行......)

Answer 1

我想通了。它不漂亮，但效果很好。

除了将上面的现有路由重命名为 ^/:username(别名“profile”)、^/:productName(别名“products”)和 ^/:categoryName(别名“category”)，我创建了一个新的通用路由 /:slug 及其 Controller ResolverController。后者必须首先在 $stateProvider 中声明。

ResolverController 是以下函数:

function ($state, $stateParams, resource) {
  switch (resource) {
  case 'user':
    $state.go('profile', {'username': $stateParams.slug});
    break;
  case 'product':
    $state.go('products', {'productName': $stateParams.slug});
    break;
  case 'category':
    $state.go('category', {'categoryName': $stateParams.slug});
    break;
  default:
    // 404
    break;
  }
}

您可能想知道第三个参数 resource。它由此状态的解析返回，并包含有关所请求的 slug 的资源类型的信息。