如何使用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;
    }

这工作正常,给我的URL如下:

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区域,导航到一个URL http://servername/Application1/view[x](其中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控制器,索引操作,然后Angularjs接管到不同视图的路由,同时在URL中具有HTML5路由构造.

希望能帮助别人.

谢谢!