【问题标题】：MVC5 and Angular.js routing - URLs not matchingMVC5 和 Angular.js 路由 - URL 不匹配
【发布时间】：2015-02-05 18:14:57
【问题描述】：

我在 Angular.js 和 MVC5 中的路由遇到了一些问题。我已将其简化为以下示例。

我的角度路由代码是：

app.config(["$routeProvider", "$locationProvider", function ($routeProvider, $locationProvider) {

    $routeProvider.when("/", {
        template: "<h1>index</h1>",
    })
    .when("/Home/About", {
        template: "<h1>about</h1>",
    })
    .when("/Home/Contact", {
        template: "<h1>contact</h1>",
    })
    .otherwise({
        template: "<h1>Error</h1>",
    });

}]);

MVC Home 控制器对每个控制器都有一个方法，每个视图都有一个带有 ng-view 属性的 DIV。

当我浏览到 about 或 contact 时，路由仍然映射到 Index。

如果我将索引路径更改为：

    $routeProvider.when("/Home/Index", {
        template: "<h1>index</h1>",
    })

然后否则启动，我看到了

错误

。

代码看起来与我使用的其他角度代码以及网络上的示例相同。有什么建议吗？

更新：感谢以下答案。我想我昨晚没有很好地解释我的问题，这是漫长的一天的结果。我的问题是我试图在网站的子页面上放置一个迷你水疗中心，所以主页的路线是：

    .when("/userPermissions/index", {
        templateUrl: "/scripts/bookApp/userPermissions/main.html",
        controller: "userPermissionController",
    })

并且“/userPermissions/index”的路径将是服务器提供的页面，没有被路由匹配。

【问题讨论】：

你使用的是html5模式吗？
您必须初始化控制器 - 例如控制器：“HomeController”，模板：...
不，不使用 html5 模式。在简化版本中，我没有使用角度控制器，只是替换模板。
正如下面的答案中提到的，我试图在两个单独的“服务器”页面上拥有一个角度 SPA 时让自己感到困惑。我将我的 SPA 分成两个单独的模块，并将它们分别托管在两个“服务器”页面上，一切都很好。

标签： asp.net-mvc angularjs angular-routing

【解决方案1】：

Angular 在设计上是一个单页应用程序 (SPA) 框架。它旨在处理单个服务器页面请求中的请求，并处理路由更改而无需对服务器进行后续调用。因此，对于每个页面加载，页面都位于应用程序的“根”。或/，无论服务器上使用什么路径加载页面。

随后的页面加载和路由使用“哈希”表示法/#/someroute 处理，以抑制浏览器重新加载。因此，角度$routeProvider 匹配的实际路由是http://example.com/#/Home/About，但这是从/ 服务器路由加载的。

如果您将页面重定向到服务器上的 /Home/About，但仍想在 Angular 中找到该匹配项，则路由将是 http://example.com/Home/About#/Home/About。很成问题，你可以想象。

HTML5 路由模式可用于从您的路由中删除 #/，允许您在 Angular $routeProvider 中匹配 http://example.com/Home/About。但是，要让 Angular 真正发挥作用，您还应该在服务器上配置 Rewrites，而不是在 ASP.Net 应用程序中将这些路由作为单独的视图处理。通常，如果您可以将服务器通信限制为 API 调用，您将拥有一个更简洁的解决方案，因为将服务器 HTML（或 Razor）与客户端 Angular 混合会很快变得非常混乱。

【讨论】：

【解决方案2】：

我建议您为您的 Angular SPA 创建一个基础。

这意味着您需要在应用程序中创建一个 C# 控制器，该控制器将执行一项操作，即索引

SPAController.cs

using System.Web.Mvc;

namespace AngularApp.Controllers
{
    public class SPAController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
    }
}

观看次数/SPA/索引

    <ul>
        <li><a href="/#/">Home</a></li>
        <li><a href="/#/Home/About">About</a></li>
        <li><a href="/#/Home/Contact">Contact</a></li>
    </ul>

    <div ng-view></div>

    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.min.js"></script>

现在一切都设置好了，点击 html ng-view 将通过观看路线加载部分视图。

在浏览器中点击http://anything.com/spa/#/。然后您的 Angular 应用程序将开始在页面上运行。

我不建议您在 MVC 应用程序中使用 html5mode()。这将在您的应用程序中产生许多问题。而且操纵事物需要更多时间。

谢谢。

【讨论】：