0

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

家庭控制器.cs

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

主页 -> 索引.cshtml

<div>
    Home - Index 
</div>

详细信息控制器.cs

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

详细信息 -> 索引.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 取回了完整视图，它再次尝试加载主页并且这个循环无限期地继续。

应用程序.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：超出最大调用堆栈大小

所以我尝试从 HomeController 返回 Partial 视图，它加载了 Home/Index 视图，但 _Layout.cshtml 中的内容没有加载。

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

4

1 回答 1

2

首先，如果您想在 ASP.Net MVC 中使用 Angular，您需要观看Miguel Castro 的 AngularJS 和 ASP.NET MVC 玩好教程。

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

这个概念是使用 MVC Route 作为 SPA 的主要入口点，然后让 Angular Route 处理各个页面的路由。主要内容是您想要的 MVC RouteConfig.csusers/{*catchall}。

仅供参考：在我的示例项目中，我使用 MVC 的cshtml作为 Angular 视图。如果要使用常规 html，可以忽略。此外，我使用 Angular 1.5 组件，以便在可用于生产时轻松转换为 Angular 2。

于 2016-11-23T14:42:55.763 回答