Fixing AngularJS + MVC Routing Issues

hashratestore_icon-1Currently, I’m working on a hybrid AngularJS and MVC project, one of the tasks being to get rid of the # symbol from the URL. In pure AngularJS apps, this is very easily done by following the next two steps (and easily googled):

  1. Set up your base href in your index page: <head> <base href=”/”> </head>
  2. Add the following in your angular app config: $locationProvider.html5Mode(true)

 

The problem arises when you are in the .NET stack and using AngularJS with MVC. The above solution will still remove the # from URL, but page refresh won’t work. Why? This happens because MVC knows nothing about AngularJS routing and by following default MVC routing, it will look for an MVC page which doesn’t exist. Continue reading