具有ASP.NET MVC路由的Angular$locationProvider

Angular $locationProvider with ASP.NET MVC routing

本文关键字：Angular locationProvider 路由 ASP NET MVC 具有      更新时间：2023-09-26

我使用ASP.NET MVC(使用RouteCollection类(处理路由。但是我的前端是用angular编写的，在某些地方我想使用angular的$location更改url，并且我希望它支持HTML5，所以我在我的module.config中添加了这行：

$locationProvider.html5Mode(true);

但从那以后，我的路由似乎一直由Angular处理。

例如，我的SPA在mysite.com/user上，我想在那里使用Angular的$location更改url(因此，当用户单击选项卡时，url将更改为mysite.com/user/tab，而无需重新加载(。

但当用户从那个页面导航到任何其他页面(例如mysite.com/other(时，我希望通过ASP.NET MVC的路由来处理。

现在发生的情况是，我的url更改为mysite.com/other，但网站无法导航到该页面，即MVC路由无法处理更改。

编辑

我在Angular中没有定义任何路由，我所有的路由都是在服务器端定义的，在我添加$locationProvider.html5Mode(true); 后，服务器端路由就开始工作了

不，遗憾的是没有。如果您的角度SPA托管在foo.com，并且HTML 5模式处于打开状态，则foo.com/spaRoute1将访问您的ASP.Net服务器，并期望找到该路由(可能是控制器=SpaRoute1操作=Index(。

您需要将默认路由设置为始终解析到负责提供SPA的控制器/操作。同时定义您需要的任何其他路线，这些路线不是您的SPA特有的。

我对ASP.Net了解不多，但我用node js解决了同样的问题。

我用向服务器推送API功能解决了同样的问题。基本上是在客户端对页面进行角度渲染，并通过#找到确切的路径。您可以启用html5模式来删除#。

  $locationProvider.html5Mode({
    enabled:true,
    requireBase: false
});

记住不要忘记在服务器端启用推送API支持。只需添加

    //To suport push API 
    // Just for DEMO in your case it may be different
app.use('/admin/*', function(req,res){
  var user = req.session.user;
   res.render("adminView",{user:user});
});

当您硬刷新或在浏览器中输入不带#标签的直接url时，请在此处。服务器将呈现主页(索引(页面并加载所有必需的文件。之后，angular将为您处理所有路由，因为您已经启用了html5模式，因此不再需要在url中添加#。

相关文章：