如何在 _layout.cshtml 中使用 data-ng-view

我正在尝试使用Angular构建一个MVC应用程序。我的应用程序具有通用的页眉和页脚。所以我把它添加到_layout.cshtml中。应用程序中有一些静态页面。因此，我想使用角度路由加载它。

这是我的_layout.cshtml

<!DOCTYPE html>
<html data-ng-app="HappyHut">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header page-scroll">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse #bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Happy Hut", "Main", "Home", new { area = "" }, new { @class = "navbar-brand page-scroll" })
            </div>
            <div class="navbar-collapse collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="/ContactUs">Contact Us</a></li>
                    <li><a href="/AboutUs">About Us</a></li>
                    <li><a href="/login">Login</a></li>
                    <li><a href="/register">Register</a></li>
                    <li><a href="/Test">Test</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content" data-ng-view>
        @RenderBody()
        <hr />
        <footer>
footer data
        </footer>
    </div>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
    @Scripts.Render("~/bundles/Angular")
</body>
</html>

出于测试目的，我在main.cshtml中插入了一些测试html数据。

这是我的JS文件。

var HappyHut = angular.module("HappyHut", ['ngRoute']);
HappyHut.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
    $locationProvider.hashPrefix('!').html5Mode({
        enabled: true,
        requireBase: false
    });
    $routeProvider
    .when('/ContactUs', {
        templateUrl: 'Home/Contact'
    })
    .when('/AboutUs', {
        templateUrl: 'Home/About'
    })
    .when('/Test', {
        templateUrl: 'Home/Test'
    });
}]);

这里的test.cshtml就像

@{
        //Layout = null;
    }
    Hi Test

当我加载 Main.cshtml 时，页面被加载，但正文部分被隐藏。如果我单击测试，它就会被加载。但是，如果我添加布局 = null，则会发生与 Main.cshtml 相同的事情，并打开一个弹出窗口，上面写着

由于脚本运行时间过长，页面未运行

在控制台中，它针对上述问题多次记录以下错误

尝试多次加载角度

.现在我不想在所有页面中复制页眉和页脚。

任何人都可以告诉我如何继续使主页内容可见或将使用_layout.cshtml创建的所有页面？

将

ng-view更改为UI-View，并使用"ui.router"而不是ngroute，

此处提供替代解决方案AngularJS Ui-Router with ASP.Net MVC RouteConfig.它是如何工作的？

相关内容

最新更新

热门标签：