Angular $locationProvider with ASP.NET MVC routing

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

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.