AngularJS - 使用UI-Router实现动态路由

Question

我有一个完全功能的静态路由器，它嵌入在我的强大的AngularJS单页应用程序中，现在我需要让某些路由动态化。

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

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

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

有什么想法吗？

---

(编辑：我想同样的功能也可以通过路由镜像（又称透明转发）来实现，在这种情况下，即使不公开显示路由更改，内部触发的是另一个路由。但我还不知道这是否在Angular或UI-Router中可行...)

- Phil Thomas

Answer 1

I figured it out. It ain't pretty but it works nicely.

除了将现有路由重命名为^/: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资源类型的信息。

- Phil Thomas