angularjs – 在angularUI路由器中处理斜杠

自从我开始处理这个问题已经好几个小时了,我似乎无法摆脱这个问题。

我有一个可能导致用户实际输入网址的应用程序。在这种情况下,不难相信用户可能会输入尾部斜线。例如,

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

应该是一样的

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

这只需要在客户端处理URL路由。我没有兴趣在资源/ API调用中处理尾部斜杠。我只想在浏览器中处理拖尾的兴趣。

所以我研究并发现网上没有多少答案。他们中的大多数引导我到角ui路由器的FAQ部分。

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;
  }
});

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

有一个工作 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

相关文章

AngularJS 是一个JavaScript 框架。它可通过 注:建议把脚本放在 元素的底部。这会提高网页加载速度,因...
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题,也即是页面闪烁问题。出现这个的原因是:由于...
AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 指令AngularJS 指令是扩展的 HTML 属性,带有...
AngularJS 使用表达式把数据绑定到 HTML。AngularJS 表达式AngularJS 表达式写在双大括号内:{{ expres...
ng-repeat 指令可以完美的显示表格。在表格中显示数据 {{ x.Name }} {{ x.Country }} 使用 CSS 样式为了...
$http是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。读取 JSON 文件下是存储在web服务器上...