用较小的应用程序组织 Angular 应用程序的首选方式是什么?
我读过许多讨论处理内聚应用程序的组织主题的文章,但是没有任何文章将“较大的应用程序”充当较小的、可能不相关的应用程序的外壳。
具体来说,我遇到困难的是 angular.module(s) 的创建。我的第一直觉是做类似的事情
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', []);
每个子应用程序模块都是它自己的独立应用程序。
将子应用程序模块注入(inject)到门户模块/父应用程序中是“Angular 方式”吗?
最佳答案
如果您的模块很小并且不相关,那么更好的方法是创建 AngularJS 应用程序的多个实例并分别引导它们。
这种方法的优点是:
性能:每个应用程序的独立
$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>
关于javascript - 使用 AngularJS 组织子应用程序模块,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17538772/