How to host Web API with AngularJs inside Virtual Directory on IIS

Question

I am new with Web Api and using n-tier architecture. I have a simple application with AngularJs as javascript framework and using Web Api as RESTFul service. I also have Data Access Layer, Business Logic Layer and a separate layer for Model.Html pages are included in same project containing Api, in Pages folder. This is my project structure:

I am trying to host the project on Local IIS. I have changed the servers option from properties of FirstApp.Web to local IIS. Html pages are being displayed fine. The page contains simple login form. Using Angularjs service I am calling the Web Api which is under Controllers folder.

this.authenticate = function (obj) {
        return $http.post('/api/Employee/Validate/', obj, {});
    }

But it is throwing

Help me to figure out how to host the whole application on local IIS.

Answer 1

It happens if you do not host the application at root level - http://localhost/Pages/Index.html.

In my saturation, I use ASP.Net MVC _layout.cshtml, so I get the site's URL using @Url.Content("~"), and append it at the front of every Angular's requested URL.

// This script tags is placed inside _layout.cshtml
<script type="text/javascript">        
    window.MyApp = {
        rootPath: '@Url.Content("~")'
    };
</script>

Usage

this.authenticate = function (obj) {
   return $http.post(window.MyApp.rootPath + 'api/Employee/Validate/', obj, {});
}