如何多次調用模塊？

Question

startupModule.js：

(function() { 
    'use strict'; 

    let app = angular.module('startupModule', []); 

    app.controller('controller1', function() { 
     // do this work on loading... 
    }); 

    app.controller('controller2', function() { 
     // do this work on loading...  
    }); 
}()); 

loginModule.js：

(function() { 
    'use strict'; 

    let app = angular.module('loginModule', []); 

    app.controller('loginController', function() { 

    }); 
}()); 

在視圖：

<div ng-app="startupModule" ng-controller="controller1"> 

</div> 

<div ng-app="loginModule" ng-controller="loginController"> 

</div> 

<div ng-app="startupModule" ng-controller="controller2"> 

</div> 

在加載，我想打電話給控制器controller1和controller2自動做一些工作。 loginModule是我想要使用的主要模塊，它不能被刪除或與startupModule結合使用。

當我運行它，沒有錯誤Console。但第三個div中的控制器controller2不能被執行，因爲ng-app="startupModule"不能被調用（我猜）。

檢查一遍，我已經刪除，第一個div ng-app="startupController" ng-controller="controller1"。然後，controller2應該工作。

我的問題：我怎麼能調用通過調用ng-app多次模塊？

Answer 1

據AngularJs docs for `ngApp，

只有一個AngularJS應用程序可以自動自舉每個HTML文檔。在文檔中找到的第一個ngApp將用於定義根元素作爲應用程序自動引導。要在HTML文檔中運行多個應用程序，您必須使用angular.bootstrap來代替手動引導它們。

所以，你必須手動引導你的模塊。例如：

<div id="app1" ng-controller="controller1"></div>  
<div id="app2" ng-controller="loginController"></div>  
<div id="app3" ng-controller="controller2"></div> 

這樣從JavaScript可以引導他們：

(function() { 
    'use strict'; 

    var 
     app1 = document.getElementById('app1'), 
     app2 = document.getElementById('app2'), 
     app3 = document.getElementById('app3'); 

    angular.element(document).ready(function() { 
     angular.bootstrap(app1 , ['startupModule']); 
     angular.bootstrap(app2 , ['loginModule']); 
     angular.bootstrap(app3 , ['startupModule']); 
    }); 
})();