SoFunction
Updated on 2025-04-13

Angular method of using two ng-apps in one page

The following code introduces Angular's method of using two ng-apps in a page. The specific code is as follows:

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <title>ng-appinstruction,angularFind the first oneng-appI won't look for it again,Use only one in a pageng-app.</title>
 </head>
 <body>
  <input type="button" ng-app="myApp1" ng-controller="App1Controller" ng-click="do1()" value="Button 1" />
  <input type="button" ng-app="myApp2" ng-controller="App2Controller" ng-click="do2()" value="Button 2">
  <script src="bower_components/angular/"></script>
  <script>
  /**
  * myApp1 Module
  *
  * Description
  */
  var myApp1 = ('myApp1', []);
  ('App1Controller', ['$scope', function($scope){
   $scope.do1 = function(){
    (11111);
   };
  }]);
  var myApp2 = ('myApp2', []);
  ('App2Controller', ['$scope', function($scope){
   $scope.do2 = function(){
    (22222);
   };
  }]);
  //Manually let the second div be managed by myapp2  (('[ng-app="myApp2"]'), ['myApp2']);
  </script>
 </body>
</html>

This method is not recommended, please refer to the next article. Let me introduce it to you belowangular uses two ng-app methods in one page (two).stay tuned!