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.

当我浏览有关或与之联系时，路线仍在映射到索引.

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

.

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

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

已更新:感谢以下回答.我想我昨晚不能很好地解释我的问题，这是漫长一天的结果.我的问题是，我试图在该站点的子页面上创建一个迷你spa，因此主页的路由为:

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.

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

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/Home/About#/Home/About.正如您所想像的那样，相当成问题.

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 $routeProvider中的http://example.com/Home/About.但是，为使Angular真正发挥作用，您还应该在服务器上配置Rewrites，并且不要在ASP.Net应用程序中将这些Route作为单独的视图进行处理.通常，如果您可以将服务器通信限制为API调用，那么您将拥有一个更干净的解决方案，因为将Server HTML(或Razor)与Client 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屋！