Angular 应用程序结构

引言

设置应用结构是应用开发中最重要的部分之一。因为一个结构良好的应用可以让你以较小的精力扩展/增长应用，节省大量的应用维护工作，并且可以让你轻松找到文件和资源。

没有框架强制要求遵循如何构建应用结构（如何在应用的不同部分安排文件），Angular 2 框架也是如此。它没有强制开发人员构建应用结构，例如如何安排开发人员创建的组件、指令、管道、服务等。但 Angular 团队提出了一个风格指南，必须遵循该指南来构建应用结构，请参考这里：风格指南

应用程序结构

下图是 Angular 应用结构的视觉呈现，它符合 Angular 团队的指南。

应用模块 — 它是 Angular 应用的起始点。这是应用加载时调用的第一个模块。当使用 Angular-cli 创建应用时，会自动创建此模块。需要注意的是，所有功能模块和核心模块都将在此模块中注册它们自己。

核心模块 — 在 Angular 应用中，该模块将包含应用级别的单例服务（例如，HttpInterceptor 用于拦截 http 请求，LoggerService, LoggedInUserService）或应用级别的组件（即导航栏）。

注意：应用级别的组件（即导航栏）也可以放在应用模块中。

核心模块拥有所有单例服务，因此只有根 AppModule（应用模块）才应该导入 CoreModule，以在应用的所有模块中使用服务的相同实例。如果一个惰性加载模块也导入它，惰性模块将创建它自己的核心模块服务实例，并使用新创建的服务实例而不是应用级别的单例服务。为了避免这个问题，请使用 forRoot 方法和保护子句，其代码如下所示。 https://angular.io/guide/singleton-services

@NgModule({
  imports: [CommonModule]
  declarations: [XyzComponent],//needed if there component
  exports: [XyzComponent]//needed if want to export component
})
export class CoreModule {
 
  constructor (@Optional() @SkipSelf() parentModule: CoreModule) {
    if (parentModule) {
      throw new Error(
        'CoreModule is already loaded. Import it in the AppModule only');
    }
  }
  
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: CoreModule,
      providers: [
        LoggerService ,UserService
      ]
    };
  }
}

共享模块 — 在 angular 应用中，该模块将包含所有哑的 Angular 管道、指令、组件、函数等。例如，所有接收输入的哑组件，使用它的组件，如扩展表单验证组件 (点击这里查看)，确认模型弹出框，格式化管道，验证和在整个应用中使用的通用函数，控件使用的指令等，它就像应用中使用的实用程序。需要注意的是，它不应该有 angular 服务。

功能模块 — 在 angular 应用中，功能模块将包含应用将提供的功能。（例如 CustomerModule, OrdersModule, ProductsModule, ShippingModule）。

此功能模块还将具有共享功能模块，该模块将在该功能模块之间共享。例如，ProductDataService 模块将在 ProductModule 和 OrderModule 之间共享。

模块依赖 (服务流)

下图显示了模块之间的依赖关系（例如，它显示了上面讨论的服务流）。

模块如何依赖或服务流

功能模块 — 这些模块将从核心模块（通过注册它的应用模块）和共享模块中消耗共享的哑管道、组件、指令、函数。

这意味着功能模块依赖于核心模块和共享模块。例如，服务从核心模块和共享模块流向功能模块。这里需要注意的重要一点是，服务从上到下流，而不是从下到上。这意味着顶层核心模块、应用模块和共享模块不能消耗来自功能模块的服务。

核心模块 — 如果需要，该模块将从共享模块消耗服务。它通常不需要来自共享模块的服务，但有时它需要访问通用函数或格式化管道以供其组件使用，这就是图中有虚线的原因。

因此，如果需要，服务从共享模块流向核心模块，否则这是一个独立的模块，提供应用级别的单例服务和组件。

应用模块 — 这个模块是一个简单的模块，只需要一个组件来提供应用的起始点。它将消耗来自核心模块的服务，如果需要，还可以消耗来自共享模块的服务。

共享模块 — 这是一个实用程序模块。此模块拥有所有哑的 angular 组件、管道、指令和实用程序函数。因此，此模块为其应用中的所有模块（应用模块、核心模块、功能模块）提供服务。

但它不会消耗来自其他模块的服务。

结论

Angular 框架并没有强制开发人员遵循讨论的结构来开发应用。但当应用要增长并且开发人员想要扩大规模时，这很有必要，并且也有助于识别应用的不同部分，这反过来有助于维护应用。将组件、服务、管道、指令放在合适的文件结构中并不是故事的结尾。为了建立正确的结构，开发人员必须在模块之间正确设置依赖关系（例如，如上所述的服务流）。

注意

以上文章基于我对 angular.io 门户网站的阅读以及在我的应用中应用的结构。如果有什么错误，请评论。