Question

使用较小的应用程序组织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模块都是它自己的自包含应用程序。

将子应用程序模块注入门户模块/父应用程序'Angular way'？

Answer 1

如果您的模块很小而且不相关，那么更好的方法是创建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>

使用AngularJS的子应用程序模块组织

1 个答案: