ASP MVC Angular JS $http not found

Question

I have a problem with calling http get to WebApi controller from my angular code. I am using ASP MVC just to provide start page and the start page url looks like: http://localhost:23845/StudentsEditor/StudentsView and now from angular I am callinh http request:

angular.element(document).ready(function () {
 $http({
 method: "GET",
 url: "api/Groups/GetGroups",
 dataType: "json",
 }).then(function successCallback(response) {
 $scope.groups = response.data;
 }, function errorCallback(response) {
 alert("trouble...");
 });

and I am getting 404 because the URL is incorrect. It concats the path and it loks like: GET http://localhost:23845/StudentsEditor/api/Groups/GetGroups instead of http://localhost:23845/api/Groups/GetGroups

plese give me some advice hoe to resolve it. Of course I have defined RouteConfig: public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

 routes.MapRoute(
 name: "Default",
 url: "{controller}/{action}/{id}",
 defaults: new { controller = "StudentsEditor", action = "StudentsView", id = UrlParameter.Optional }
 );

and the webApi config:

 config.MapHttpAttributeRoutes();
 config.Routes.MapHttpRoute(
 name: "DefaultApi",
 routeTemplate: "{url}/api/{controller}/{id}",
 defaults: new { id = RouteParameter.Optional }
 );
 var json = config.Formatters.JsonFormatter;
 json.SerializerSettings.PreserveReferencesHandling = Newtonsoft.Json.PreserveReferencesHandling.Objects;
 config.Formatters.Remove(config.Formatters.XmlFormatter);

Answer 1

You should not hard code url's like that. You may use the Url.Content or Url.RouteUrl helper methods in your razor view to generate the relative url to the app base/root. It will take care of correctly building the url regardless of your current page/path. Once you get this value, You can use angular's value provider to pass this data from your razor view to your angular controller/ angular data services.

So in your razor view (Specific page/ Layout file), You may add this.

<script>
 var myApp = myApp || {};
 myApp.Urls = myApp.Urls || {};
 myApp.Urls.baseUrl = '@Url.Content("~")'; 
</script>
<script src="~/Scripts/AngularControllerForPage.js"></script>
<script>
 var a = angular.module("app").value("appSettings", myApp);
</script>

and in your angular controller, the appSettings will be injected and you can use that and build the correct url to your other web api end points.

var app = angular.module("app", []);
var ctrl = function (appSettings,$http) {
 var vm = this;
 vm.baseUrl = appSettings.Urls.baseUrl;
 //build other urls using the base url now
 var getUGroupsUrl = vm.baseUrl + "api/Groups/GetGroups";
 // you can use getUGroupsUrl now for your http calls.
 console.log(getUGroupsUrl);
 $http.get(getUGroupsUrl).then(function(response) {
 console.log(response.data);
 }
};
ctrl.inject=['$http'];
app.controller("ctrl", ctrl)

You may also consider moving your web api calls from your angular controller to a data service to keep things clean & keep concern separated.

Answer 2

I found easy way to accomplish what I was looking for:

 angular.element(document).ready(function () {
 $http({
 method: "GET",
 url: window.location.origin + '/api/Groups/GetGroups',
 dataType: "json",
 }).then(function successCallback(response) {
 $scope.groups = response.data;
 }, function errorCallback(response) {
 alert("trouble..");
 });
 });

and the key is window.location.origin which returns protocol + host + port