我正在尝试使用 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 时，页面被加载，但正文部分被隐藏。如果我单击“测试”，它就会被加载。但是，如果我添加 Layout = null，则会发生与 Main.cshtml 相同的情况，并打开一个弹出窗口，其中显示
由于长时间运行的脚本，页面未运行
在控制台中，针对上述问题多次记录以下错误
尝试多次加载角度
。现在我不想在所有页面中复制页眉和页脚。
谁能告诉我如何继续使主页内容或将使用 _layout.cshtml 创建的所有页面可见？
