路由 Angular UI 路由器答案

【问题标题】：Routing Angular UI Router路由 Angular UI 路由器
【发布时间】：2014-10-22 14:20:25
【问题描述】：

我正在使用Angular UI Router，但我无法定义我的路线。我有一些注册了状态和 URL 的基本路由： /about, /register, /（起始页）。

当用户注册时，我想为他们提供一个指向他们自己的个人页面的动态 URL。这将是一个参数化状态。我希望 URL 为 http://www.whatever.com/[username] 如果用户不存在，则重定向到 404。

但是，如果我注册一个名为 '/{userName}' 的州，这与我的其他路线冲突并接管所有请求。如何让所有静态注册的路由通过？

我可以做到http://www.whatever.com/profile/[username]。但这不是我想要的，也不是我为之开发的客户想要的。

也许我可以使用正则表达式让静态注册的路由加上基本路由'/'？也许还有另一个很棒的解决方案！

【问题讨论】：

能否提供一些代码。
如果我理解正确的话，您想允许“about”、“register”等用户名并让同一个 URL 指向两个不同的状态？
没有。我不会允许与静态创建的路由冲突的用户名。
@ObjectiveCoder，您能提供定义路线的代码吗？

标签： angularjs angular-ui-router

【解决方案1】：

您可以通过在静态路由之后定义通配符路由来解决此问题。

这是一个笨蛋：http://plnkr.co/edit/4pBWkhq4FDhLWqdCfkES?p=preview

var app = angular.module('plunker', ['ui.bootstrap', 'ui.bootstrap.tpls', 'ui.router'])
.run(['$rootScope', '$state', '$stateParams',
      function ($rootScope, $state, $stateParams) {
        $rootScope.$state = $state;
        $rootScope.$stateParams = $stateParams;
      }]);
app.config(function($stateProvider,$locationProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise("/about");
  $stateProvider
    .state('about', {
      url: "/about",
      views: {
        "viewA": {
          template: 'About'
        }
      }
    })
    .state('register', {
      url: "/register",
      views: {
        "viewA": {
          template: "Register"
        }
      }
    })
    .state('dynamic', {
      url: '/{val}',
      views: {
        "viewA": {
          template: "Dynamic route"
        }
      }
    });
});

【讨论】：

但是如果你注册一个静态空路由'/'，那么无论你把它放在哪里，通配符都会捕捉到那个路由？那是我的问题。您必须在通配符路由中处理“Startroute”，即 domain.com/？
我想到了几件事 - 最简单的方法是使用 /start 作为默认路由。或者，您还可以在动态路由控制器中添加一些逻辑，以在动态段为空时包含起始页模板（我认为这很笨拙，并且会破坏关注点分离）。最干净的方法是使用嵌套状态执行此操作，因此您将拥有两个状态 state('start', { url: '/' }) 和 start('start.dynamic', { url: '/{dynamic}', parent: 'start')，每个状态都有自己的控制器和模板。我认为这会奏效。

【解决方案2】：

我已经解决了这个问题。一切都与执行顺序有关。我所有的路线都在各自模块的单独配置块中注册。和带有'/'的配置块，即starroute有错误的模块名称。当它应该注册到“app-startPage”-模块中时，它正在注册到“app”-模块中。这样一来，它总是最后注册，而应该先注册！

无论如何，谢谢，为复制粘贴错误万岁！

【讨论】：