AngularJS + Base Href Case Sensitive?

问题

I'm struggling to understand why my base href seems to be case sensitive. I have a page with a base href and utilizes angularjs routing.

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('!');
});

If I navigate to http://www.example.com/Foo/, it's fine. But when I navigate to http://www.example.com/foo/ I get an angular error:

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

If it helps/makes a difference, site is hosted on IIS and using MVC 4.

回答1:

You need to turn off case sensitivity of angularjs route provider.

Please review the detail of this feature: add caseInsensitiveMatch option for url matching

回答2:

I'm using UI-router, so was not able to resolve the route case sensitivity using the methods suggested for ngRoute. The solution at https://github.com/angular-ui/ui-router/issues/197 worked for me for the routes but not for the base href issue which was the original problem posted.

I was able to resolve this issue by adding a decorator for $browser which sets basehref and url to lowercase. If you look at the origin of the values being compared that are causing the issues in the beginsWith method that is causing the issue, you'll see that they ultimately originate from $browser.

Ultimately, that solution solved for both routes and base href case sensitivity and the $urlRouterProvider suggestion was not needed. So if you don't have an explicitly set base href element in your DOM, the $urlRouterProvider rule suggested in that link would solve your issue. Otherwise, this solves for both base href and for routes.

Full solution which resolved the issue for both base href and routing using ui-router:

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

回答3:

Had the same problem but have a different solution. This works for me and doesn't interfere with routing, beginsWith or the assumption that things are/should be lower case.

Put this before angular is initialized (like in the head of your html page)

// 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;
}());

回答4:

a nice solution to this problem is to create a decorator for $route and set the rules how case insensitives. With this way you don't have to create the field caseInsensitiveMatch for each "when". In this URL you can found more about this solution: http://iranreyes.com/angularjs-decorating-route

回答5:

As of today, caseInsensitiveMatch is not included in the stable version of AngularJS 1.0.7 but it is included in the unstable version 1.1.5 (https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js) Tested and working as expected

回答6:

The accepted answer will not work since that only effects the routes and not the base url. This is a bug that looks to be "too hard" to fix for the Angular developers. Reference --https://github.com/angular/angular.js/issues/4056

To fix this yourself you need to rewrite the beginsWith() function in angular.js to compare on lowercase --

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

来源：https://stackoverflow.com/questions/14994324/angularjs-base-href-case-sensitive

标签

routing

angularjs

href

base