解决Angular 1.5中的相对$资源路径

时间:2016-12-09 19:15:56

标签: angularjs rest angular-resource

我的Angular 1.5.8 Web应用程序位于http://www.example.com/foo/,我的RESTful条形列表位于http://www.example.com/foo/api/bars。当ui-router进入Angular中的栏位列表时,我的浏览器位于 http://www.example.com/foo/#/bars 。我只想连接到RESTful资源,使用HTTP http://www.example.com/foo/api/bars连接到GET

所以我尝试了最明显的事情:

$resource("api/bars/")

我认为应该api/bars/解析当前路径http://www.example.com/foo/#/bars给我http://www.example.com/foo/api/bar,对吗?但它不起作用(尽管我可以发誓它与$http合作)。相反,它给了我一个$resource:badcfg错误。

Angular允许我执行以下操作,但这不会产生正确的路径,而是给我http://www.example.com/api/bars

$resource("/api/bars/")

所以我尝试$browser.baseHref(),但似乎设置为空字符串(为什么?),再次生成http://www.example.com/api/bars

$resource($browser.baseHref() + "/api/bars/")

我尝试使用$location.path(),但Angular认为我想在哈希标志之后使用路径,因此不能正常工作,只给我http://www.example.com/bars/api/bars。卫生署!

$resource($location.path() + "/api/bars/")

如何简单地将api/bars/解析为当前网址http://www.example.com/foo/#/bars的基本路径,生成http://www.example.com/foo/api/bars (甚至只是路径)?

请注意,对于硬编码绝对路径或更改HTML代码, 我为什么要?此外,这个应用程序将安装在http://www.example.com/foo/http://www.example.com/foo-demo/的同一台服务器上的两个位置(嘿,Java,Tomcat和JAX-RS很容易)。应用程序应在每个位置下不加修改地运行,分别访问http://www.example.com/foo/api/barshttp://www.example.com/foo-demo/api/bars处的RESTful API条形列表。

这并不复杂;这很简单" URI语法101"已在RFC中概述了二十多年。我只想将api/bars/解析为当前网址http://www.example.com/foo/#/bars的基本路径。我如何在Angular 1.5中做到这一点?

2 个答案:

答案 0 :(得分:1)

好的,有两种方法可以做到这一点。如果你绝对想要一个绝对路径,你可以使用它:

$resource(location.origin + location.pathname + "api/bars/")

请注意使用location对象location.origin来建立协议,域和端口;和location.pathname建立基本路径。 (在某些版本的Windows 10上,微软将再次对IE11中的location.origin doesn't work施加压力。)

但更好的方法就是使用:

$resource("api/bars")

"等等,我以为你说这会给你一个错误!"你可能会惊呼。事实证明我错了。我确实收到了错误,但这是因为我没有设置Accept标头来请求JSON,以及我得到的plain/text响应(这是默认的我的RESTful资源)令人困惑$resource。事实证明,相对URI毕竟会起作用。

答案 1 :(得分:1)

可以使用$resource的相对路径语法,因为您可以将其用于$http使用的$resource。这可以通过省略前导斜杠(如您所建议的)或通过使用./为资源添加前缀来完成。

您的badcfg错误似乎更有可能是因为您的请求正常运行但服务器响应与预期不符。所以你可能正在返回一个对象而不是一个数组。请使用开发工具调试从服务器返回的内容。

有关详细信息,请参阅docs on $resource