AngularJS - 带有 UI-Router 的动态路由

Question

所以我在我出色的 angularjs 驱动的单页应用程序中拥有了功能齐全的静态路由器，现在我的任务是使某些路由动态化。

说到目前为止我有以下参数路径：

• ^/user/:userName
• ^/product/:productName
• ^/category/:categoryName

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

有什么想法吗？

---

(EDIT：我猜路由镜像（又名透明转发）可能会实现相同的功能，其中 internally 触发了请求之外的另一条路由，即使该路由更改不是公开可见的。但我仍然不知道在角度或 ui-router 中是否有任何可能......）

Answer 1

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

除了将上面的现有路由重命名为^/:username（别名'profile'）、^/:productName（别名'products'）和^/:categoryName（别名'category'）之外，我还创建了一个新的通用路由/:slug它的控制器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 的资源类型的信息。