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

Question

I have a Visual Studio 2013 solution with a Web API project and a Web UI project (using Angular). I am using IIS Express.

Is there a way to set these projects up so that the Angular code can call the Web API project without hard-coding in the localhost and port number?

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

If I hard-code localhost:1561 instead of just using the "/api/products" style I have to manually change the code before deploying to production and change it back to run it during development.

Is there an easier way?

Thanks!

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

I actually wrote a simple utility method that returns the absolute URL so in your code you just have to type the relative URL. Below is this method which you should be able to call from your JS passing the relative URL (ie /api/products ) or by converting it into a helper extension method...

// 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

From what I understand, it is not possible to do what I was attempting to do. Here are the options:

1) Use IIS on the local machine. That way you can set up the paths/virtual directories as necessary. This also makes it easier to call the API from other browsers during debugging. Note: This does require that you then run Visual Studio in admin mode from this point forward.

2) Put the two projects into one. For me this was not a valid option because I am need to deliver the UI code completely separate from the API code.

Hope this helps others trying to work with Angular and Web API.