MVC and angularJs routing conflict

Question

In my MVC application I have a home controller and an index method in it. I have set the index methods as the default route in the RouteConfig file.

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

I'm using Angular JS in my application. I have defined a service and calling an action 'Clusters' in the home controller using $http.

app.service('homeService', function ($http) {

    this.getClusters = function () {
        var promise = $http.get("Clusters");
        return promise;
    };
});

When I run the project and go to the default url [http://localhost:56698/] then http://localhost:56698/Clusters 404 not found exception occurred. But it is working if the url is http://localhost:56698/Home/Index. So my Angular js services are not working in the default url. How to fix this?

P t P t · Accepted Answer · 2015-12-11T12:48:16

I think there is a problem with your javascript reference. you should use relative referencing like this :

<script src="@Url.Content("~/Scripts/angular.js")" type="text/javascript"></script>

or you should change your clusters calling:( I assumed that your javascript code is located in your view)

 this.getClusters = function () {
    var promise = $http.get('@Url.action(Clusters,Your controller name)');
    return promise;
};

MVC and angularJs routing conflict

1 Answers