带有 ASP.NET MVC 路由的 Angular $locationProvider答案

【问题标题】：Angular $locationProvider with ASP.NET MVC routing带有 ASP.NET MVC 路由的 Angular $locationProvider
【发布时间】：2014-06-18 07:10:15
【问题描述】：

我正在使用 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); 后才停止工作

【问题讨论】：

标签： javascript asp.net-mvc angularjs asp.net-mvc-5

【解决方案1】：

不，不幸的是没有。如果您的 Angular SPA 托管在 foo.com 并启用了 HTML 5 模式，foo.com/spaRoute1 将访问您的 ASP.Net 服务器并期望找到该路由（可能是 controller=SpaRoute1 action=Index）。

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

【讨论】：

我不确定我是否理解你，所以澄清一下：例如，如果我的 SPA 在 site.com/user 和我的其他页面在 site.com/other 和服务器端我已经设置即使使用 Angular 的 $locationProvider.html5Mode(true);
问题是，如果在 SPA 中定义 foo.com/other 和在 ASP.Net 中相同，那么您何时会遇到冲突（在 SPA 和 ASP.Net 中定义的路由），如果用户在从应用内导航，或通过直接导航到该链接（或刷新）
我没有在 Angular 中定义任何路由，只有 $locationProvider（我不会在任何地方调用 $routeProvider）
如果您没有在 Angular 中定义任何路由，则无需将 html5Mode 设置为 true，它允许您创建不以 # 为前缀的链接。因此，当您单击链接时设置它，角度可能会吃掉它们，而不是让它们通过您的服务器解决。

【解决方案2】：

我对 ASP.Net 了解不多。但是我用这样的节点 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 中添加 #。

【讨论】：