Angular 2模块:何时以及为何?

The*_*eal 24 angular

目前,我有一个使用主app模块服务和路由的大型组件.我不确定为它创建一个新模块是否是一个好习惯.

我的问题:

  • 创建新的角度2模块的用例是什么?
  • 在创建之前我需要考虑什么?
  • 我应该为一个大型组件创建一个模块,它使用了大约7个不同的组件吗?

Jac*_*Guy 28

最终,模块概念来到Angular 2,因为需要延迟加载.需要有一个地方可以声明一个应用程序的一部分的依赖关系并提供服务.

因此,我的偏好通常是仅将应用程序划分为模块,以实现延迟加载.就个人而言,我发现任何有限使用的模块声明.

尽管如此,就模块而言,没有单一的最佳实践.其中大部分依赖于项目.一些开发人员更喜欢为每个组件创建一个模块,而其他开发人员则为整个应用程序创建一个模块.

支持使用大量模块:除了代码详细程度之外,创建这些模块的缺点很少.您将拥有应用程序的较小部分,可以轻松重新排列并移动到其他应用程序中.应用程序特定区域的依赖关系也更加明确(而不是让所有组件都可以使用所有应用程序的指令).

支持使用少量模块:您将花费更少的时间来声明模块之间共享的组件.包含所有组件声明的单个根模块是应用程序依赖项的唯一事实来源.

总的来说,我会说你的直觉.选择创建模块与选择在应用程序中创建新文件夹没有太大区别.如果您发现您对模块的大小和范围感到不舒服,那么重构的成本很低.


The*_*ger 16

角度样式指南讨论了何时使用模块的主题。请参考“ 应用程序结构和NgModules”部分。更好的是,请参阅标题以直接进行有关模块的讨论。我在下面总结了一些细节,但是为了避免回答过于冗长,我省略了一些细节。用它来感受一下,但请参考样式指南以获取完整的上下文信息。

请在应用的根文件夹(例如,/ src / app)中创建一个NgModule。

为什么?每个应用程序至少需要一个根NgModule。

特征

请为每个功能区域创建一个NgModule。

为什么?NgModules使延迟加载可路由功能变得容易。

为什么?NgModules使隔离,测试和重用功能更加容易。

共享

在共享文件夹中创建一个名为SharedModule的功能模块;例如,app / shared / shared.module.ts定义了SharedModule。

当这些项将被其他功能模块中声明的组件重新使用和引用时,请在共享模块中声明组件,指令和管道。

在整个应用程序中引用共享模块的内容时,请考虑使用名称SharedModule。

为什么?SharedModule将包含可能需要来自另一个公共模块的功能的组件,指令和管道;例如,CommonModule中的ngFor。

核心

考虑在核心模块内部收集大量辅助的一次性使用类,以简化功能模块的外观结构。

考虑调用应用程序范围的核心模块CoreModule。将CoreModule导入根AppModule可以降低其复杂性,并强调其作为整个应用程序的协调器的作用。

不要在核心文件夹中创建一个名为CoreModule的功能模块(例如,app / core / core.module.ts定义CoreModule)。

不要将其实例将在整个应用程序中共享的实例放到CoreModule中(例如ExceptionService和LoggerService)。

不要在CoreModule中导入资产所需的所有模块(例如CommonModule和FormsModule)。

为什么?CoreModule提供一项或多项单例服务。Angular向应用程序根注入器注册了提供程序,从而使每个服务的单例实例都可用于需要它们的任何组件,而无论该组件是急于还是延迟加载的。

为什么?CoreModule将包含单例服务。延迟加载的模块导入这些模块时,将获得一个新实例,而不是预期的应用程序范围内的单例。

请在CoreModule中收集应用程序范围内的一次性组件。在应用启动时将其导入一次(在AppModule中),再也不要将其导入其他任何地方。(例如NavComponent和SpinnerComponent)。

为什么?现实世界中的应用程序可以具有仅在AppComponent模板中出现的几个一次性组件(例如,微调器,消息吐司和模式对话框)。它们不会导入其他地方,因此就这种意义而言不会共享。但是它们太大且凌乱,无法在根文件夹中保留。