发展与动态设置模块的AngularJS应用 [英] Developing an AngularJS app with dynamic set of modules

问题描述

我有一个复杂的布局，用户可以把（拖/放）小部件的应用程序（通过从$ P $选择pdefined设置的100多个小部件），每一个部件是一个显示一组数据的自定义实现以特定的方式（使用REST调用获取）。我读过吨的博客文章，计算器问题和官方AngularJS文档，但我想不出我应该怎么设计我的应用程序来处理有要求。望着演示应用程序，有一个单独的模块（NG-APP），当构建它的js文件的依赖模块被声明为它的依赖，但是我有一个大组小部件，并不知它是不可取来形容他们所有那里。我需要为suggession以下问题：

• 我应该如何设计我的应用程序和小工具？ - 我应该有一个单独的AngularJS模块或每个插件应该是一个指令，主模块


• 如果我设计我的小部件的指令，是有办法的指示中定义的依赖。即说，我的指令使用纳克压光机在其实施？


• 如果我设计每个插件作为一个单独的模块，有没有办法来动态的部件模块作为一个依赖添加到主模块？


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


• 我应该如何分开状态（范围内），如果我从视图中的相同类型的多个小部件？


• 是否有bestpractices与AngularJS设计可重复使用的小部件？

修改

有用的参考资料：

• ocLazyLoad - 伟大懒加载lib中AngularJS


• 种子工程 - 模块+延迟加载路线变化（ES6，systemjs，ocLazyLoad）


• 延迟加载在AngularJS


• Dynamically装载控制器和视图与AngularJS和RequireJS


• Loading AngularJS组件随着RequireJS应用引导
之后

AngularJS资源延迟加载href=\"https://github.com/nikospara/angular-require-lazy\">示范项目

• 按需加载项目


• 注入模块动态地仅在必要时


• 另一个延​​迟加载在角文章


• code组织大型AngularJS和JavaScript应用程序

解决方案

这些只是一般的建议。

  

我应该如何设计我的应用程序和小工具 - 我应该有一个单独AngularJS模块或每个插件应该是一个指令，主模块

你说的小部件hundres，他很自然地将它们分为几个模块。有些部件可能比其他部件更多的共同点。有些人可能会很笼统，适合在其他项目中，另一些则更为具体。

  

如果我设计我的小部件的指令，是有办法的指示中定义的依赖。即说，我的指令使用纳克压光机在其实施？

依赖于其他模块的模块级完成，但有没有问题，如果模块 A 取决于模块 B 两者 A 和 B 取决于模块 C 。指令是在角创建小部件的自然选择。如果指令依赖于另一指令，你要么在同一模块中定义它们，或者创建一个模块化水平的依赖。

  

如果我设计每个插件作为一个单独的模块，有没有办法来动态的部件模块作为一个依赖添加到主模块？

我不知道你为什么会想这样做，我不知道该怎么做。指令和服务，他们得到角使用前不被初始化。如果你有指令（小部件）一个巨大的图书馆，知道你可能会使用其中的一部分，但不是所有的人 - 但你不知道哪些会习惯当应用程序被初始化，你其实可以偷懒你的模块加载后加载的指令。我创建了一个例子这里

这样做的好处是，你可以让你的应用程序加载速度快，即使你有很多code，因为你没有你需要它们之前加载脚本。的缺点是，有可能是一个相当延迟第一时间一个新的指令被加载

  

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

一个小部件可能会需要它自己的控制器。控制器一般应小，如果他们得到大的，你可以考虑，如果有，将更好地适应在服务中的任何功能。

  

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

这需要范围变量应该毫无疑问地拥有自己的隔离范围的窗口小部件（范围：{...} 中的指令配置）。

  

是否有bestpractices与AngularJS设计可重复使用的小部件？

隔离范围，保持依赖于必要的最低限度。见MISKO的有关角 <最佳实践视频/ p>

布赖恩·福特也写过关于在角写一个巨大的应用

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:

• 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?
• 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?
• 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?
• How should I design the controllers - one controller per widget probably?
• How should i separate the state (scope) if i have multiple widgets from the same type in the view?
• Are there bestpractices for designing reusable widgets with AngularJS?

EDIT

Useful references:

• ocLazyLoad - great lazy loading lib for AngularJS
• Seed project - modules + lazy loading on route change (ES6, systemjs, ocLazyLoad)
• Lazy loading in AngularJS
• Dynamically Loading Controllers and Views with AngularJS and RequireJS
• Loading AngularJS Components With RequireJS After Application Bootstrap
• Demo project about lazy loading of AngularJS resources on GitHub
• Load On Demand project
• Inject module dynamically only if required
• Another lazy loading in Angular article
• Code Organization in Large AngularJS and JavaScript Applications

解决方案

These are just general advices.

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.

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?

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?

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?

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

Are there bestpractices for designing reusable widgets with AngularJS?

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

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

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