带有mvc的spa模型中的AngularJS路由无限循环答案

【问题标题】：AngularJS Routing infinite loop in spa model with mvc带有mvc的spa模型中的AngularJS路由无限循环
【发布时间】：2014-08-06 22:52:20
【问题描述】：

我在网上尝试了很多其他帖子，这些帖子似乎与我的问题相同，但都没有成功。

我有这个菜单：

<ul class="nav navbar-nav">
    <li class="active"><a href="#Painel/1">Novas</a></li>
    <li><a href="#Painel/2">Todas</a></li>
    <li><a href="#Painel/3">Finalizadas</a></li>
    <li><a href="#Painel/4">Pendentes</a></li>
</ul>

相当简单的导航栏。此路由设置：

module.config(["$routeProvider", "$locationProvider", function($routeProvider, $locationProvider)
{
    //$locationProvider.html5Mode(true);

    $routeProvider
        .when('/Painel/:painelId/', 
        {
            templateUrl : function(params)
            {
                return "/Painel/Index/" + params.painelId;
            },
            controller  : 'painelController'
        })
        .otherwise(
        {
            redirectTo: "/Painel"
        });
    }]);
}

我的 MVC 控制器：

public class PainelController : Controller
{
    public ActionResult Index(int? id))
    {
        return View();
    }
}

最后是我的角度控制器：

module.controller('painelController', ["$scope", "$routeParams", function ($scope, $routeParams)
{
    debugger;
}]);

它是一个非常简单的架构，但 Angular 无限循环通过它的控制器。我小心地将我的templateUrl 亲戚设置为/，就像那里建议的许多帖子一样，但它没有用。它可以将参数发送到 mvc Action，但随后它开始循环在 angular 的控制器 debugger 上永远停止。

我能做什么？

【问题讨论】：

标签： javascript asp.net-mvc angularjs asp.net-mvc-4 single-page-application

【解决方案1】：

您的问题是 :painelId 不是可选的，因此您会无限地陷入 else() 重定向。将 :painelId 设为可选

'/Painel/:painelId?/'

这应该可以解决您的问题。如果你没有使用支持可选参数的 Angular 版本，那么你需要添加另一个 when() 来覆盖 '/Painel' 路由。

【讨论】：

谢谢老兄，我会检查的。我使用的是昨天下载的全新薄荷版本。
它成功了，但是现在的 url 得到了这个后缀 %3F/，即 ? 代码。
你需要注册那个路由，而不是像在地址栏中那样使用它。 $routeProvider .when('/Painel/:painelId?/', { templateUrl : function(params) { return "/Painel/Index/" + params.painelId; }, controller : 'painelController' }) .otherwise( { redirectTo : "/帕内尔" }); }]);
我已经做到了。此外，params.painelId 最后带有?，我必须将其删除才能返回一个干净的 url，但是这样做的事件，url 变得很奇怪。

【解决方案2】：

主要问题不在于 Angular 代码，而在于 MVC 的 return Action：

return View();

由于您使用的是动态内容，因此您不必返回完整的 html 源代码（带有html、head、body 标签...），所以我不得不更改为：

return PartialView();

什么更有意义。因为每个请求都在调用一个新的角度代码，这会打开一个新的请求等等......然后我为可选参数创建了两条路由（我不知道为什么它不像@Tacoman667 指出的那样工作）

【讨论】：

我不敢相信我没有抓住这一点，因为我做了类似的事情。我创建了一个包罗万象的控制器动作，它提供部分视图而不是每个视图的动作。我将我的角度视图放在单独的 cshtml 文件中以进行组织。基本上我有 index.cshtml 来提供“主页”页面以开始角度和所有角度路线的另一个动作。
@Tacoman667 和我做的一样。但是你的回答对我也很有帮助。这就是我赞成它的原因。谢谢老兄。
很高兴能帮上忙，我的朋友！