如何使用 ASP.NET MVC 和 AngularJS 路由? [英] How to use ASP.NET MVC and AngularJS routing?

问题描述

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

I’m working on a new ASP.NET MVC and AngularJS application that is intended to be a collection of SPAs. I’m using the MVC areas concept to separate each individual SPA, and then I’m using AngularJS within each MVC area to create the SPA.

由于我是 AngularJS 的新手并且无法找到关于结合 MVC 和 AngularJS 路由的答案，我想我会在这里发布我的问题，看看我是否能得到一些帮助.

Since I’m new to AngularJS and haven’t been able to find an answer regarding combining both MVC and AngularJS routing, I thought I’d post my question here to see if I could get some help.

我有标准的 MVC 路由设置，它为每个 MVC 区域提供服务.

I have the standard MVC routing setup, which serves up each MVC area.

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

这很好用，并为我提供了如下网址:

This works fine and gives me URLs like:

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

现在，在每个应用领域，我都在尝试使用 AngularJS 路由，也使用 $locationProvider.html5Mode(true);以便我获得每个区域内的客户端路由，例如:

Now, within each application area, I’m trying to use AngularJS routing, also using $locationProvider.html5Mode(true); so that I get the client-side routing within each area, something like:

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

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

Here’s my AngularJS routing snippet for 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);
}]);

所以，最初，它似乎有效(至少 URL 看起来是正确的).但是，当我开始在区域之间或区域内的视图之间导航时，或者即使我刷新，某些东西也会丢失"并且无法正常工作.该 URL 看起来仍然正确，但未找到视图且未正确加载.

So, initially, it seems to work (at least the URL looks correct). But, when I start navigating between areas or views within an area, or even if I refresh, something gets "lost" and things don’t work. The URL still looks correct but views aren’t found and aren’t getting loaded correctly.

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

Any help/guidance on how to make ASP.NET MVC and AngularJS routing work together to give me the scenario described above?

谢谢！！！

推荐答案

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

Thanks for the answer, agbenyezi. I looked at the article you provided but it only got me back to where I was anyway.

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

However, I was able to figure it out and get it working. The answer turned out to be relatively simple, but it took some time and a lot of searching around. Anyway, since I am using MVC areas, navigating to a URL of http://servername/Application1/view[x] (where Application1 is the MVC controller (in the area) and view1, view2, view3, etc. are Angularjs views), the MVC part of the overall application was getting confused and trying to find an action named view[x] in the Application1 controller (which doesn't exist).

因此，在该区域的 AreaRegistration 类中(它定义了该区域的特定路由)，我只需要在任何默认 MVC 路由之前添加一种全能路由，以始终强制它执行应用程序控制器上的 Index 操作.类似的东西:

So, in the area's AreaRegistration class (where it's defining specific routes for the area), I just needed to add a kind of catch-all route before any default MVC routes to always force it to the Index action on the Application controller. Something like:

        // 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 控制器，索引操作，然后 Angularjs 接管到不同视图的路由，同时在 URL 中包含 HTML5 路由结构.

Now, when I navigate to http://servername/Application1/view[x] it routes to the Application1 MVC controller, Index action, and then Angularjs takes over routes to the different views, all while having the HTML5 routing construct in the URL.

希望能帮助他人.

谢谢！

这篇关于如何使用 ASP.NET MVC 和 AngularJS 路由?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！