带有书签的 Angular SPA URL 的 ASP.NET MVC 4 路由答案

【问题标题】：ASP.NET MVC 4 Route for Bookmarked Angular SPA URLs带有书签的 Angular SPA URL 的 ASP.NET MVC 4 路由
【发布时间】：2013-10-09 04:36:42
【问题描述】：

我正在尝试在 AngularJS 中构建一个单页应用程序，并在 HTML5 模式下完成客户端路由。如果用户曾经为我网站上的某个页面添加书签，我知道我需要一个基本的服务器端路由方案，但我真的希望它始终提供我的单个主页并将相同的 URL 传播到客户端路由部分。

这种包罗万象的路由完美地适用于只有一层深度的简单 URL：

routes.MapRoute(
    "Default", // Route name
    "{*catchall}", // URL with parameters
    new { controller = "Home", action = "Index" } // Parameter defaults
);

示例网址：

http://myapp.com/moreInfo
http://myapp.com/contactUs

“moreInfo”和“contactUs”只是Angular中的命名路由。单页应用程序的唯一真正入口点是http://myapp.com。到目前为止，这一切都很顺利。

但是，当我尝试深入多条路线时，应用程序会进入无限循环：

http://myapp.com/user/5

这是因为我的服务器端路由不足以将“user/5”网址“传递”到我的客户端应用程序吗？我是否需要做任何特别的事情来确保无论 URL 嵌套多深，它都能正确传递给我的 SPA？

【问题讨论】：

标签： asp.net-mvc angularjs asp.net-mvc-routing

【解决方案1】：

问题不在于路由配置，我使用 angular js 和 mvc 4 进行了类似的设置，并且下面的路由工作正常。

routes.MapRoute(
  name: "Application",
  url: "{*url}",
  defaults: new { controller = "Home", action = "Index" },
  namespaces: new[] { "MyApp.Web.Controllers" });

您是否在 Angular 配置方法中将 html5Mode 设置为 true？

$locationProvider.html5Mode(true);

您可以尝试使用 fiddler 向您的应用发送获取请求并查看响应。如果是 301 或 302，那么您有服务器端重定向循环问题。如果是 200，那么您的 angular/js 代码可能是问题所在。

【讨论】：

【解决方案2】：

如果我理解正确，您希望将“/user/5”提供给 Angular 中的路由引擎。如果是这种情况，Angular 会处理散列之后的路由。这意味着你想要的路线是

http://myapp.com#/user/5

您还需要使用如下路由正确配置 $routeProvider：

angular.module('yourApp', []).
  config(['$routeProvider', function($routeProvider) {
  $routeProvider.
      when('/user/:id', {templateUrl: 'SOME_HTML_FILE'}).
      otherwise({redirectTo: '/'});
}]);

然后您需要在控制器中获取路由参数：

function someController($scope, $routeParams) {
  if($routeParams.id){
       alert('Super Fly!');
  }
}

【讨论】：