使用 Angular 配置 .net mvc 以使用 html 5 模式答案

【问题标题】：Configure .net mvc with angular to use html 5 mode使用 Angular 配置 .net mvc 以使用 html 5 模式
【发布时间】：2015-10-19 13:38:06
【问题描述】：

我正在使用 angularjs 在 .net mvc 中开发应用程序。当我不使用 html5 模式时，它可以正常工作，但是当我将 html5 模式设置为 true 时，服务器调用该地址给我一个找不到资源。

这是我的 app.js

var app = angular.module("myApp", ['ngRoute'])
.config(function ($routeProvider, $locationProvider) {
    $routeProvider.when('/test',
    {
        templateUrl: 'templates/TestPage.html',
        controller: 'ProfesionalController'
    });

    $routeProvider.otherwise({ redirectTo: '/' });

    $locationProvider.html5Mode(true);


});

这是我的观点（布局）：

<!DOCTYPE html>
<script src="~/Scripts/angular/angular.js"></script>
<script src="~/Scripts/angular/angular-route.js"></script>

<script src="~/app/app.js"></script>
<script src="~/app/home/home.js"></script>
<script src="~/app/profesional/profesional.js"></script>
<base href="/">
         <a href="test">Test</a>
         @*this is the link*@

        </div>
    </div>
</div>
<div ng-app="myApp" class="container body-content">
    <div ng-view></div>
    @RenderBody()

</div>

当我点击测试链接时，服务器尝试定位：http://localhost:39881/test" 给我一个 404 Not Found - http://localhost:39881/test"

我错过了什么。它在没有 html5 模式的情况下运行良好。

【问题讨论】：

发布你的控制器。
asp.net mvc hosting angular app with html5mode and routing的可能重复
角度控制器没什么大不了的：app.controller('ProfesionalController', function ($scope) { $scope.profesional= 'hi Customer!'; });
我的意思是你的 MVC 控制器。
MVC 控制器它是默认的索引控制器： public class CustomerController : Controller { // // GET: /Customer/ public ActionResult Index() { return View(); } }

标签： asp.net .net asp.net-mvc angularjs angular-routing

【解决方案1】：

在您的 mvc 路由配置中捕获所有 url 并重定向到您的索引页面。会有帮助的。

   routes.MapRoute(
      name: "AngularCatchAll",
      url: "{*url}",
      defaults: new { controller = "Home", action = "Index" });

【讨论】：

总之，如何将 JSON 帖子/请求路由到正确的控制器？
配置 mvc 路由，以防万一您点击位于角度路由中的刷新不会得到 404，因为它会使用未知 url 访问服务器。如果您使用不必要的链接。
在这种情况下，我使用 WebAPI 控制器通过不同的路由发布/获取数据。我根本不使用 MVC 控制器。所有路由和模板都由 Angular 完成。
为我工作（API 调用不受影响）。只需要将 url: 替换为 template: