angular route with asp.net MVC remove hash # on url

Question

I'm developing a web application using ASP.NET MVC and AngularJS with ngRoute module. The configuration works fine but URLs contain #/ and I would like to remove them. I know the point is adding $locationProvider.html5Mode(true); and <base href="/"> in the <head> but there is some conflict with server side routing and I can't get it work.

This is the route provider

$routeProvider
    .when("/", {
        templateUrl: "Home/Phones",
        controller: "firstController"
    })
    .when("/phone", {
        templateUrl: "Home/Phone",
        controller: "secondController"
    })

Pages can be normally accessed through http://localhost/test/#/ and http://localhost/test/#/phone .

Now if I add $locationProvider.html5Mode(true); and <base href="test"> in the header section of index page I can access the default page at http://localhost/test/ but the page is empty. Trying to access and I get an error at http://localhost/test/phone fires 404 page not found.

So... how to solve the first problem? Console doesn't show any error, don't know what to try...

I guess I should at least change my RouteConfig.cs , not it contains the default

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

Answer 1

The browser is requesting an asset /test/phone but that doesnt exist. In the case of 404s within a Single Page App using html5Mode you need to configure your webserver to serve the index.html on all "404"s

angular route with asp.net MVC remove hash # on url

Question

1 answers

solution1
1 2016-03-09 16:00:45

angular route with asp.net MVC remove hash # on url

Question

1 answers

solution1 1 2016-03-09 16:00:45

solution1
1 2016-03-09 16:00:45