Fatal编程技术网
  • angularjs/
  • Angularjs 如何在_layout.cshtml中使用数据ng视图

Angularjs 如何在_layout.cshtml中使用数据ng视图

angularjs asp.net-mvc-4 asp.net-mvc-5

Angularjs 如何在_layout.cshtml中使用数据ng视图,angularjs,asp.net-mvc-4,asp.net-mvc-5,angular-routing,Angularjs,Asp.net Mvc 4,Asp.net Mvc 5,Angular Routing,我正在尝试用Angular构建一个MVC应用程序。我的应用程序有共同的页眉和页脚。所以我把它添加到了_layout.cshtml中。应用程序中有一些静态页面。因此，我想使用角度布线加载它 这是my_layout.cshtml <!DOCTYPE html> <html data-ng-app="HappyHut"> <head> <meta charset="utf-8" /> <meta name="viewport" co

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

这是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>
这里test.cshtml类似于

@{
        //Layout = null;
    }
    Hi Test
当我加载Main.cshtml时，页面被加载，但主体部分被隐藏。如果我点击Test，它就会被加载。但是，如果我添加Layout=null，则会发生与Main.cshtml相同的事情，并打开一个弹出窗口，其中显示

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

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

多次尝试加载角度

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

有谁能告诉我如何继续使主页内容可见或使用_layout.cshtml创建的所有页面？

将ng视图更改为ui视图，并使用“ui.router”代替ngroute

这里有替代解决方案

采用的方法是模板。使用$http服务，html字符串从服务器中提取并存储在cookie变量中。 
@{
        //Layout = null;
    }
    Hi Test