AngularJS MVC 4 routing, html5 hashbang urls - asp.net-mvc

Question

I have angularjs and mvc4 app. For using disqus I enabled hashbang and html5Mode url.
With html5 mode, server side url rewriting needs to be fixed. otherwise a full page refresh leads to 404 error.
The entry point of my application is Index.chtml in home controller and it uses _layout.chtml (for bundling and minification.)
My webconfig route is :
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{*url}",
defaults: new { controller = "Home", action = "Index"},
namespaces: new[] { "Flashspark.Controllers" });
and my AngularJS config is:
(function () {
'use strict';
var app = angular.module('app');
// Collect the routes
app.constant('routes', getRoutes());
// Configure the routes and route resolvers
app.config(['$routeProvider', '$locationProvider', 'routes', routeConfigurator]);
function routeConfigurator($routeProvider,$locationProvider, routes) {
routes.forEach(function (r) {
$routeProvider.when(r.url, r.config);
$locationProvider.html5Mode('true').hashPrefix('!');
});
$routeProvider.otherwise({ redirectTo: '/' });
}
// Define the routes
function getRoutes() {
return [
{
url: '/',
config: {
templateUrl: 'app/thoughts/thoughts.html',
title: 'thoughts',
settings: {
nav: 1,
content: '<i class="fa fa-book"></i> Thoughts'
}
}
}, {
url: '/faq',
config: {
title: 'faq',
templateUrl: 'app/faq/faq.html',
settings: {
nav: 2,
content: '<i class="fa fa-info"></i> FAQ'
}
}
},
{
url: '/timeline',
config: {
templateUrl: 'app/timeline/timeline.html',
title: 'timeline',
settings: {
nav: 3,
content: '<i class="fa fa-arrows-h"></i> Timeline'
}
}
},
{
url: '/about',
config: {
templateUrl: 'app/about/about.html',
title: 'contact',
settings: {
nav: 4,
content: '<i class="fa fa-list fa-1x"></i> About'
}
}
},
{
url: '/thoughts/:article',
config: {
templateUrl: 'app/article/article.html',
title: 'article',
}
}
];
}
=================================================================================
THE PROBLEM I AM HAVING:
With this configuration, All the routes which are only 1 deep work without any issues
like:
/faq , /timeline
even after refresh, the url's are preserved.
However for URL's like:
/thoughts/:articleid (2 deep)
the styling for the whole app is stripped out when I refresh from this page.

Answer 1

You need to have to a default route for thoughts
{
url: '/thoughts',
config: {
templateUrl: 'app/article/article.html',
title: 'article',
}
}