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的子应用程序模块组织

回答

相关问题