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

一尘不染

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

angularjs

我正在研究一个新的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路由一起工作的任何帮助/指南，都可以为我提供上述方案？

谢谢！！！

阅读 181

2020-07-04

共1个答案

一尘不染

感谢您的回答，agbenyezi。我看了您提供的文章，但无论如何，它只能使我回到原来的状态。

但是，我能够弄清楚并使其正常运行。答案是相对简单的，但是花了一些时间和很多搜索。无论如何，由于我使用的是MVC区域，因此导航到URL
http://servername/Application1/view[x]（其中Application1是MVC控制器（在该区域中），而view1，view2，view3等是Angularjs视图），整个应用程序的MVC部分变得令人困惑并尝试在Application1控制器（不存在）中找到一个名为view
[x]的操作。

因此，在区域的AreaRegistration类（在其中定义区域的特定路由）中，我只需要在任何默认的MVC路由之前添加一种包罗万象的路由，以始终将其强制应用于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路由构造。

希望对别人有帮助。

谢谢！

2020-07-04