AngularJS optional URL parameters with HTML5 mode and ASP.Net MVC - asp.net-mvc

Question

Similar to the last question that I asked, but a little more complicated.
I've got an ASP.Net MVC served Angular app.
.when("/Catalog",
{
templateUrl: "/htm/catalog/catalog.htm"
})
.when("/Catalog/:Category1",
{
templateUrl: "/htm/catalog/search.htm"
})
.when("/Catalog/:Category1/:Category2",
{
templateUrl: "/htm/catalog/search.htm"
})
.when("/Catalog/:Category1/:Category2/:Category3",
{
templateUrl: "/htm/catalog/search.htm"
})
.when("/Catalog/:Category1/:Category2/:Category3/:Category4",
{
templateUrl: "/htm/catalog/search.htm"
});
$locationProvider.html5Mode(true);
And the MVC routing looks like this:
// AngularJS Route. This is what allows angular to handle its own routing.
routes.MapRoute(
"hash",
"#/{whatever}/{param}/{param2}/{param3}/{param4}/{param5}",
new
{
controller = "Home",
action = "Index",
param = UrlParameter.Optional,
param2 = UrlParameter.Optional,
param3 = UrlParameter.Optional,
param4 = UrlParameter.Optional,
param5 = UrlParameter.Optional
}
);
// This catches all of the other requests (e.g. /img/logo.jpg);
routes.MapRoute(
"whatever",
"{whatever}/{param}",
new
{
controller = "Home",
action = "Index",
param = UrlParameter.Optional,
param2 = UrlParameter.Optional,
param3 = UrlParameter.Optional,
param4 = UrlParameter.Optional,
param5 = UrlParameter.Optional
}
);
The home/index action just returns my index page:
public void Index()
{
String html = System.IO.File.ReadAllText(HttpContext.Server.MapPath("~/htm/index.htm"));
HttpContext.Response.Write(html);
}
The problem that I'm having is when I try to hit one of those routes with the optional parameters, the page hangs, giving this javascript error:
Error: 10 $digest() iterations reached. Aborting!
Sometimes it will will endlessly render itself (like a mirror looking into a mirror), which makes me think that the "whatever" route is causing problems. Without having those optional parameters on it, the route fails completely. This way the page does render and the parameters are loaded into $routeParams, but the page hangs, presumably because it's rendering itself recursively.
If I take out the optional parameters on the "whatever" MVC route and try to hit the route with the hash notation (/#/Catalog/test), it loads just fine (it doesn't hang and the route parameters are there), but the html5 version (/Catalog/test) fails to find an MVC route.
So clearly my problem is with my routing, but I'm not sure what I'm doing wrong. Can somebody shed some light as ot what the problem might be?

Answer 1

Not sure it will help. But a couple of things to keep in mind.
When $locationProvider.html5Mode(true); hash will only be used by legacy browsers (IE <= 9)
The hash part of the url will not be sent to the server. So you don't need the routes.MapRoute for hash
When a browser requests a URI (i.e /Catalog/test) it will first hit the ASP.NET routing then, when the pages is loaded, it will be handled by AngularJS
It also looks like the routes.MapRoute handler "whatever" send the entire page again, meaning that when angular tries to handle the route and tries to load /htm/catalog/search.htm the ASP.NET route will serve up the page again. This would cause an endless loop, since the page loaded by the angular.js contains its self, and it will try to load it again.
Hope it helps.