首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何使用ASP.NET MVC和AngularJS路由?

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

Stack Overflow用户
提问于 2014-05-15 23:10:24
回答 1查看 57.3K关注 0票数 53

我正在开发一个新的SPAs和AngularJS应用程序,它是ASP.NET的集合。我使用MVC area的概念来分隔每个单独的SPA,然后在每个MVC area中使用AngularJS来创建SPA。

由于我是AngularJS的新手,并且还没有找到将MVC和AngularJS路由结合在一起的答案,我想我应该在这里发布我的问题,看看我是否能得到一些帮助。

我有标准的MVC路由设置,它服务于每个MVC区域。

代码语言:javascript
复制
    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:

代码语言:javascript
复制
http://servername/Application1/
http://servername/Application2/

现在,在每个应用程序区域中,我尝试使用AngularJS路由,也使用$locationProvider.html5Mode(true);这样我就可以获得每个区域中的客户端路由,如下所示:

代码语言:javascript
复制
http://servername/Application1/view1
http://servername/Application1/view2
http://servername/Application2/view1/view1a
http://servername/Application2/view2/view2a
http://servername/Application2/view3

下面是我为Application1编写的AngularJS路由代码片段:

代码语言:javascript
复制
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路由协同工作给我提供上述场景,有什么帮助/指导吗?

谢谢!

EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/23682203

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档