How to Define Two Angular Apps or Modules in a Single Page

Problem Description

In web development, developers sometimes need to integrate multiple AngularJS applications or modules within a single HTML page. However, using the default ngApp directive may cause only the first application to work correctly, while the second is ignored. This issue is evident in provided examples, such as JSFiddle demos where methods like doSearch and doSearch2 are restricted. Therefore, a correct approach is required to place multiple modules on one page.

Limitations of AngularJS

According to the official documentation, only one AngularJS application can be auto-bootstrapped per HTML document. The ngApp directive detects the first occurrence in the document and defines it as the root element for auto-bootstrap. This means AngularJS applications cannot be nested within each other, leaving the second application uninitialized. This limitation can hinder development in scenarios requiring integration of multiple independent functional modules or in large projects.

Manual Bootstrap Solution

To overcome this limitation, the angular.bootstrap method can be used for manual bootstrapping. This requires specifying the DOM element and module name after defining the modules. Below is a simple example code in HTML source format with safe escaping:

<script>
  var app1 = angular.module('app1', []);
  app1.controller('ctrl1', function($scope) { $scope.message = 'App 1'; });

  var app2 = angular.module('app2', []);
  app2.controller('ctrl2', function($scope) { $scope.message = 'App 2'; });

  angular.bootstrap(document.getElementById('div1'), ['app1']);
  angular.bootstrap(document.getElementById('div2'), ['app2']);
</script>

<div id="div1">
  <div ng-controller="ctrl1">{{message}}</div>
</div>
<div id="div2">
  <div ng-controller="ctrl2">{{message}}</div>
</div>

In this example, we define two independent modules, app1 and app2, each containing a controller. Then, using the angular.bootstrap method, each module is manually bootstrapped to a specified div element. This approach avoids the auto-detection restriction of ngApp, allowing multiple applications to coexist on the same page. In practice, it is recommended to execute bootstrapping after DOM loading to ensure all elements are ready.

Alternative Method Supplement

Besides manual bootstrapping, there are third-party solutions such as the ngModule directive. This directive is designed similarly to ngApp but can bootstrap multiple modules within the same element. Example code with safe escaping is as follows:

<div ng-modules="MyModuleA, MyModuleB">
  <h2>Module A and B</h2>
  <div ng-controller="MyControllerA">{{name}}</div>
  <div ng-controller="MyControllerB">{{name}}</div>
</div>

ngModule requires importing an additional JavaScript library, but its implementation uses the same internal logic as AngularJS, bypassing the ngApp limitation. This method may be more convenient in certain scenarios but adds dependency to the project, so it should be evaluated based on specific needs.

Summary

In summary, running multiple AngularJS applications on a single HTML page requires attention to the auto-bootstrap limitation. Using the angular.bootstrap method for manual bootstrapping is the recommended approach, as it is officially supported and ensures performance and stability. Alternative solutions like ngModule can be considered as supplements, but unnecessary complexity should be avoided. By applying these techniques, developers can flexibly integrate multiple modules, enhancing project modularity and maintainability.