ASP.NET MVC with Angularjs and Layoutpage

Asked

Viewed 83 times

1

I am developing an application using the best of both worlds of Asp.net MVC and Angularjs. I do the database requests with Webapi which works very well. But now I have added an angular module in the page layout. The ng-app of the layout page works perfectly, but now the modules of the pages that are inside the render body do not work. Someone could tell me why the module added on the page layout disrupts the functioning of the other pages even on non-nested Ivs. I’m not going to put the code here because it’s a commercial application and it has a lot of information. but basically the structure is

<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>@ViewBag.Title</title>
    <link rel="icon" href="~/favicon.ico"/>

    <!--CSS-->
    @Styles.Render("~/Content/dashboard")
    <!--SCRIPTS-->
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/angular")

</head>
<body class="hold-transition skin-blue sidebar-mini">
    <div class="wrapper">
        <div ng-app="LayoutApp">
            <div ng-controller="LayoutCtrl" ng-init="loadInfos()" ng-cloak>

                ... Menus e SideBars

            </div><!--CTRL-->
        </div><!--APP-->

        <div class="content-wrapper">

            <section class="content">
                @RenderBody()
            </section>
        </div>
        <footer class="main-footer">

        </footer>

    <!--SCRIPTS-->
    @RenderSection("scripts", required: false)
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/bundles/dashboard")
    @Scripts.Render("~/bundles/modulesLayout")

</body>
</html>

and the structure of the renderbody pages

@{
    ViewBag.Title = "T";
    Layout = "~/Areas/MinhaConta/Views/Shared/_LayoutPage.cshtml";
}

@Scripts.Render("~/bundles/modulesCtrl")

<div ng-app="MyApp">
    <div ng-controller="MyCtrl" ng-init="loadInfos()">



    </div>
</div>
asp.net-mvc angularjs asp.net

  • ng-app is to be used twice even?

  • then it is better for each view I declare a controller as is indicated and all use the same ng-app?

  • Yes. It is only possible to have an ng-app per page. See my answer.

1 answer

3


Of documentation of Angularjs

Angularjs Applications cannot be nested Within each other.

Translation

Angularjs applications cannot be nested together.

So don’t use a ng-app within another ng-app.

  • 1

    I appreciate the help!!

  • Not for nothing. I’m happy to help.

  • http://shrestha-manoj.blogspot.com.br/2014/06/can-angularjs-have-multiple-ng-app.html. This article helps to explain better how to inject other modules. I just found him. Thank you

Browser other questions tagged asp.net-mvc angularjs asp.net

You are not signed in. Login or sign up in order to post.