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

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文檔