{
  "path": "/posts/a-tale-of-angular-html5mode-aspnet-mvc",
  "site": "at://did:plc:yy3apqjlms24kso7ahn7lbmb/site.standard.publication/3mova7c4nho2b",
  "tags": [
    "angularjs",
    "asp.net"
  ],
  "$type": "site.standard.document",
  "title": "A tale of Angular, html5mode, ASP.Net MVC and ASP.Net Web API",
  "description": "This article offers tips on how to preserve specific routes while redirecting non-specified URLs to the root angular app page for ASP.Net MVC and Web API.",
  "publishedAt": "2015-05-05T00:00:00.000Z",
  "textContent": "So. You want to kick hash based routing to the kerb. You want _real_ URLs. You've read the HTML5 mode section of the Angular $location docs and you're good to go. It's just a matter of dropping $locationProvider.html5Mode(true) into your app initialisation right?\n\nWrong.\n\n\n\nYou want your URLs to be shareable. If, when you copy the URL out of your browser and send it someone else, they do not get taken to the same position in the application as you do then I've got news for you: THAT'S NOT REALLY A URL. And just using $locationProvider.html5Mode(true) has done nothing useful for you. You want to ensure that, if the URL entered in the browser does not relate to a specific server-side end-point, the self-same HTML root page is _always_ served up. Then Angular can load the correct resources for the URL you have entered and get you to the required state.\n\nThere are tips to be found in Angular UI's How to: Configure your server to work with html5Mode doc. However they required a little extra fiddling to get my ASP.Net back end working quite as I wanted. To save you pain, here are my cultural learnings.\n\nASP.Net MVC\n\nI had an ASP.Net MVC app which I wanted to use html5mode with. To do this is simply a matter of tweaking your RouteConfig.cs like so:\n\nWith this in place my existing routes work just as I would hope. Any route that doesn't fit that registered can be assumed to be html5mode related and will serve up the root angular app page as I'd hope.\n\nASP.Net Web API\n\nLater I realised that the app in question was mostly static content. Certainly the root angular app page was and so it seemed wasteful to require an ASP.Net MVC controller to serve up that static content. So I stripped out MVC from the app entirely, choosing to serve raw HTML instead. For the dynamic parts I switched to using Web API. This was \"hittable\" as long as I had my WebApiConfig.cs and my system.webServer section in my web.config lined up correctly, viz:\n\nWith this in place I can happily hit \"api\" prefixed URLs and still land on my Web API controllers whilst other URLs will serve up the root angular app page. Lovely.",
  "canonicalUrl": "https://johnnyreilly.com/posts/a-tale-of-angular-html5mode-aspnet-mvc"
}