如何在_layout.cshtml中使用data-ng-view [英] How to use data-ng-view in _layout.cshtml
问题描述
我正在尝试用Angular创建一个MVC应用程序。我的应用程序有常见的页眉和页脚。所以我在_layout.cshtml中添加了它。应用程序中有一些静态页面。因此我想使用Angular路由加载它。
这是我的_layout.cshtml
I am trying to crate a MVC application with Angular. My application has common Header and footer. So I added it in _layout.cshtml. There are some static pages in the application. Hence I want to load this using Angular routing.
Here is my _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文件。
For testing purpose I have inserted some test html data in main.cshtml.
and here is my js file.
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就好像
Here the test.cshtml is like
@{
//Layout = null;
}
Hi Test
当我加载Main时。 cshtml，页面被加载但身体部分被隐藏。如果我点击Test，它就会被加载。但是，如果我添加Layout = null，则会发生与Main.cshtml相同的事情，并打开一个弹出窗口，其中显示
页面未运行到期一个长时间运行的脚本
在它上面记录的控制台错误不止一次上面的问题
尝试不止一次加载角度。
现在我不想在所有页面中复制页眉和页脚。
有人可以告诉我如何使主页面内容可见或使用_layout.cshtml创建所有页面吗？
When I am loading Main.cshtml, the page gets loaded but body part gets hidden. If I click on Test, it gets loaded. However, if I add Layout = null, the same thing happens as Main.cshtml and a pop-up is opened which says
page is not running due a long running script
in the console it logs below error more than once for above issue
tried to load angular more than once.
Now I don't want to copy Header and footer in all the pages.
Can anybody please tell me how to proceed to make Main page content visible or all the pages which will be created using _layout.cshtml?
推荐答案
routeProvider'，'
routeProvider', '
locationProvider'， function （
locationProvider', function (
routeProvider，
routeProvider,
这篇关于如何在_layout.cshtml中使用data-ng-view的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
