Angular2 如何清理 AppModule [英] Angular2 How to clean up the AppModule

问题描述

我一直在使用在线教程并创建了一个ok"的 SPA 数据输入应用程序.

I've been using the tutorials online and created an 'ok' SPA data entry application.

我已经很好地连接到我的 WEB API，但只构建了一个模型，并且我的 AppModule 已经安静了几行.

I have it connecting to my WEB API fine but have only built out one Model and already my AppModule has quiet a few lines.

我正在向前思考并使用当前的方法，我认为 AppModule 的大小在我完成后将是一个疯狂的大小，难以阅读，甚至可能更难以调试.

I'm thinking forward and using the current method I think the AppModule will be a crazy size once i finish with it, tough to read and possibly even tougher to debug.

我是否可能错过了如何构建 Angular2 更大的应用程序?

Have I possibly missed the point of how to structure an Angular2 larger application?

我正在努力寻找一个大于 1 个组件的在线教程/项目以供参考.

I'm struggling to find a tutorial/project online that is larger than 1 component for reference.

下面是我的 app.module.ts 和文件夹结构.

Below is my app.module.ts and folder structure.

我将我的 CashMovement、ListComponent 和 DataService 分开，我认为这是很好的做法，但添加了另外 10 个不同的数据服务和列表以及app.module 会很长.

I separate my CashMovement, ListComponent and DataService which I would think is good practice but add another 10 different data-services and lists and the app.module will be lengthy.

在我继续之前，请任何人阅读他们可以指出我的方向或我理解的建议是主观的个人意见.

Before I proceed any further does anybody please have some reading they could point me towards or advice which I understand is subjective to personal opinion.

import './rxjs-operators';

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule }    from '@angular/http';

import { PaginationModule, DatepickerModule, Ng2BootstrapModule, ModalModule, ProgressbarModule, TimepickerModule } from 'ng2-bootstrap/ng2-bootstrap';

import { SlimLoadingBarService, SlimLoadingBarComponent } from 'ng2-slim-loading-bar';


import { AppComponent }   from './app.component';
import { DateFormatPipe } from './shared/pipes/date-format.pipe';
import { HighlightDirective } from './shared/directives/highlight.directive';
import { HomeComponent } from './home/home.component';
import { MobileHideDirective } from './shared/directives/mobile-hide.directive';

import { CashMovementListComponent } from './cashmovements/cashmovement-list.component';
import { CashMovementDataService } from './cashmovements/cashmovement.data.service';

import { routing } from './app.routes';

import { ConfigService } from './shared/utils/config.service';
import { ItemsService } from './shared/utils/items.service';
import { MappingService } from './shared/utils/mapping.service';
import { NotificationService } from './shared/utils/notification.service';

@NgModule({
    imports: [
        BrowserModule,
        DatepickerModule,
        FormsModule,
        HttpModule,
        Ng2BootstrapModule,
        ModalModule,
        ProgressbarModule,
        PaginationModule,
        routing,
        TimepickerModule
    ],
    declarations: [
        AppComponent,
        DateFormatPipe,
        HighlightDirective,
        HomeComponent,
        MobileHideDirective,
        SlimLoadingBarComponent,
        CashMovementListComponent        
    ],
    providers: [
        ConfigService,
        CashMovementDataService,
        ItemsService,
        MappingService,
        NotificationService,
        SlimLoadingBarService
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

文件夹结构

推荐答案

你需要学会使用模块.

我通常将模块分解成这些类型

I usually break the modules down into these types

• 布局模块
• 功能模块
• 核心模块(仅 1 个)
• 共享模块(仅 1 个)
• 应用模块(仅 1 个)

布局模块用于布局应用.例如顶栏模块、侧边菜单模块、页脚模块和主内容模块.

Layout module is for laying out the app. For example a topbar module, a sidemenu module, a footer module, and a main content module.

功能模块.这究竟是什么?确实没有明确的定义，但是你觉得无论什么功能区域都可以自包含在模块中，你不妨去做.您将这些功能模块导入到您的布局模块中，因为这些功能构成了不同的布局组件

Feature module. What exactly is this? There's really no clear definition, but whatever feature area you feel can be self contained in module, you might as well do it. You will import these feature modules into your layout modules, as the features are what make up the different layout components

核心模块.在这里，您将导出您的布局模块以及所有核心(单例)服务.您只需要导出(而不是导入)模块，因为核心模块中的任何内容都不会真正使用这些布局模块.您只需导出它们，以便应用程序模块可以使用它们.核心模块只会导入到应用模块中

Core module. Here you will export your layout modules, and all your core (singleton) services. You only need to export (and not import) the modules, as nothing in the core module will actually use those layout modules. You just export them so that the app module can use them. The core module will only be imported into the app module

共享模块.您将在此处声明所有共享管道、指令和组件.您还可以导出常用的模块，如 CommonModule 和 FormsModule.其他模块将使用该模块

Shared module. This is where you will declare all your shared pipes, directives, and components. Also you you can export commonly used modules like CommonModule and FormsModule. Other modules will be using the module

应用模块.你已经知道这是什么了.在您自己创建的模块中，您唯一需要导入的是共享模块和核心模块.

App module. You already know what this is. Out of your own created modules, the only ones you need to import are the shared and core modules.

这是一个基本布局

共享模块

@NgModule({
  declarations: [ HighlightDirective, SharedPipe, SharedComponent ],
  exports: [ 
    HighlightDirective, SharedPipe, SharedComponent,
    CommonModule, FormsModule
  ]
})
class SharedModule {}

布局模块注意其他模块将使用 SharedModule

Layout Modules Notice other modules will use the SharedModule

@NgModule({
  imports: [ FeatureAModule, FeatureBModule, SharedModule ]
  declarations: [ TopbarComponent ],
  exports: [ TopbarComponent ]
})
class TopbarModule {}

@NgModule({
  imports: [ SharedModule ]
  declarations: [ SidemenuComponent ],
  exports: [ SidemenuComponent ]
})
class SidemenuModule {
  static forRoot() {   // pattern for adding app-wide services
    return {
      ngModule: SidemenuModule,
      providers: [ MenuSelectionService ]
    }
  }
}

@NgModule({
  imports: [ HomeModule, OtherModule, SharedModuel ]
  declarations: [ MainContentComponent ],
  exports: [ MainContentComponent ]
})
class MainContentModule {}

CoreModule 汇集构成应用程序的所有布局模块.并且还添加了其他应用范围的服务，这些服务不与其他模块绑定

CoreModule Bring together all the layout modules that make up the application. And also add other app-wide services, that are not tied to other modules

@NgModule({
  imports: [ SidemeuModule.forRoot() ]
  exports: [ TopbarModule, SidemenuModule, MainContentModule ],
})
class CoreModule {
  static forRoot() {
    return {
      ngModule: CoreModule,
      providers: [ UserService, AuthService ]
    }
  }
}

AppModule

@NgModule({
  imports: [
    BrowserModule,
    SharedModule,
    CoreModule.forRoot(),  // forRoot so we get all the providers
    HttpModule,
    RouterModule.forRoot(APP_ROUTES)
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
class AppModule {}

<小时>

另请参阅:

• Angular 文档使用模块.上面可能有你不明白的地方.这在文档中都有解释
• Angular 2 风格指南.应用程序结构和 Angular 模块
有一节

• Angular docs on using modules. There may be things above you don't understand. This is all explained in the docs
• The Angular 2 Style Guide. There's a section on App structure and Angular modules

这篇关于Angular2 如何清理 AppModule的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！