MVC5 和 Angular.js 路由 - URL 不匹配 [英] MVC5 and Angular.js routing - URLs not matching

问题描述

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

I'm having some trouble with routing in Angular.js and MVC5. I've simplified it down to the example below.

我的角度路由代码是:

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.

The MVC Home controller has a method for each, and each view has a DIV with ng-view attribute.

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

When I browse to either about or contact the route is still mapping to Index.

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

If I change the index path to :

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

然后否则启动，我看到

错误

.

then Otherwise kicks in and I see

Error

.

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

The code looks identical to other angular code I've used, and examples on the web. Any suggestions?

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

Updated: Thanks to the answers below. I think I didn't explain my problem well last night, the result of a long day. My problem is that I'm trying to have a mini-spa on a sub page of the site, so the route for the main page would be:

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

服务器提供的页面/userPermissions/index"的路径没有被路由匹配.

And the path of "/userPermissions/index" which would be the page provided by the server isn't being matched by the routing.

推荐答案

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

Angular is by design a Single Page Application (SPA) framework. It is designed to process requests within a single server page request, and handle route changes without making subsequent calls to the server. Hence, for every page load, the page is at the "root" of the application. or /, no matter what path was used on the server to load the page.

后续页面加载和路由使用哈希"符号/#/someroute 处理，以抑制浏览器重新加载.因此，角度 $routeProvider 匹配的实际路由是 http://example.com/#/Home/About，但这是从 加载的//code> 服务器路由.

Subsequent page loads and routing are handled using the 'hash' notation /#/someroute in order to suppress a browser reload. Thus, the actual route being matched by the angular $routeProvider is http://example.com/#/Home/About, but this is loaded from the / server route.

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

If you redirect the page to /Home/About on the server, but still want to get to that match in Angular, then the route would be http://example.com/Home/About#/Home/About. Quite problematic, as you can imagine.

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

HTML5 Routing Mode can be used to remove the #/ from your routes, Allowing you to match http://example.com/Home/About in the Angular $routeProvider. But, for Angular to really shine, you should also configure Rewrites on your server, and not handle these Routes as separate views in your ASP.Net application. Generally, you will have a much cleaner solution if you can restrict server communications to API calls, as mixing Server HTML (or Razor) with Client Side Angular gets very confusing very fast.

这篇关于MVC5 和 Angular.js 路由 - URL 不匹配的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！