title: AngularJs: $http.post always return 404 error
body: <p>I am currently trying to develop a simple angular js application.
  I am trying to post data from client to web api.
  However, I am getting 404 error when I fire post request from angular app.</p>
  
  <p>Below is my post request,</p>
  
  <pre><code> $http.post('/api/LoadApi/', jsonData).then(function (result) {
                  console.log(result.data);
              })
             .catch(function (error) {
             });
  </code></pre>
  
  <p>where jsonData is a valid json data.</p>
  
  <p>My web api code is this,</p>
  
  <pre><code>public class LoadApiController : ApiController
  {
      [HttpPost]
      public HttpResponseMessage LoadData(object dataToLoad)
      {
          var response = Request.CreateResponse(HttpStatusCode.Created);
  
          return response;
      }
  }
  </code></pre>
  
  <p>My web api route config is this,</p>
  
  <pre><code>config.Routes.MapHttpRoute(
                  name: "DefaultApi",
                  routeTemplate: "api/{controller}/{dataToLoad}"
              );
  </code></pre>
  
  <p>However, when I run the code, it throws an error</p>
  
  <p><strong><em>Server Error in '/' Application.
  The resource cannot be found.
  Description: HTTP 404. The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable.  Please review the following URL and make sure that it is spelled correctly.
  Requested URL: /api/LoadApi/</em></strong></p>
  
  <p><strong><em>Can anyone point what is the problem with the above code?</em></strong></p>
  
  <p>It says there is some problem with url. The url generated is <a href="http://localhost:14154/api/LoadApi/" rel="nofollow">http://localhost:14154/api/LoadApi/</a> which looks correct.</p>