Additional AngularJS URL Parameters with HTML5 Mode and ASP.Net MVC

Question

Like the last question I asked, but a little more complicated.

I have an ASP.Net MVC maintained by Angular.

.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 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 (eg /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 I am facing is when I try to hit one of these routes with additional parameters, the page freezes giving this javascript error:

Error: $ 10 digest () fighters reached. Aborting!

Sometimes it will manifest itself endlessly (like a mirror looking in a mirror), which makes me think that a “certain” route causes problems. Without these optional parameters, the route ends completely. Thus, the page renders and the parameters are loaded into $ routeParams, but the page freezes, apparently because it is being rendered by itself.

If I select additional parameters on “any” MVC route and try to route using the hash notation (/ # / Catalog / test), it will load just fine (it does not hang and there are route parameters), but the version is html5 (/ Catalog / test) does not find the MVC route.

It's so clear that my problem is with my routing, but I'm not sure what I'm doing wrong. Can someone shed some light, what could be the problem?

Answer 1

Not sure if this will help. But a few things to keep in mind.

• When the hash is $locationProvider.html5Mode(true); will only be used by older browsers (IE <= 9)
• The hash of the URL will not be sent to the server. Therefore you do not need routes.MapRoute for the hash
• When the browser requests a URI (i.e. / Catalog / test), it first gets into ASP.NET routing, then when the pages load, it will be processed by AngularJS
• It also looks like the routes.MapRoute handler “independently” to send the whole page again, which means that when angular tries to process the route and tries to load /htm/catalog/search.htm , the ASP.NET route will be displayed on the page again, This will lead to an infinite loop, since the page loaded by angular.js contains its self and it will try to load it again.

Hope this helps.