2

用较小的应用程序组织 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', []);

每个 subApp 模块都是它自己的独立应用程序。

将子应用程序模块注入门户模块/父应用程序是“角度方式”吗？

4

1 回答 1

2

如果您的模块很小并且不相关，那么更好的方法是创建 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>
于 2013-10-11T21:15:10.700 回答