错误

Question

我在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。

当我浏览到左右或联系路线时仍然映射到索引。

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

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

然后开始，我看到了

错误

。

代码看起来与我使用的其他角度代码相同，并且在网络上有例子。有什么建议吗？

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

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

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

Answer 1

Angular是一种单页应用程序（SPA）框架。它旨在处理单个服务器页面请求中的请求，并处理路由更改，而无需后续调用服务器。因此，对于每个页面加载，页面位于＆＃34; root＆＃34;申请。或/，无论服务器上使用何种路径加载页面。

后续页面加载和路由使用＆＃39; hash＆＃39;来处理。符号/#/someroute以禁止浏览器重新加载。因此，角度$routeProvider匹配的实际路由是http://example.com/#/Home/About，但这是从/服务器路由加载的。

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

HTML5路由模式可用于从您的路线中移除#/，允许您匹配角度http://example.com/Home/About中的$routeProvider。但是，要使Angular真正发挥作用，您还应该在服务器上配置重写，而不是在ASP.Net应用程序中将这些路由作为单独的视图处理。通常，如果您可以将服务器通信限制为API调用，那么您将获得更清晰的解决方案，因为将Server HTML（或Razor）与Client Side Angular混合得非常快速。

Answer 2

我建议你为角度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/#/。然后你的角应用程序将开始在页面上工作。

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

感谢。

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

错误

2 个答案: