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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (35)

我正在研究一个新的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路由协同工作以提供上述场景的帮助/指导?

提问于
用户回答回答于

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

因此,在该区域的AreaRegistration类(它为该区域定义特定路由的地方)中,我只需要在任何默认MVC路由之前添加一种catch-all路由,以始终将其强制应用程序控制器上的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路由结构。

扫码关注云+社区