Question

我正在构建一个新的angularJS应用程序，基于AngularJS SPA Visual studio模板（http://visualstudiogallery.msdn.microsoft.com/5af151b2-9ed2-4809-bfe8-27566bfe7d83）

这使用ui-router（https://github.com/angular-ui/ui-router）进行路由。

但是，它似乎区分大小写。

知道如何指示angular / ui-router忽略url参数的情况吗？

在应用中，区分大小写无关紧要，但如果用户键入要在特定网页上输入应用的网址，我们需要确保about也与aBouT相同

干杯

Answer 1

您现在可以将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并手动构建master的头部。或者，您可以手动更改源，直到下一个版本发布。

更新（2014年11月18日）：

现在已经发布了一个版本，其中包含了上面的修复程序，因此您不再需要手动提取源代码并进行构建。您可以在Github上查看release或只获取latest build。

Answer 2

根据对原始问题的评论中的链接，我能够得到我需要的答案。

在$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()一个并非全部小写的网址。

完成后，它会替换网址而不是重定向。然后进行匹配状态。

Answer 3

您不应该更改ui-route处理URL匹配的方式以接受不区分大小写的URL（这会产生意外问题），但您可以尝试在路由失败时自动更正用户的URL。

当ui-route无法匹配路由的URL时，它会触发otherWise()回调。我将告诉您必须使用此回调重定向。

以下假设您的应用的所有网址都应为小写。

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

如果您需要更多控制权，请使用正则表达式选择需要重写的网址。

Answer 4

根据官方维基，

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

Darren的回答看起来是正确的：

app.config(function ($urlRouterProvider) {
  // Here's 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
});}

与angularjs ui-router不区分大小写

4 个答案: