Нечувствительность к регистру с угловым 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
Приветствия
Ответы
Ответ 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
});}