Question

我有一个带有Web API项目和Web UI项目的Visual Studio 2013解决方案（使用Angular）。我正在使用IIS Express。

有没有办法设置这些项目，以便Angular代码可以调用Web API项目而无需在localhost和端口号中进行硬编码？

            return $http.get("http://localhost:1561/api/products")
                .then(function (response) {
                    return response.data;
                });

如果我硬编码localhost：1561而不是仅使用＆＃34; / api / products＆＃34;样式我必须在部署到生产之前手动更改代码并将其更改回以在开发期间运行它。

有更简单的方法吗？

谢谢！

Answer 1

var rootPath;

if (location.hostname === 'localhost') {
    rootPath = 'http://localhost:1561';
} else {
    rootPath = 'http://' + location.hostname;
}

return $http.get(rootPath + '/api/products')
    .then(function (response) {
        return response.data;
    });

Answer 2

我实际上写了一个简单的实用工具方法，它返回绝对URL，所以在你的代码中你只需要输入相对的URL。下面是这个方法，您应该能够通过JS调用相对URL（即 / api / products ）或将其转换为辅助扩展方法...

// Code
public static string ToAbsoluteUrl(string relativeUrl)
        {
            if (string.IsNullOrEmpty(relativeUrl))
                return relativeUrl;

            if (HttpContext.Current == null)
                return relativeUrl;

            if (relativeUrl.StartsWith("/"))
                relativeUrl = relativeUrl.Insert(0, "~");
            if (!relativeUrl.StartsWith("~/"))
                relativeUrl = relativeUrl.Insert(0, "~/");

            var url = HttpContext.Current.Request.Url;
            var port = url.Port != 80 ? (":" + url.Port) : String.Empty;

            return String.Format("{0}://{1}{2}{3}",
                url.Scheme, url.Host, port, VirtualPathUtility.ToAbsolute(relativeUrl));
        }

Answer 3

据我所知，我不可能做我想做的事情。以下是选项：

1）在本地计算机上使用IIS。这样，您可以根据需要设置路径/虚拟目录。这也使得在调试期间从其他浏览器调用API变得更容易。注意：这需要您从此时开始以管理模式运行Visual Studio。

2）将两个项目合二为一。对我来说，这不是一个有效的选项，因为我需要提供完全独立于API代码的UI代码。

希望这有助于其他人尝试使用Angular和Web API。

使用IIS Express在Visual Studio中运行Angular和Web API

3 个答案: