Question

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

由于我是AngularJS的新手，并且未能找到关于将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;
    }

这很好用，并给我一些网址：

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

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

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

所以，最初，它似乎工作（至少URL看起来正确）。但是，当我开始在一个区域内的区域或视图之间导航时，或者即使我刷新，某些东西会“丢失”而且事情也不起作用。 URL看起来仍然正确，但找不到视图，并且没有正确加载。

有关如何使ASP.NET MVC和AngularJS路由协同工作以获得上述方案的任何帮助/指导？

感谢!!!

Answer 1

感谢答案，agbenyezi。我查看了你提供的文章，但它只能让我回到原来的位置。

然而，我能够弄明白并让它发挥作用。答案结果相对简单，但需要一些时间和大量的搜索。无论如何，因为我正在使用MVC区域，导航到http://servername/Application1/view[x]的URL（其中Application1是MVC控制器（在区域中）和view1，view2，view3等是Angularjs视图），MVC的一部分整个应用程序变得混乱，并试图在Application1控制器中找到一个名为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将路由接管到不同的视图，同时在URL中使用HTML5路由构造。

希望能帮助他人。

谢谢！

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

1 个答案: