hashbang 之后的 Angular 替换 url答案

【问题标题】：Angular replace url after hashbanghashbang 之后的 Angular 替换 url
【发布时间】：2015-02-24 23:04:21
【问题描述】：

在我们的应用程序中，我们提供来自foobar.com/public/angular 的静态角度应用程序文件。主页 (foobar.com) 配置为服务于foobar.com/public/angular/index.html。因此，在我们的索引文件的<head> 中，我们有：

<base href="http://foobar.com/public/angular">

但是，在开发过程中，我们使用foobar.com/debug，这会导致服务器使用它来代替：

<base href="http://foobar.com/public/angular-debug">

服务器从该 url 返回文件的未处理（未缩小、丑化等）版本。我们也在使用 angular-route 作为我们的视图。

TLDR：

我们有生产路线：foobar.com
我们有一条开发路线：foobar.com/debug
我们有一个基本标签：<base href="http://foobar.com/public/whatever">
我们正在使用 hash-bang url 进行角度路由

问题在于在客户端生成 url。正如 cmets 中所讨论的，<a href="#/new/route">Click here</a> 不起作用，因为生成的 url 包含基本标记，服务器拒绝并看起来很奇怪，因为用户从其他地方开始：foobar.com/public/angular/#/myRoute)。我能想到的创建所需网址的最佳方法是：

  /**
   * Returns current url after replacing everything after the hashbang with a new string.
   *
   * @param {string} s - string to change route with (e.g. 'asdf')
   * @return {string}  - new url e.g. http://google.com/foobar/#!/asdf
   */
   makeRouteUrl = function(s) {
    var root = $location.absUrl().match(/.*#!/);
    if (root && (root.length > 0)) {
      root = root[0];
      return( root + s );
    } else {
      // no hashbang in path? Choose home page (not intended use)
      return "/";
    }
  }

但是，这似乎有点恶心。是否有 Angular 中的函数使上述函数变得不必要？我已经在 $location、$route 等中寻找函数，但似乎没有任何东西可以正确处理我们的复杂设置。我们最终需要将 url 作为字符串获取，而不是导航（我们支持在新选项卡中打开，因此需要使用ng-href）。由于 Angular 应用程序经常使用 hashbang url 进行路由，我认为必须有一些东西可以让你在 hashbang 之后更改路由，同时仍然保留它前面的内容。

【问题讨论】：

不是 100% 清楚问题所在。是否仅在打开新标签时（即 target="_blank"）？
@charlietfl 很抱歉不够清晰——我编辑了这个问题。从本质上讲，问题在于<a href="#/new/route">Click here</a> 由于基本标记而无法正常工作（它按照规范所说的那样工作，但需要将额外的路由代码添加到服务器以处理更改的 url）
我不明白。任何带有散列的东西都将由角度路由处理，并且无论从哪个目录提供服务，都将与应用程序入口点相关。如果不使用 html5 模式，甚至不需要基本标签
@charlietfl 抱歉，您在我编辑评论之前就回复了。希望这很清楚。我们暂时不想使用 HTML5 模式。
对，所以 base 甚至不需要。所有的角度路由都是相对的，所以除非您遇到服务器 mod 重写问题，否则我看不到问题发生在哪里

标签： javascript angularjs

【解决方案1】：

我不完全确定我是否理解问题...

$location.url('/stuff/after/hash?params=hey');

或者如果你只想在#之后设置路径：

$location.path('/stuff/after/hash');

是我通常使用的。但是您需要在此之后返回不带哈希的 url 吗？怎么样

window.location.origin + window.location.pathname

对于没有哈希和参数的当前url？

【讨论】：

我基本上需要 $location.path('/stuff/after/hash');，除了我需要将 URL 作为字符串获取——这种方法会导致浏览器立即导航到另一个页面（因为我想把网址放在标签中）
你不能使用<a href="#/this/be/my/new/route/son">Click here</a> ？
它几乎可以工作，除了服务器无法识别路由并且由于基本标签而变得丑陋（结果是foobar.com/public/angular/#/the/route - public/angular 是不应该的部分在那里）。
好的...由于其他非角度的东西，您需要将基本标签设置为 public/angular？

【解决方案2】：

您是否考虑过使用UI Router 库？

总的来说，它很棒。

针对您的问题，UrlMatcher service 提供了一种方法 format，除非我误解了您的问题，否则您正在尝试做的事情。

new UrlMatcher('/your/route/here').format(optionalNamedParameters);
// returns a formatted URL

【讨论】：