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

问题描述

我工作的一个新的ASP.NET MVC和AngularJS应用程序，旨在成为水疗的集合。我使用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（真）;所以，我得到各个区域内的客户端的路由，是这样的：

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

下面是我的AngularJS路由片段为应用1：

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领域，导航到的URL http：//服务器/应用1 /视图[X] （其中应用程序1是MVC控制器（在该地区）和视图1，视图2，视图3等都是Angularjs视图），整体应用的MVC部分是感到困惑，并试图找到一个动作命名的视图[X]中的应用1控制器（不存在）。

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路线，始终将其强制应用程序控制器上的索引行为。是这样的：

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：//服务器/应用1 /视图[X] 其路由到应用程序1 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屋！