AngularJS的子應用程序模塊組織

組織使用較小應用程序的Angular應用程序的首選方式是什麼？AngularJS的子應用程序模塊組織

我看了很多文章，討論了與一個有凝聚力的應用程序，但是，再好的「大應用」作爲一個殼較小，可能是不相關的，應用程序處理的組織主題。

具體地，其中我奮力是與創建angular.module（多個）。我的第一本能是做類似

var portal = angular.module('Portal', [ 'Admin', 'SubApp1', 'SubApp2']); 

/** 
* Each of the sub-applications will have their own controllers, etc 
*/ 
var admin = angular.module('Admin', []); 
var subApp1 = angular.module('SubApp1', []); 
var subApp2 = angular.module('SubApp2', []);

每個子應用程序模塊將是它自己的自包含應用程序。

在子應用程序模塊注入到門戶模塊/父應用程序的「角方式」？

來源

2013-07-09 Daniel

這是一個完全正常的做法。 – Chandermani

如果你的模塊很小，因此沒有相關的話，最好的方法是創建的AngularJS應用的多個實例，並分別bootrstrap他們。

這種方法的優點是：

性能：分離$digest階段爲每個應用程序
分離css和縮小的js文件爲您的應用
分離$rootScopes和變量
還是你可以使用您的應用程序作爲模塊具有較大的應用

可以使用手工方法引導每個應用程序：

<!doctype html> 
<html xmlns:ng="http://angularjs.org"> 
<head> 
    <script src="http://code.angularjs.org/angular.js"></script> 
</head> 
<body> 

    <div id="portlet1"> 
    Hello {{'World1'}}! 
    </div> 
    <script src="apps/app1.js"></script> 

    <div id="portlet2"> 
    Hello {{'World2'}}! 
    </div> 
    <script src="apps/app2.js"></script> 

    <script> 
    angular.element(document).ready(function() { 
     angular.bootstrap(document.getElementById('portlet1'), ['app1']); 
     angular.bootstrap(document.getElementById('portlet2'), ['app2']); 
    }); 
    </script> 

</body> 
</html>

來源

2013-10-11 21:15:10 kseb

AngularJS的子應用程序模塊組織

回答

相關問題