MVC5 和 Angular.js 路由 - URL 不匹配

Question

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

我的 angular 路由代码是：

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 控制器每个都有一个方法，每个视图都有一个 DIV 和 ng-view 属性。

当我浏览到关于或联系时，路线仍然映射到索引。

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

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

然后否则启动，我看到

错误

。

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

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

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

并且服务器提供的页面“/userPermissions/index”的路径与路由不匹配。

Answer 1

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

使用 'hash' 符号 /#/someroute 处理后续页面加载和路由，以抑制浏览器重新加载。因此，angular $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 真正发挥作用，您还应该在服务器上配置重写，而不是在 ASP.Net 应用程序中将这些路由作为单独的视图来处理。通常，如果您可以将服务器通信限制为 API 调用，您将拥有一个更简洁的解决方案，因为将服务器 HTML（或 Razor）与客户端 Angular 混合使用会很快变得非常混乱。

Answer 2

我建议您为 angular SPA 创建一个基地。

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

SPAController.cs

using System.Web.Mvc;

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

Views/SPA/Index

    <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()。这会在您的应用程序中产生很多问题。而且操作东西会花更多的时间。

谢谢。

MVC5 和 Angular.js 路由 - URL 不匹配

MVC5 and Angular.js routing - URLs not matching

asp.net-mvc

angularjs

angular-routing

错误