routing - AngularJS + Base Href 区分大小写？

Question

我很难理解为什么我的基本 href 似乎区分大小写。我有一个带有基本 href 的页面并使用 angularjs 路由。

html:

<html ng-app="app">
    <head>
        <base href="/Foo/"/>
    </head>
    <body>
        <div>Foo</div>
        <div ng-view></div>  
    </body>
</html>

js：

var module = angular.module('app', []);

module.config(function ($routeProvider, $locationProvider) {
    $routeProvider
        .when('/Home/Page1', { templateUrl = 'partials/page1' })
        .otherwise({ redirectTo: '' });

     $locationProvider.html5Mode(true);
     $locationProvider.hashPrefix('!');
});

如果我导航到http://www.example.com/Foo/，那很好。但是当我导航到http://www.example.com/foo/我得到一个角度错误：

Error: Invalid url "http://www.example.com/foo/", missing path prefix "/Foo" !
at Error (<anonymous>)
at Object.LocationUrl.$$parse (http://www.example.com/foo/Scripts/angular.js:4983:13)
at Object.LocationUrl (http://www.example.com/foo/Scripts/angular.js:5014:8)
at $LocationProvider.$get (http://www.example.com/foo/Scripts/angular.js:5387:21)
at Object.invoke (http://www.example.com/foo/Scripts/angular.js:2809:28)
at http://www.example.com/foo/Scripts/angular.js:2647:37
at getService (http://www.example.com/foo/Scripts/angular.js:2769:39)
at Object.invoke (http://www.example.com/foo/Scripts/angular.js:2787:13)
at $CompileProvider.directive (http://www.example.com/foo/Scripts/angular.js:3613:43)
at Array.forEach (native) angular.js:5582

如果它有帮助/有所作为，则站点托管在 IIS 上并使用 MVC 4。

score 12 · Accepted Answer

您需要关闭 angularjs 路由提供程序的区分大小写。

请查看此功能的详细信息：添加caseInsensitiveMatchurl 匹配选项

score 7 · Accepted Answer

我正在使用 UI 路由器，因此无法使用为 ngRoute 建议的方法解决路由区分大小写问题。https://github.com/angular-ui/ui-router/issues/197上的解决方案对我有用，但不适用于原始问题的基本 href 问题。

我能够通过为 $browser 添加一个装饰器来解决这个问题，它将 basehref 和 url 设置为小写。如果您查看导致问题的 beginWith 方法中导致问题的被比较值的来源，您会发现它们最终源自 $browser。

最终，该解决方案解决了路由和基本 href 区分大小写问题，并且不需要 $urlRouterProvider 建议。因此，如果您的 DOM 中没有明确设置的基本 href 元素，则该链接中建议的 $urlRouterProvider 规则将解决您的问题。否则，这将解决基本 href 和路由。

使用 ui-router 解决基本 href 和路由问题的完整解决方案：

  $provide.decorator('$browser', [
                    '$delegate', function($delegate) {

                        var _baseHref = $delegate.baseHref,
                            _url = $delegate.url;

                        $delegate.baseHref = function() {
                            return angular.lowercase(_baseHref());
                        };
                        $delegate.url = function(url, replace) {
                            // no need to modify the setter
                            if (url) {
                                return _url(url, replace);
                            }
                            // just lowercase the getter
                            return angular.lowercase(_url());
                        };
                        return $delegate;
                    }
                ]);

score 6 · Accepted Answer

有同样的问题，但有不同的解决方案。这对我有用，并且不会干扰路由、 beginWith 或事物是/应该是小写的假设。

把它放在 angular 初始化之前（比如在你的 html 页面的头部）

// Fix base url being case sensitive
(function () {
     var base = document.querySelector("base");
     var normalized = RegExp(base.href, "i").exec(location.href);
     base.href = normalized ? normalized[0] : base.href;
}());

score 2 · Accepted Answer

这个问题的一个很好的解决方案是为 $route 创建一个装饰器并设置规则如何不区分大小写。通过这种方式，您不必为每个“何时”创建字段 caseInsensitiveMatch。在此 URL 中，您可以找到有关此解决方案的更多信息：http: //iranreyes.com/angularjs-decorating-route

score 0 · Accepted Answer

截至今天，caseInsensitiveMatch 不包含在 AngularJS 1.0.7 的稳定版本中，但它包含在不稳定版本 1.1.5 中（https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular .min.js ) 测试并按预期工作

score 0 · Accepted Answer

接受的答案将不起作用，因为它只会影响路由而不影响基本 url。对于 Angular 开发人员来说，这是一个看起来“太难”修复的错误。参考——https: //github.com/angular/angular.js/issues/4056

要自己解决这个问题，您需要重写 angular.js 中的 beginWith() 函数来比较小写字母——

function beginsWith(begin, whole) {
	if (whole.toLowerCase().indexOf(begin.toLowerCase()) === 0)
	{
    return whole.substr(begin.length);
  }
}

routing - AngularJS + Base Href 区分大小写？

6 回答 6

Related

Reference