asp.net-mvc - 如何使用 ASP.NET MVC 和 AngularJS 路由？

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 看起来是正确的)。但是，当我开始在区域或区域内的 View 之间导航时，或者即使我刷新，某些内容也会“丢失”并且无法正常工作。 URL 看起来仍然正确，但未找到 View 且未正确加载。

有关如何使 ASP.NET MVC 和 AngularJS 路由协同工作以实现上述场景的任何帮助/指导吗？

谢谢!!!

Answer 1

谢谢你的回答，agbenyezi。我看了你提供的文章，但它只是让我回到了原来的状态。

但是，我能够弄清楚并使其正常工作。答案相对简单，但花了一些时间和大量的搜索。无论如何，由于我使用的是 MVC 区域，因此导航到 URL http://servername/Application1/view[x] (其中 Application1 是 MVC Controller (在该区域中)，view1、view2、 view3 等是 Angularjs View )，整个应用程序的 MVC 部分感到困惑，并试图在 Application1 Controller (不存在)中找到名为 view[x] 的操作。

因此，在该区域的 AreaRegistration 类(其中定义该区域的特定路由)中，我只需要在任何默认 MVC 路由之前添加一种包罗万象的路由，以始终强制其执行应用程序 Controller 上的索引操作。像这样的东西:

        // 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 Controller 、Index 操作，然后 Angularjs 接管到不同 View 的路由，同时在 URL 中包含 HTML5 路由结构。