使用动态模块集开发 AngularJS 应用程序 [英] Developing an AngularJS app with dynamic set of modules

问题描述

我有一个布局复杂的应用程序，用户可以在其中放置(拖放)小部件(通过从 100 多个小部件的预定义集合中进行选择)，其中每个小部件都是一个自定义实现，显示一组数据(使用REST 调用)以特定方式.我已经阅读了大量的博客文章、stackoverflow 问题和官方的 AngularJS 文档，但我不知道我应该如何设计我的应用程序来处理这些要求.查看演示应用程序，有一个模块 (ng-app)，在 .js 文件中构建它时，依赖模块被声明为其依赖项，但是我有一大堆小部件，不知何故不建议全部描述它们那里.我需要对以下问题提出建议:

I have an application with a complex layout where the user could put (drag/drop) widgets (by choosing from a predefined set of 100+ widgets) where every widget is a custom implementation that displays a set of data (fetched using REST call) in a specific way. I've read tons of blog posts, stackoverflow questions and the official AngularJS docs but I cannot figure out how should I design my application to handle there requirements. Looking at demo apps, there is a single module (ng-app) and when constructing it in the .js file the dependent modules are declared as its dependencies, however i have a big set of widgets and somehow it's not advisable to describe them all there. I need suggession for the following questions:

• 我应该如何设计我的应用程序和小部件 - 我应该有一个单独的 AngularJS 模块还是每个小部件都应该是主模块的指令?
• 如果我将小部件设计为指令，是否可以在指令中定义依赖项.IE.说我的指令在其实现中使用了 ng-calender?
• 如果我将每个小部件设计为一个单独的模块，是否可以将小部件模块作为对主模块的依赖项动态添加?
• 我应该如何设计控制器 - 每个小部件可能一个控制器?
• 如果视图中有多个来自同一类型的小部件，我应该如何分离状态(范围)?
• 是否有使用 AngularJS 设计可重用小部件的最佳实践?

编辑

有用的参考:

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

推荐答案

这些只是一般性建议.

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

How should I design my app and widgets - should i have a separate AngularJS module or each widget should be a directive to the main module?

您说的是数百个小部件，将它们分成几个模块似乎很自然.一些小部件可能比其他小部件有更多的共同点.有些可能非常通用，适合其他项目，有些则更具体.

You're talking hundres of widgets, it seems natural to split them into several modules. Some widgets might have more in common than other widgets. Some might be very general and fit in other projects, others are more specific.

如果我将小部件设计为指令，是否可以在指令中定义依赖项.IE.说我的指令在其实现中使用了 ng-calender?

If I design my widget as directives, is there a way to define dependency within a directive. I.e. to say that my directive uses ng-calender in its implementation?

对其他模块的依赖是在模块级别完成的，但是如果模块 A 依赖于模块 B 和 A 都没有问题而B依赖于模块C.指令是在 Angular 中创建小部件的自然选择.如果一个指令依赖于另一个指令，你要么在同一个模块中定义它们，要么在模块化级别上创建依赖项.

Dependencies to other modules are done on a module level, but there is no problem if module A depends on module B and both A and B depends on module C. Directives are a natural choice for creating widgets in Angular. If a directive depends on another directive you either define them in the same module, or create the dependency on a modular level.

如果我将每个小部件设计为一个单独的模块，有没有办法将小部件模块作为对主模块的依赖项动态添加?

If I design each widget as a separate module, is there a way to dynamically add the widget module as a dependency to the main module?

我不知道您为什么要这样做，也不知道该怎么做.指令和服务在用于 Angular 之前不会被初始化.如果你有一个庞大的指令库(小部件)并且知道你可能会使用其中的一些，但不是全部——但是你不知道在应用程序初始化时会使用哪些，你实际上可以懒惰"在您的模块加载后加载"您的指令.我在此处

I'm not sure why you would want to do this, and I'm not sure how to do it. Directives and services are not initialized before they get used in Angular. If you have a huge library of directives (widgets) and know that you'll probably use some of them, but not all of them - but you don't know which ones will get used when the application gets initialized you can actually "lazy load" your directives after your module has been loaded. I've created an example here

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

The benefit is that you can get your application to load fast even if you have lots of code, because you don't have to load the scripts before you need them. The disadvantage is that there can be a considerably delay the first time a new directive is loaded.

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

How should I design the controllers - one controller per widget probably?

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

A widget will probably need its own controller. Controllers should generally be small, if they get big you can consider if there's any functionality that would fit better in a service.

如果视图中有多个来自同一类型的小部件，我应该如何分离状态(范围)?

How should i separate the state (scope) if i have multiple widgets from the same type in the view?

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

Widgets that need scope variables should without doubt have their own isolated scopes (scope:{ ... } in the directive configuration).

是否有使用 AngularJS 设计可重用小部件的最佳实践?

Are there bestpractices for designing reusable widgets with AngularJS?

隔离作用域，将依赖项保持在必要的最低限度.请参阅 Misko 的关于 Angular 最佳实践的视频

Isolate the scope, keep the dependencies to a necessary minimum.See Misko's video about best practices in Angular

Brian Ford 还写了一篇关于用 Angular 编写大型应用程序的文章

Brian Ford has also written an article about writing a huge application in Angular

这篇关于使用动态模块集开发 AngularJS 应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！