Обработка конечных косых черт в угловом маршрутизаторе UI

Прошло несколько часов с тех пор, как я начал работать над этой проблемой, и я не могу придумать решение.

У меня есть приложение, которое может привести к тому, что пользователи действительно набрали 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;
  }
});

В принципе, я хочу сделать конечную косую черту необязательной, т.е. наличие или отсутствие на адресной строке не должно влиять на состояние загрузки.

Ответ 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>

Магия может быть определена следующим образом: возвращать измененное значение, если есть изменение... иначе ничего не делать... см. пример

Ответ 2

По версии ui-router 0.2.11 вы можете сделать это:

$urlMatcherFactoryProvider.strictMode(false);

Это будет относиться к URL-адресам с и без косых черт одинаково.

Ответ 3

У меня недостаточно комментариев для комментария, поэтому давайте ответ: -

$urlMatcherFactoryProvider.strictMode(false);

Необходимо находиться перед частью $stateProvider.state.

Ответ 4

Привет Вам нужно установить strictMode = false Angular ui-router предоставляет метод для этого

$urlMatcherFactoryProvider.strictMode(false);

Вам необходимо установить строгий режим перед инициализацией состояния $stateProvider.state({})

Для получения дополнительной информации вы можете сослаться на этот Ссылка

Ответ 5

urlMatcherFactoryProvider устарел для v1.x angular -ui-router.

Используйте 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);

});