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

时间:2016-11-11 19:05:19

标签: angular

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

我的问题

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

3 个答案:

答案 0 :(得分:23)

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

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

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

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

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

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

答案 1 :(得分:8)

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

  

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

     

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

功能

  

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

     

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

     

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

共享

  

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

     

在以下情况下,请在共享模块中声明组件,指令和管道:   这些项目将被声明的组件重复使用和引用   在其他功能模块中。

     

在共享内容时考虑使用名称SharedModule   整个应用程序都引用了该模块。

     

为什么? SharedModule将包含以下组件,指令和管道:   可能需要其他通用模块的功能;例如ngFor in   通用模块。

核心

  

考虑在一个容器中收集大量的,辅助的,一次性的类   核心模块以简化功能模块的外观结构。

     

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

     

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

     

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

     

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

     

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

     

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

     

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

     

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

答案 2 :(得分:1)

Angular模块的目标:

1)将组件,指令,管道整合成具有凝聚力的功能
2)将一些组件,指令,管道公开;以便其他模块组件模板可以使用它们。
3)从其他模块导入当前模块的组件模板所需的组件,指令,管道。
4)提供其他模块可以使用的服务。

这是为什么的答案?。