如何使用ASP.NET MVC和AngularJS路由？

我正在开发一个新的ASP.NET MVC和AngularJS应用程序，这个应用程序是为了成为一个SPA的集合。 我正在使用MVC区域概念来分离每个单独的SPA，然后在每个MVC区域内使用AngularJS来创buildSPA。

由于我是AngularJS的新手，无法find有关将MVC和AngularJS路由相结合的答案，所以我想我会在这里发表我的问题，看看能否得到一些帮助。

我有标准的MVC路由设置，它提供了每个MVC区域。

public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); routes.MapMvcAttributeRoutes(); routes.MapRoute( name: "Default", url: "{controller}/{action}/{id}", defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional } ); routes.AppendTrailingSlash = true; } 

这工作正常，给我的url如：

 http://servername/Application1/ http://servername/Application2/ 

现在，在每个应用程序区域，我试图使用AngularJS路由，也使用$ locationProvider.html5Mode（true）; 这样我可以在每个区域内获得客户端路由，例如：

 http://servername/Application1/view1 http://servername/Application1/view2 http://servername/Application2/view1/view1a http://servername/Application2/view2/view2a http://servername/Application2/view3 

这里是我的AngularJS的Application1路由片段：

 app1.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) { var viewBase = '/Areas/Application1/app/views/'; $routeProvider .when('/Application1/view1', { controller: 'View1Controller', templateUrl: viewBase + 'view1.html' }) .when('/Application2/view2', { controller: 'View2Controller', templateUrl: viewBase + 'view2.html' }) .otherwise({ redirectTo: '/Application1/view1' }); $locationProvider.html5Mode(true); }]); 

所以，最初，似乎工作（至less该url看起来是正确的）。 但是，当我开始在一个区域内的区域或视图之间进行导航时，或者即使我刷新了，某些东西就会“丢失”，事情就不起作用。 该url仍然看起来正确，但没有find视图，没有得到正确加载。

任何关于如何使ASP.NET MVC和AngularJS路由协同工作的帮助/指导给我上述场景？

谢谢！！！

Answer 1

谢谢你的回答，agbenyezi。 我看了你提供的那篇文章，但是只能让我回到我所在的地方。

但是，我能弄清楚，并得到它的工作。 答案结果相对简单，但花了一些时间和大量的search。 无论如何，因为我使用的MVC领域，导航到一个URL http://servername/Application1/view[x] （其中Application1是MVC控制器（在该地区）和视图1，视图2，视图3等Angularjs意见），整个应用程序的MVC部分变得困惑，并试图在Application1控制器（不存在）中find名为view [x]的操作。

因此，在该区域的AreaRegistration类（它为区域定义特定路由的地方），我只需要在任何默认MVC路由之前添加一种catch-all路由，以始终将其强制到Application控制器上的Index操作。 就像是：

  // Route override to work with Angularjs and HTML5 routing context.MapRoute( name: "Application1Override", url: "Application1/{*.}", defaults: new { controller = "Application1", action = "Index" } ); 

现在，当我导航到http://servername/Application1/view[x]它将路由到Application1 MVC控制器的Index操作，然后Angularjs接pipe到不同视图的路由，所有同时在URL中具有HTML5路由结构。

希望能帮助别人。

谢谢！