Selfhosted web api route to angularJS index.html

Question

I use OWIN to selfhost (I'm not using IIS) my web api and I was reading a lot about web applications based on asp.net web api and angularJS. In most examples there where a default route of the api like

HttpSelfHostConfiguration config = new HttpSelfHostConfiguration(_baseAddress);
config.Routes.MapHttpRoute(
  name: "DefaultApi",
  routeTemplate: "api/{controller}/{id}",
  defaults: new { id = RouteParameter.Optional }
);

But I don't understand where the route to the index.html file of the angularJS frontend happens? I know how to get data when I'm calling an api request like api/person/5. But which part of the code is responsible to route any unspecified api request to the main page of angularJS?

Answer 1

Using WebAPI and a default route to Index.html is not a good idea. Because the calling would be yourapp.com/api/xxxx

Instead since you are using IIS (I assume you arent using OWIN to selfhost).In IIS you can and should set a default page.

This way your url will just look ile yourapp.com regardless of it being index.html, jack.html, or test.html

To answer your question But which part of the code is responsible to route any unspecified api request to the main page of angularJS?

app.config(function ($routeProvider) {

    $routeProvider.otherwise({ redirectTo: "/Main" });
});

use $routeprovider.otherwise to do the redirct. If you send an non-identifiable route to angular the otherwise config value will redirect you to your main in this instance.

This MSDN page will walk you through setting up a default page in iis