如何在_layout.cshtml中使用data-ng-view - IT屋-程序员软件开发技术分享社区
首页 其他开发 如何在_layout.cshtml中使用data-ng-view
如何在_layout.cshtml中使用data-ng-view
[英] How to use data-ng-view in _layout.cshtml
本文介绍了如何在_layout.cshtml中使用data-ng-view的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用 Angular 创建一个 MVC 应用程序.我的应用程序有通用的页眉和页脚.所以我在_layout.cshtml中添加了它.应用程序中有一些静态页面.因此我想使用 Angular 路由加载它.
这是我的 _layout.cshtml
<html data-ng-app="HappyHut"><头><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>@ViewBag.Title - 我的 ASP.NET 应用程序</title>@Styles.Render("~/Content/css")@Scripts.Render("~/bundles/modernizr")<身体><div class="navbar navbar-inverse navbar-fixed-top"><div class="容器"><!-- 品牌和切换被分组以获得更好的移动显示--><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">切换导航</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>@Html.ActionLink("Happy Hut", "Main", "Home", new { area = "" }, new { @class = "navbar-brand page-scroll" }) <div class="navbar-collapse collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav navbar-right"><li><a href="/ContactUs">联系我们</a></li><li><a href="/AboutUs">关于我们</a></li><li><a href="/login">登录</a></li><li><a href="/register">注册</a></li><li><a href="/Test">Test</a></li>
<div class="container body-content" data-ng-view>@RenderBody()<小时/><页脚>页脚数据</页脚>
@Scripts.Render("~/bundles/jquery")@Scripts.Render("~/bundles/bootstrap")@RenderSection("scripts", required: false)@Scripts.Render("~/bundles/Angular")
</html>出于测试目的，我在 main.cshtml 中插入了一些测试 html 数据.
这是我的 js 文件.
var HappyHut = angular.module("HappyHut", ['ngRoute']);HappyHut.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {$locationProvider.hashPrefix('!').html5Mode({启用:真，要求基础:假});$routeProvider.when('/联系我们', {templateUrl: '主页/联系人'}).when('/关于我们', {templateUrl: '主页/关于'}).when('/测试', {templateUrl: '主页/测试'});}]);这里的 test.cshtml 就像
@{//布局=空；}嗨测试当我加载 Main.cshtml 时，页面被加载但正文部分被隐藏.如果我点击测试，它会被加载.但是，如果我添加 Layout = null，则会发生与 Main.cshtml 相同的事情，并且会打开一个弹出窗口，内容为
<块引用>由于脚本长时间运行，页面未运行
在控制台中，它多次记录上述问题的以下错误
<块引用>多次尝试加载 angular
.现在我不想在所有页面中复制页眉和页脚.
谁能告诉我如何继续使主页内容可见或将使用 _layout.cshtml 创建的所有页面?
解决方案
将 ng-view 改为 ui-view 并使用 'ui.router' insted of ngroute，
此处提供替代解决方案AngularJS Ui-Router with ASP.NetMVC 路由配置.它是如何工作的?
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>
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'
});
}]);
Here the test.cshtml is like
@{
//Layout = null;
}
Hi Test
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?
解决方案
change the ng-view to ui-view and used 'ui.router' insted of ngroute,
alternative solution avaialble here
AngularJS Ui-Router with ASP.Net MVC RouteConfig. How does it work?
这篇关于如何在_layout.cshtml中使用data-ng-view的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
