处理 angularUI 路由器中的斜杠答案

【问题标题】：Handling trailing slashes in angularUI router处理 angularUI 路由器中的斜杠
【发布时间】：2014-06-26 00:12:19
【问题描述】：

自从我开始解决这个问题以来已经有几个小时了，我似乎无法理解解决方案。

我有一个应用程序可能会导致用户实际输入 URL。在这种情况下，不难相信用户可能会输入斜杠。例如，

www.example.com/users/2 和 www.example.com/edit/company/123

应该和

一样对待

www.example.com/users/2/ 和 www.example.com/edit/company/123/

这只需要在客户端处理 URL 路由。我对处理资源/API 调用中的斜杠不感兴趣。我只对处理浏览器中的斜杠感兴趣。

所以我研究并在网上找到了很多答案。他们中的大多数将我带到了 angular-ui 路由器的常见问题解答部分。

https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions

他们告诉我们写一个规则，这是我想做的，但它似乎不起作用，或者我做错了。

这是我添加代码的 plunkr。

http://plnkr.co/edit/fD9q7L?p=preview

我已将此添加到我的配置中，其余代码几乎是基本内容。

$urlRouterProvider.rule(function($injector, $location) {
  //if last charcter is a slash, return the same url without the slash
  if($location.$$url[length-1] === '/') {
    return $location.$$url.substr(0,$location.$$url.length - 2);
  } else {
    //if the last char is not a trailing slash, do nothing
    return $location.$$url;
  }
});

基本上，我想让尾部斜杠可选，即它在地址栏上的存在或不存在对加载的状态没有影响。

【问题讨论】：

标签： angularjs angular-ui angular-ui-router angular-routing

【解决方案1】：

有一个工作链接plunker

这是更新后的规则定义：

  $urlRouterProvider.rule(function($injector, $location) {

    var path = $location.path();
    var hasTrailingSlash = path[path.length-1] === '/';

    if(hasTrailingSlash) {

      //if last charcter is a slash, return the same url without the slash  
      var newPath = path.substr(0, path.length - 1); 
      return newPath; 
    } 

  });

这些链接现在可以正常工作了：

  <ul class="nav">
    <li><a ui-sref="route1">Route 1</a></li>
    <li><a ui-sref="route2">Route 2</a></li>
    <li><a href="#/route1/">#/route1/</a></li>
    <li><a href="#/route2/">#/route2/</a></li>
    <li><a href="#/route1" >#/route1</a></li>
    <li><a href="#/route2" >#/route2</a></li>
  </ul>

魔法可以这样定义：如果有变化就返回变化的值……否则什么都不做……see example

【讨论】：

糟糕。我在 $location 中调用了错误的方法。 :{ 这样的菜鸟错误
AFAIK，这仅在您在应用程序的每个模块中定义此规则时才有效。这可能没问题，但是您最终会在整个客户端路由器配置中使用重复的代码；如果您已将它们分开到每个模块中。有人在应用程序级别解决了这个问题吗？
@MichaelLeanos，如果您以这样一种方式构建模块，即有一个主模块注入所有其他模块，它实际上可以工作。在 GitHub 上查看这个 Yoda source code。您需要做的就是将您的共享功能添加到主配置文件中，它可以在您的 Angular 应用程序中运行。
@Cyn 你是对的。我意识到，在我深入研究了我遇到的一个问题之后。我有一个名为“Core”的模块，我在其中定义了 Rule。但是，我的模块加载方式是按字母顺序排列的。我专门测试了一个按字母顺序出现在“Core”之前的模块，但没有应用规则。然后我测试了一个不同的模块；有效。所以我意识到了这个缺陷。我最终只是将“核心”模块作为依赖项注入到我的每个其他模块中。我相信这就是您所描述的。
是的，这似乎可行。不完全是我的意思。事实上，我的想法是将所有其他模块注入到主模块中，并拥有一个由该主模块控制的主基础文件，因此您可以随时禁用应用程序，而不会破坏太多东西。这是一个例子：

【解决方案2】：

从 ui-router 版本 0.2.11 开始，您可以这样做：

$urlMatcherFactoryProvider.strictMode(false);

这将对带有和不带有斜杠的 URL 进行相同的处理。

【讨论】：

也兼容 1.x 版本

【解决方案3】：

我没有足够的代表发表评论，所以请回答：-

$urlMatcherFactoryProvider.strictMode(false);

需要在$stateProvider.state 部分之前。

【讨论】：

！重要！需要在 $stateProvider.state 部分之前。！

【解决方案4】：

urlMatcherFactoryProvider 是 angular-ui-router 的 v1.x 的 deprecated。

请改用urlService.config.strictMode（ng1、ng2）。

它仍然需要在$stateProvider.state() 之前。

myApp.config(function($stateProvider, $urlServiceProvider) {
  var homeState = {
    name: 'home',
    url: '/home',
    component: 'xyHome'
  };

  $urlServiceProvider.config.strictMode(false);

  $stateProvider.state(homeState);

});

【讨论】：

【解决方案5】：

您好，您需要设置strictMode = false Angular ui-router 为此提供了方法

$urlMatcherFactoryProvider.strictMode(false);

在初始化State$stateProvider.state({})之前需要设置严格模式

更多详情可以参考这个Link

【讨论】：

【解决方案6】：

您也可以使用$urlRouterProvider.otherwise来处理路由器无法匹配路径的情况。

在下面的示例中，路由器无法匹配/mypath，因此调用$urlRouterProvider.otherwise 来查找要执行的操作。在这里我们可以看到请求的路径并将其映射到正确的路径，即/mypath/

app.config(function($urlRouterProvider) {
    $urlRouterProvider.otherwise(function ($injector, $location) {
        if ($location.$$path == '/mypath')
            return "/mypath/";
        else
            return "/defaultpath";
    });

【讨论】：