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, i.e. 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);

share|improve this question

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.

share|improve this answer
    
I'm not sure I understood you, so to clarify: if for example my SPA is on site.com/user and my other page at site.com/other and on server side I have set up routes for both user and other my page should navigate to /other even with Angular's $locationProvider.html5Mode(true); – hyperN May 1 '14 at 18:35
    
The issue is when you will have conflicts (route defined in SPA & ASP.Net) if in SPA you define foo.com/other and same in ASP.Net, the user will have a different experience if they navigate from within the app, or via a direct navigation to that link (or refresh for that matter) – Brocco May 1 '14 at 18:44
    
I don't have any routes defined in Angular, just $locationProvider (I don't call $routeProvider anywhere) – hyperN May 1 '14 at 18:46
    
If you are not defining any routing in Angular, then there is no need to set the html5Mode to true, it allows you to create links that are not prefixed with #. So by setting it when you click on your links angular is likely eating them rather than allowing them to be resolved via your server. – Brocco May 1 '14 at 18:48

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.