Подтвердить что ты не робот

Нечувствительность к регистру с угловым ui-маршрутизатором

Я создаю новое приложение angularJS, основанное на шаблоне Visual Studio для студии AngularJS (http://visualstudiogallery.msdn.microsoft.com/5af151b2-9ed2-4809-bfe8-27566bfe7d83)

для его маршрутизации используется ui-router (https://github.com/angular-ui/ui-router).

однако, похоже, он чувствителен к регистру.

Любая идея, как я бы проинструктировал angular/ui-router игнорировать случай параметра url?

чувствительность к регистру не имеет значения, хотя в приложении, хотя если пользователь вводит URL-адрес для ввода приложения на определенную страницу, нам нужно убедиться, что about также совпадает с about

Приветствия

4b9b3361

Ответ 1

Следуя ссылке в комментариях к исходному вопросу, я смог получить ответ, который мне нужен.

Перед моими маршрутами $stateProvider.state(......) у меня теперь есть эта часть кода:

$urlRouterProvider.rule(function ($injector, $location) {
       //what this function returns will be set as the $location.url
        var path = $location.path(), normalized = path.toLowerCase();
        if (path != normalized) {
            //instead of returning a new url string, I'll just change the $location.path directly so I don't have to worry about constructing a new url string and so a new state change is not triggered
            $location.replace().path(normalized);
        }
        // because we've returned nothing, no state change occurs
    });

По существу это будет toLowerCase() URL-адрес, который уже не все строчные.

После этого он заменяет URL, а не перенаправляет. Затем выполняется с совпадением состояния.

Ответ 2

Теперь вы можете настроить ui-router непосредственно на регистр без учета регистра. Вот как вы можете его использовать:

angular.module('main', ['ui.router']);

angular.module('main').config(['$urlMatcherFactoryProvider', '$stateProvider', '$urlRouterProvider',
  function($urlMatcherFactory, $stateProvider, $urlRouter) {
    $urlMatcherFactory.caseInsensitive(true);
    $urlMatcherFactory.strictMode(false);
    $stateProvider.state('foo', {
      url: '/foo',
      template: '<b>The Foo View</b>'
    });
    $stateProvider.state('bar', {
      url: '/bar',
      template: '<b>The Bar View</b>'
    });
    $stateProvider.state('nomatch', {
      url: '/nomatch',
      template: '<b>No match found View</b>'
    });

    $urlRouter.otherwise('/nomatch');
  }
]);

В последнем выпуске (0.2.11) это сломано. Уже исправлено исправление, которое можно увидеть на Github. Итак, в настоящее время лучшим решением является клонирование ui-router и создание главы мастера вручную. Кроме того, вы можете просто изменить исходный код вручную до следующего выпуска.

ОБНОВЛЕНИЕ (11/18/2014):

Теперь была выпущена релиза, которая включает исправление сверху, так что вам больше не нужно тянуть источник и строить вручную. Вы можете просмотреть release в Github или просто получить последнюю версию.

Ответ 3

Вы не должны изменять, как ui-route обрабатывает URL-адрес, чтобы принимать нечувствительные к регистру URL-адреса (которые будут иметь непредвиденные проблемы), но вы можете попытаться правильно исправить URL-адреса для пользователя, когда маршруты терпят неудачу.

Когда маршрут ui не может соответствовать URL-адресу маршрута, он вызывает обратный вызов otherWise(). Я покажу, что вам нужно перенаправить с помощью этого обратного вызова.

Далее делается предположение, что все URL-адреса вашего приложения должны быть в нижнем регистре.

var stateHandler = function($urlRouterProvider)
{
    $urlRouterProvider.otherwise(function($injector, $location)
    {
        var url = $location.absUrl();
        var redirect = url.toLowerCase();
        if(url == redirect)
        {
             return;
        }
        $window.location = redirect;
    });
};

YourAngularApp.config(['$urlRouterProvider',stateHandler]);

Если вам нужно больше управления, используйте регулярное выражение, чтобы выбрать, какие URL-адреса нужно переписывать.

Ответ 4

Согласно официальной вики,

https://github.com/angular-ui/ui-router/wiki/URL-Routing

Ответ Даррена выглядит правильно:

app.config(function ($urlRouterProvider) {
  // Here an example of how you might allow case insensitive urls
   $urlRouterProvider.rule(function ($injector, $location) {
   //what this function returns will be set as the $location.url
    var path = $location.path(), normalized = path.toLowerCase();
    if (path != normalized) {
        //instead of returning a new url string, I'll just change the $location.path directly so I don't have to worry about constructing a new url string and so a new state change is not triggered
        $location.replace().path(normalized);
    }
    // because we've returned nothing, no state change occurs
});}