我在Angular.js和MVC5中路由时遇到了一些麻烦。我简化了下面的例子。MVC5和Angular.js路由 - URL不匹配

我的角路由码是：

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-视图属性的DIV。

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

如果我更改索引路径：

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

然后否则踢，我看到

错误

。

该代码看起来与我使用的其他角码和网上的例子完全相同。有什么建议么？

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

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

和“/ userPermissions /指数”的路径，其将由服务器提供的页面未被路由匹配。

来源

2015-02-05 John McArthur

你使用的是html5模式吗？ – Claies 2015-02-05 18:22:00

您必须初始化控制器 - 例如控制器：“HomeController”，模板：... – 2015-02-05 18:22:13

不，不使用html5模式。在简化版本中，我没有使用角度控制器，只是替换模板。 – 2015-02-05 18:29:55

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

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

如果您在服务器上将页面重定向到/Home/About，但仍然想要在Angular中找到该匹配项，那么路由将为http://example.com/Home/About#/Home/About。正如你可以想象的那样，这是非常有问题的。

HTML5路由模式可用于从您的路线中删除，允许您在角度$routeProvider中匹配http://example.com/Home/About。但是，为了让Angular真正发光，您还应该在服务器上配置重写，而不是在ASP.Net应用程序中将这些路线作为单独的视图来处理。通常，如果您可以将服务器通信限制为API调用，那么您将拥有更清洁的解决方案，因为客户端角度的混合服务器HTML（或Razor）会非常快速地混淆。

来源

2015-02-05 18:37:48 Claies

我建议你为你的角度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-视图将通过观看路线加载局部视图。

点击浏览器http://anything.com/spa/#/。然后你的角度应用程序将开始在页面上工作。

我不会建议你在MVC应用程序中使用html5mode()。这会在您的应用程序内部造成很多问题。操纵事物需要更多时间。

谢谢。

来源

2015-02-05 19:59:04

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

错误

回答

相关问题