0

私のサンプル アプリケーションには 2 つの 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: 最大コール スタック サイズを超えました

そのため、Home/Index ビューを読み込んだ HomeController から Partial ビューを返そうとしましたが、_Layout.cshtml のコンテンツは読み込まれませんでした。

MVC アプリケーションで角度ルーティングを行う方法、_Layout.cshtml で ngView を使用する方法はありますか?

4

1 に答える 1

2

まず、ASP.Net MVC で Angular を活用したい場合は、Miguel Castro による AngularJS & ASP.NET MVC Playing nice Tutorial をご覧ください。

私のサンプル プロジェクトはGitHubで見ることができます。

コンセプトは、MVC Route を SPA のメイン エントリ ポイントとして使用し、Angular Route で個々のページのルーティングを処理することです。主なポイントは、必要な MVC RouteConfig.csですusers/{*catchall}。

参考までに、私のサンプル プロジェクトでは、MVC の cshtml を Angular View として使用しています。通常の html を使用する場合は無視できます。さらに、Angular 1.5 Component を使用して、Angular 2 が生産可能になったときに簡単に変換できるようにしています。

于 2016-11-23T14:42:55.763 に答える