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);

Shyju · Accepted Answer · 2016-01-04 21:56:24Z

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.

dacio · Accepted Answer · 2016-01-04 22:39:40Z

0

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

answered Jan 4, 2016 at 22:39

dacio

518 bronze badges

Collectives™ on Stack Overflow

ASP MVC Angular JS $http not found

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related