如何配置角度以使用基线路径而不使用尾部斜杠？

Question

期望的行为

我有一个位于此URL的搜索页面：

http://example.com/search

所需的行为是提供的查询参数传递给页面，并在用户键入不同的查询时更新。

例如，

http://example.com/search?q=foo

导致页面加载时包含“foo”的搜索框。 如果用户在搜索框中键入“美味煎饼”，则位置栏的URL将自动更新为：

http://example.com/search?q=delicious+pancakes

这部分工作正常; 我正在使用$watch来监控查询的值，然后通过$location.search('q', newValue)更新位置栏。

但是我想使用HTML5模式（我使用的是$locationProvider.html5Mode(true) ），我需要hashbang回退才能为IE9用户工作。

我希望hashbang回退看起来像这样：

http://example.com/search#?q=delicious+pancakes

问题

如果我没有设置<base>元素，$ location服务会将域之后的所有内容视为路径，因此它实际上会在IE9中回退到这一点：

http://example.com/#search?q=delicious+pancakes

这导致浏览器重定向到主页（即，它完全带我离开搜索页面！）

所以最好的做法似乎是使用<base>标签; 所以我把它设置为

<base href="http://example.com/search/"></base>

（注意尾部斜杠;我理解这是Angular和HTML规范都需要的。）

但是，这意味着我必须使用以下URL：

http://example.com/search/?q=delicious+pancakes

（IE9后备版本为http://example.com/search/#?q=delicious+pancakes ）

这有效，但我不想要求用户在“搜索”之后和问号之前键入斜杠。 目前，如果我尝试通过http://example.com/search?q=foo访问该页面，我会在控制台中收到此错误：

TypeError: whole is undefined

这个错误显然是因为$ location服务的$$rewrite函数没有返回任何内容。 作为参考，我将从angular.js复制源代码：

this.$$rewrite = function(url) {
    var appUrl, prevAppUrl;

    if ( (appUrl = beginsWith(appBase, url)) !== undefined ) {
      prevAppUrl = appUrl;
      if ( (appUrl = beginsWith(basePrefix, appUrl)) !== undefined ) {
        return appBaseNoFile + (beginsWith('/', appUrl) || appUrl);
      } else {
        return appBase + prevAppUrl;
      }
    } else if ( (appUrl = beginsWith(appBaseNoFile, url)) !== undefined ) {
      return appBaseNoFile + appUrl;
    } else if (appBaseNoFile == url + '/') {
      return appBaseNoFile;
}

有没有什么方法可以在“搜索”之后没有斜线的情况下实现所需的行为，并且仍然支持IE9？

Answer 1

使用条件语句从IE5mode中排除IE9：

if(!!$window.innerWidth && !$window.matchMedia)
  {
  $locationProvider.html5Mode({enabled: false, requireBase: false});
  $locationProvider.hashPrefix("search");
  }
else
  $locationProvider.html5Mode({enabled: true, requireBase: false});

参考

• AngularJS错误参考/ $ location / nobase

• $ locationProvider的AngularJS文档