如何在aspnet-core的_Layout.cshtml中使用ng-app？

时间：2019-06-14 11:13:09

标签： javascript c# angularjs asp.net-mvc asp.net-core

我用aspnet core和angularjs开始了项目。 现在我想在我的项目中使用多个模块（每页一个）。 我的问题是我不能在一个页面中使用多个ng-app，我想在_Layout.cshtml页面的标签中添加一个。但是由于Renderbody（），我不能在home / index.cshtml等中使用ng-app。如何为每个页面设置一个模块？一个用于布局...一个用于home / index ...在登录页面上等等？

我尝试在_layout.cshtml页面的body标签上使用ng-app，而我无法在Home / index.cshtml页面上使用ng-app，因为renderbody将home / index添加到_layout.cshtml中，它将是2 ng-app ，而这在angularjs规则中是不可接受的。

!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - HedgeLinks</title>

<environment include="Development">
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment exclude="Development">
    <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
          asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
          asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
    <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>

<!--Snycfusion-->
@*<link href="~/content/ejthemes/bootstrap-theme/ej.web.all.min.css" rel="stylesheet" />*@
<link href="~/content/default.css" rel="stylesheet" />
<link href="~/content/default-responsive.css" rel="stylesheet" />
<link href="~/content/ejthemes/responsive-css/ej.responsive.css" rel="stylesheet" />
<link href="~/content/ejthemes/responsive-css/ejgrid.responsive.css" rel="stylesheet" />


@RenderSection("Styles", required: false)

</head>
<body ng-app="adminModule" ng-controller="layoutController">
<section id="large-menubar">
    <div class="row">
        <div class="main-menubar-container">
            <div class="col-md-2 text-center">
                <img class="lg-logo" src="~/images/logo.png" alt="HedgeLinks.com" title="HedgeLinks" />
            </div>
            <div class="col-md-5 no-padding">
                <div class="menu-item-container">
                    <a href="{{item.Path}}" ng-repeat="item in menubar">
                        <div class="lg-menu-item">
                            {{item.Name}}
                        </div>
                    </a>

                </div>
            </div>
            <div class="col-md-4">
                <div class="lg-menu-right">
                    <div class="lg-menu-sign-in lg-right-menu-item">
                        <a class="sign-in-link" title="HedgeLinks Sign In" href="/account/login">Sign In</a>
                    </div>
                    <div class="spacer"></div>
                    <div class="lg-menu-employer lg-right-menu-item" title="Hedge Links Employer">
                        <a class="employer-in-link" title="HedgeLinks Employers">Employers</a>
                    </div>
                    <div class="spacer"></div>

                    <div class="lg-menu-post-job-btn lg-right-menu-item theme-color" title="Hedge Links Post Job">
                        <a class="post-in-link" title="HedgeLinks Post Job For Free">Post Job Free</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@*<nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">HedgeLinks</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
                    <li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
                    <li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>

                </ul>
                @await Html.PartialAsync("_LoginPartial")
            </div>
        </div>
    </nav>*@
@RenderBody()
<ng-view></ng-view>
<hr />
<footer>
    <div class="footer-line"></div>
    <section id="site-footer">
        <div class="main-content-container">
            <a class="footer-logo" title="hedgelink.com"></a>

            <div class="col-md-2">
                <a class="footer-item footer-title" title="hedgelink.com">Related Links</a>
                <a class="footer-item footer-bold" title="hedgelink.com">Work At HedgeLinks</a>
                <a class="footer-item footer-bold" title="hedgelink.com">Contact Us</a>
                <a class="footer-item footer-bold" title="hedgelink.com">News & Advice</a>
                <a class="footer-item footer-bold" title="hedgelink.com">Editorial Team</a>
                <a class="footer-item footer-bold" title="hedgelink.com">Recruiter Site</a>
                <a class="footer-item footer-bold" title="hedgelink.com">Press Coverage</a>
                <a class="footer-item" title="hedgelink.com">Privacy</a>
                <a class="footer-item" title="hedgelink.com">Terms of Use</a>
                <a class="footer-item" title="hedgelink.com">FAQs</a>
                <a class="footer-item" title="hedgelink.com">Site Maps</a>
            </div>
            <div class="col-md-2">
                <a class="footer-item footer-title" title="hedgelink.com">Company Careers</a>
                <div class="items" ng-repeat="jc in jobCompany">
                    <a class="footer-item" title="hedgelink.com">{{jc}} Jobs</a>
                </div>
            </div>
            <div class="col-md-2">
                <a class="footer-item footer-title" title="hedgelink.com">Industry Jobs</a>
                <div class="items" ng-repeat="ji in jobIndustry">
                    <a class="footer-item" title="{{item.Description}}">{{ji.Title}} Jobs</a>
                </div>

            </div>
            <div class="col-md-2">
                <a class="footer-item footer-title" title="hedgelink.com">Top Cities</a>
                <div class="items" ng-repeat="jci in jobCity">
                    <a class="footer-item" title="hedgelink.com">{{jci}} Jobs</a>
                </div>
            </div>
            <div class="col-md-2">
                <a class="footer-item footer-title" title="hedgelink.com">Top Jobs</a>
                <div class="items" ng-repeat="jt in jobTitle">
                    <a class="footer-item footer-bold" title="hedgelink.com">{{jt}} Jobs</a>
                </div>

            </div>

        </div>
    </section>
</footer>
<div class="row">
    <div class="col-md-12 text-center">
        <p>All right Reserved to&copy;HedgeLinks.com</p>
    </div>
</div>


<environment include="Development">
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
</environment>
<environment exclude="Development">
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
            asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
            asp-fallback-test="window.jQuery"
            crossorigin="anonymous"
            integrity="sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk">
    </script>
    <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
            asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
            asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
            crossorigin="anonymous"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
    </script>
    <script src="~/js/site.min.js" asp-append-version="true"></script>
</environment>

<!--Syncfusion-->
@*<script src="~/scripts/jsondata.min.js"></script>
<script src="~/scripts/jsrender.min.js"></script>*@
@*<script src="~/scripts/ej.web.all.min.js" type="text/javascript"></script>*@
<script src="~/scripts/properties.js" type="text/javascript"></script>
<script src="~/scripts/jquery.validate.min.js"></script>
<script src="~/scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/App/Lib/ng-file-upload-shim.min.js"></script>
<script src="~/lib/Angular/angular.min.js"></script>
<script src="~/lib/Angular/angular-animate.min.js"></script>
<script src="~/App/Lib/AngularJS-Toaster-master/toaster.js"></script>
<script src="~/App/Lib/angular-tinymce.js"></script>
<script src="~/App/Module/admin-module.js"></script>
<script src="~/App/Lib/ng-file-upload-all.js"></script>

<script src="~/App/Layout/layout-controller.js"></script>
<script src="~/App/Lib/ui-bootstrap-2.5.0.min.js"></script>
<script src="~/App/Lib/ui-bootstrap-tpls-2.5.0.js"></script>
<script src="~/App/Services/data-service.js"></script>
<script src="~/App/Home/homeController.js"></script>

@RenderSection("Scripts", required: false)

我期望带有aspnet核心的angularjs项目。而且出于路由的原因，我希望每个页面都有一个模块。

0 个答案:

没有答案
相关问题
最新问题