Angular $ locationProvider与ASP.NET MVC路由

Question

I'm handling routing using ASP.NET MVC (using RouteCollection class). But my front end is written in angular and at some places I want to change url using Angular's $location and I want it to support HTML5, so I added this line to my module.config :

$locationProvider.html5Mode(true);

But since then it seems that my routing has been handled by Angular.

For example my SPA is on mysite.com/user and there I want to change url using Angular's $location (so when for example users click tab url changes to mysite.com/user/tab without reloading).

But when user navigates from that page to any other (for example mysite.com/other) I want that handled by ASP.NET MVC's routing.

What now is happening is that my url changes to mysite.com/other but website doesn't navigate to that page, ie MVC routing doesn't handle change.

EDIT

I don't have any routes defined in Angular, all my routes are defined on server side and server side routing just stooped working after I added $locationProvider.html5Mode(true);

Answer 1

No unfortunately not. If your angular SPA is hosted at foo.com with HTML 5 mode on, foo.com/spaRoute1 will hit your ASP.Net server and expect to find that route (likely controller=SpaRoute1 action=Index).

You will need to set your default route to always resolve to the controller/action that is responsible for serving up your SPA. All while defining any other routes that you need which are not specific to your SPA.

Answer 2

I don't know so much about ASP.Net. but the same problem I solved with node js like this.

I solved the same problem with push API enable to the server. Basically angular render the page at client side and find the exact route by # . you can enable html5 mode to remove # .

  $locationProvider.html5Mode({
    enabled:true,
    requireBase: false
});

Remember don't forget to enable push API support at server side. just by adding

    //To suport push API 
    // Just for DEMO in your case it may be different
app.use('/admin/*', function(req,res){
  var user = req.session.user;
   res.render("adminView",{user:user});
});

Here when you hard refresh or enter direct url into browser without # tag. server will render the home page(index) page and load your all required file. after that angular will handle all the routing for you because you have enabled html5 mode so no more need to add # in url.