using $stateProvider with asp.net web api - angularjs

Question

I am learning angular and web api and stuck a bit with routing. For example I want to display products using the following localhost:53967/products.
My application file is as follow.
(function () {
var productListApp = angular.module("productManagement", ["common.services", "ui.router"]);
productListApp.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");//default url
$stateProvider.state("productList", {
url: "/products",
templateUrl: "app/products/productListView.html",
controller: "ProductListController"
})
});
})();
I also have an Index.cshtml pageset up as follow.
<div class="container">
<div ng-view></div>
</div>
WebApiConfig
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
This is my Global.asax file
protected void Application_Start()
{
AreaRegistration.RegisterAllAreas();
GlobalConfiguration.Configure(WebApiConfig.Register);
RouteConfig.RegisterRoutes(RouteTable.Routes);
BundleConfig.RegisterBundles(BundleTable.Bundles);
FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
}
localhost:53967/products returns a 404.
What could be the mistake?
Regards

Answer 1

localhost:53967/products returns a 404. What could be the mistake?
You are probably looking for http://localhost:53967/api/products instead of http://localhost:53967/products. Make sure that you are consistent with your route declarations:
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
You've got an api/ prefix over there, so the client should also respect this.