Question

我正在尝试用Angular创建一个MVC应用程序。我的应用程序有常见的页眉和页脚。所以我在_layout.cshtml中添加了它。应用程序中有一些静态页面。因此，我想使用Angular路由加载它。

这是我的_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时，页面被加载但身体部分被隐藏。如果我点击Test，它就会被加载。但是，如果我添加Layout = null，则会发生与Main.cshtml相同的事情，并打开一个弹出窗口，其中显示

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

在控制台中，对于上述问题

，它会多次记录错误

尝试不止一次加载角度

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

有人可以告诉我如何继续显示主页面内容或使用_layout.cshtml创建所有页面吗？

Answer 1

将ng-view更改为ui-view并使用＆＃39; ui.router＆＃39;在ngroute，

替代解决方案在这里可用 AngularJS Ui-Router with ASP.Net MVC RouteConfig. How does it work?

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

1 个答案: