Using multiple ng-app with in page in AngularJS

Last Reply 2 months ago By dharmendr

Posted 2 months ago

how to use Multiple ng-app with in a page in AngularJS.

Does i have to declare multiple ng-app in the page or i have to use nested div for this.

Posted 2 months ago

Hi rani,

Only one app is automatically initialized. Others have to manually initialized as follows.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
    <script type="text/javascript">
        var app1 = angular.module('MyApp1', [])
        app1.controller('MyController1', function ($scope) {
            $scope.Greetings = 'Welcome to aspsnippets.com';
        });

        var app2 = angular.module('MyApp2', ['MyApp1'])
        app2.controller('MyController2', function ($scope) {
            $scope.Greetings = 'Welcome to aspforums.net';
        });

        var app3 = angular.module('MyApp3', ['MyApp1'])
        app3.controller('MyController3', function ($scope) {
            $scope.Greetings = 'Welcome to jqueryfaqs.com';
        });

        angular.element(document).ready(function () {
            angular.bootstrap(document.getElementById('dvApp'), ['MyApp2', 'MyApp3']);
        });    
    </script>
</head>
<body>
    <div id="dvApp">
        <div ng-controller="MyController1">
            {{Greetings}}
        </div>
        <hr />
        <div ng-controller="MyController2">
            {{Greetings}}
        </div>
        <hr />
        <div ng-controller="MyController3">
            {{Greetings}}
        </div>
    </div>
</body>
</html>

Demo