具有 HTML5 模式和 ASP.Net MVC 的 AngularJS 可选 URL 参数答案

【问题标题】：AngularJS optional URL parameters with HTML5 mode and ASP.Net MVC具有 HTML5 模式和 ASP.Net MVC 的 AngularJS 可选 URL 参数
【发布时间】：2013-03-26 19:25:06
【问题描述】：

与我提出的最后一个问题类似，但稍微复杂一些。

我有一个 ASP.Net MVC 服务的 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);

MVC 路由看起来像这样：

// 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
    }
);

home/index 操作只返回我的索引页面：

public void Index()
{
    String html = System.IO.File.ReadAllText(HttpContext.Server.MapPath("~/htm/index.htm"));
    HttpContext.Response.Write(html);
}

我遇到的问题是，当我尝试使用可选参数访问其中一个路由时，页面挂起，出现以下 javascript 错误：

错误：达到 10 次 $digest() 迭代。中止！

有时它会无休止地渲染自己（就像一面镜子照镜子），这让我觉得“随便”的路线会导致问题。如果没有这些可选参数，路由将完全失败。这样页面确实渲染并且参数被加载到$routeParams中，但是页面挂起，大概是因为它递归地渲染自己。

如果我取出“whatever”MVC 路由上的可选参数并尝试使用哈希表示法 (/#/Catalog/test) 命中该路由，它加载得很好（它不会挂起并且路由参数有），但是html5版本（/Catalog/test）找不到MVC路由。

很明显我的问题在于我的路由，但我不确定我做错了什么。有人可以阐明问题可能是什么吗？

【问题讨论】：

标签： asp.net-mvc html routing angularjs

【解决方案1】：

不确定它是否会有所帮助。但有几件事要记住。

当$locationProvider.html5Mode(true); 哈希仅由旧版浏览器使用时 (IE
url 的哈希部分不会发送到服务器。所以你不需要routes.MapRoute 来进行哈希
当浏览器请求一个 URI（即 /Catalog/test）时，它首先会点击 ASP.NET 路由，然后，当页面加载时，它会由 AngularJS
看起来routes.MapRoute 处理程序“无论如何”再次发送整个页面，这意味着当 Angular 尝试处理路由并尝试加载/htm/catalog/search.htm 时，ASP.NET 路由将再次提供页面。这将导致无限循环，因为 angular.js 加载的页面包含它自己，它会尝试再次加载它。

希望对您有所帮助。

【讨论】：