使用动态模块集开发AngularJS应用

Question

我有一个具有复杂布局的应用程序，用户可以放置（拖放）小部件（通过从预定义的100多个小部件中选择），其中每个小部件都是显示数据集（使用REST调用获取）的自定义实现。以特定的方式。我已经阅读了大量的博客文章，stackoverflow问题和AngularJS官方文档，但是我不知道应该如何设计应用程序来满足那里的需求。查看演示应用程序，只有一个模块（ng-
app），当在.js文件中构建该模块时，相关模块被声明为其依赖项，但是我有大量的小部件，以某种方式建议不要全部描述它们那里。我需要提出以下问题的建议：

• 我应该如何设计我的应用程序和小部件-我应该有一个单独的AngularJS模块还是每个小部件都应该是主模块的指令？
• 如果我将小部件设计为指令，是否可以在指令中定义依赖关系。也就是说，我的指令在其实现中使用ng-calender？
• 如果我将每个小部件设计为一个单独的模块，是否可以动态添加小部件模块作为对主模块的依赖关系？
• 我应该如何设计控制器-每个小部件一个控制器？
• 如果视图中有多个相同类型的小部件，应该如何区分状态（范围）？
• 有使用AngularJS设计可重用小部件的最佳实践吗？

编辑

有用的参考资料：

• ocLazyLoad-AngularJS的出色的延迟加载库
• 种子项目-模块+路线更改的延迟加载（ES6，systemjs，ocLazyLoad）
• AngularJS中的延迟加载
• 使用AngularJS和RequireJS动态加载控制器和视图
• 在应用程序引导后使用RequireJS加载AngularJS组件
• 关于在GitHub上延迟加载AngularJS资源的演示项目
• 按需负载项目
• 仅在需要时动态注入模块
• Angular文章中的另一个延迟加载
• 大型AngularJS和JavaScript应用程序中的代码组织

Answer 1

这些只是一般性建议。

我应该如何设计我的应用程序和小部件-我应该有一个单独的AngularJS模块还是每个小部件都应该是主模块的指令？

您正在谈论数以百计的小部件，将它们分成几个模块似乎很自然。某些小部件可能比其他小部件具有更多共同点。有些可能很笼统并适合其他项目，有些则更具体。

如果我将小部件设计为指令，是否可以在指令中定义依赖关系。也就是说，我的指令在其实现中使用ng-calender？

依赖于其他模块的模块级完成的，但如果模块没有问题A取决于模块B和两个A并B取决于模块C。指令是在Angular中创建窗口小部件的自然选择。如果一个指令依赖于另一个指令，则可以在同一模块中定义它们，或者在模块级别上创建依赖关系。

如果我将每个小部件设计为一个单独的模块，是否可以动态添加小部件模块作为对主模块的依赖关系？

我不确定您为什么要这样做，也不确定如何执行。在Angular中使用指令和服务之前，不会对其进行初始化。如果您有一个庞大的指令库（小工具），并且知道您可能会使用其中的一些（但不是全部），但是您不知道初始化应用程序时将使用哪些指令，您实际上可以“懒惰”加载模块后，加载”指令。我在这里创建了一个例子

这样做的好处是，即使有很多代码，也可以使应用程序快速加载，因为在需要脚本之前不必加载脚本。缺点是第一次加载新指令时可能会有相当大的延迟。

我应该如何设计控制器-每个小部件一个控制器？

小部件可能需要其自己的控制器。控制器通常应该较小，如果它们变大，则可以考虑是否有任何功能更适合服务。

如果视图中有多个相同类型的小部件，应该如何区分状态（范围）？

毫无疑问，需要范围变量的小部件应该具有自己独立的范围（scope:{ ... }在指令配置中）。

有使用AngularJS设计可重用小部件的最佳实践吗？

隔离范围，将依赖项保持在必要的最低限度。观看Misko的有关Angular最佳做法的视频

布赖恩·福特（Brian
Ford）也写了一篇文章，内容涉及在Angular中编写大型应用