Angular ASP.NET MVC 应用程序中的路由，如何在 Asp.Net MVC _Layout.cshtml 中使用 ngView？

Question

我的示例应用程序有两个 MVC 控制器 1.HomeController 2.DetailsController

HomeController.cs

public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
    }

首页 -> Index.cshtml

<div>
    Home - Index 
</div>

DetailsController.cs

public class DetailsController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
    }

详情 -> Index.cshtml

<div>
    Details - Index 
</div>

在 _Layout.cshtml 中，我有主页和详细信息的链接。

_ViewStart.cshtml

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

_Layout.cshtml

<!DOCTYPE html>
<html data-ng-app="app">
<head>
    <base href="/" />
    <title>Angular Routing</title>
    <script src="~/Scripts/angular.js"></script>
    <script src="~/Scripts/angular-route.js"></script>
    <script src="~/App/app.js"></script>
</head>
<body>
    <h1>Layout</h1>
    <a href="/Home">Home</a>
    <a href="/Details">Details</a>
    <div ng-view>        
        @RenderBody()
    </div>
</body>
</html>

当页面加载时，我从 _Layout.cshtml 获取内容，但没有任何内容加载到 ngView 容器中。

我的猜测，angular 正在尝试加载在根路由“/”的路由配置中设置的主页视图。但是它通过 _Layout.cshtml 返回完整视图，它再次尝试加载主页并且这个循环无限期地继续下去。

app.js

(function () {
    var app = angular.module("app", ["ngRoute"]);

    app.config(config)

    function config($routeProvider, $locationProvider) {
        $routeProvider
                      .when('/', { 
                          templateUrl: "/Home",
                      })
                      .when('/Home', {
                          templateUrl: "/Home",
                      })
                      .when('/Details', {
                          template: "/Details",
                      });

        $locationProvider.html5Mode(true);
    }               
}());

我在 Chrome 控制台中收到此错误。

angular.js:13920 RangeError: Maximum call stack size exceeded

所以我尝试 return 来自 HomeController 的部分视图，它加载了 Home/Index 视图但是 _Layout.cshtml 中的内容没有加载。

如何在 MVC 应用程序中进行 angular 路由，有没有办法在 _Layout.cshtml 中使用 ngView？

Answer 1

首先，如果您想利用 Angular 和 ASP.Net MVC，您需要观看 AngularJS & ASP.NET MVC Playing nice Tutorial by Miguel Castro。

您可以在 GitHub 查看我的示例项目。

概念是使用MVC Route作为SPA的主要入口点，然后让AngularRoute处理各个页面的路由。主要收获是你想要 users/{*catchall}.

的 MVC RouteConfig.cs

仅供参考： 在我的示例项目中，我使用 MVC 的 cshtml 作为 Angular 查看。想用正则的可以忽略html。此外，我使用 Angular 1.5 组件，以便在可用于生产时轻松转换为 Angular 2。

Angular ASP.NET MVC 应用程序中的路由，如何在 Asp.Net MVC _Layout.cshtml 中使用 ngView？

Angular routing in ASP.NET MVC application, How to use ngView in Asp.Net MVC _Layout.cshtml?

angularjs

asp.net-mvc

angular-routing

asp.net-mvc-layout