Multiple ng-app directives in a single page in AngularJS

Author - Mamta Sharma
5.11.2018
|
0 Comments
||

How can we put multiple ng-app directives in a single page in AngularJS

What is ng-app directive?

The “ng-app” directive designates the root-element of the AngularJS application or we can say it initializes an angularJS application, usually placed near the root element of the page i.e.

,, tags, and it is automatically bootstrapped in an AngularJS application.

There are few things about the ng-app directive which are predefined, these are

1. We can use only one auto-bootstrapped ng-app directive per html page.
2. We cannot use nested Angularjs applications within each other.

How can we use multiple ng-app directives, that is, multiple Angular JS applications in a single HTML page?

As we know that a single auto-bootstrapped angularJs application can be included in a single page. We can use the multiple AngularJS applications in a single HTML page but those all must be manually-bootstrapped in the page.

Let’s discuss an example to understand the method of manually bootstrapping AngularJS application in a single HTML page.

I’m taking the example with two different ng-directives which are listing the toppers and loser students.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js "></script>

<!-- First AngularJS application with name “PassStudents” -->

<div id="App1" ng-app="PassStudents" ng-controller="PassStudentsController">
 <h3>List of three toppers students</h3>
<span><b>Name</b></span>
   <span><b>Marks</b></span>
 <div ng-repeat="student in students">
   <span>{{student.student_name}}:</span>
   <span>{{student.marks }} </span>
 </div>
</div>
<!-- Second AngularJS application with name “failStudents” -->

<div id="App2" ng-app="failStudents" ng-controller="failStudentsController">
   <h3>List of two loser students</h3>
   <span><b>Name</b></span>
   <span><b>Marks</b></span>
   <div ng-repeat="failstudent in failstudents">
       <span>{{failstudent.name}}:</span>
       <span>{{failstudent.marks}}</span>
   </div>
</div>

<script>
   /* “PassStudents” module definition(Auto-bootstrapped ) */

   var passStudentsModule = angular.module("PassStudents", []);
   passStudentsModule.controller("PassStudentsController",
       function($scope) {
           $scope.students = [{
               student_name: "Ram",
               marks: 50
           }, {
               student_name: "Sohan",
               marks: 49
           }, {
               student_name: "Sita",
               marks: 42
           }];
       }
   );

   /* “failStudents”  module definition */

   var failStudentsModule = angular.module("failStudents", []);
   failStudentsModule.controller("failStudentsController",
       function($scope) {
           $scope.failstudents = [{
               name: "Radha",
               marks: 12
           }, {
               name: "Mohan",
               marks: 15
           }];
       }
   );

   /* manually-bootstrapping the second module */
   angular.bootstrap(document.getElementById("App2"), ['failStudents']);
</script>

And the output of above code is:
ng-app directive

In this way we can use a number of ng-app directives in a single HTML page by manually-bootstrapping those on that page. So, we can use only a single auto-bootstrapped ng-directive but multiple manually-bootstrapped AngularJS application on a single HTML page.

Webner Solutions is a Software Development company focused on developing Insurance Agency Management Systems, Learning Management Systems and Salesforce apps. Contact us at dev@webners.com for your Insurance, eLearning and Salesforce applications.

Leave a Reply

Your email address will not be published. Required fields are marked *