javascript - 使用 AngularJS 组织子应用程序模块

标签 javascript angularjs

用较小的应用程序组织 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/

相关文章:

javascript - 在 Rollup 中,如何让 --external 在直接指向要排除的模块的命令行上工作? (没有节点解析插件)

javascript - 处理 JQuery ajax 成功对象数据

javascript - 使用 JavaScript 通过匹配键值和索引值来组合两个 JSON 对象

javascript - 多个 html 按钮的一个 javascript 函数

javascript - 使用仅获取一页的javascript在IFrame中打印PDF文件

javascript - 具有 Gmail 风格拼写检查功能的富文本编辑器

javascript - 将二维数组中的列添加到另一个二维数组

AngularJS:隐藏 ng-message 直到点击表单提交按钮

javascript - Angular js : A controller doesn't send a value via a factory with the "as" statement

javascript - 重写基本的 AngularJS (1.4) 代码以解决重大变化