Angular 一个NGO模块与多个NGO模块，角度为2

我想知道是创建一个包含所有angular 2代码的单一模块更好，还是将所有内容拆分为多个模块更好。例如，我正在用Angular 2创建我的博客。所以我有一个“文章列表”组件和一个“文章”组件。“article list”调用一个服务，该服务返回一个文章列表，然后对其执行“ngFor”，并为每个文章插入一个“article”

“article”组件包含一个“taglist”组件（它遵循与“article list”组件相同的模式，因此我还有一个“tag”组件）。现在，所有的东西都在一个模块中，它工作得很好，但是，我可以看到他们为“英雄”相关的东西创建了一个模块，但是我只是想知道这是否真的有必要

---

实际上，我不知道创建模块而不是将所有内容都放在主模块中的成本，所以我很难知道是应该继续使用一个模块，还是创建一个“文章”模块和一个“标签”模块。

您应该努力根据您的功能将应用程序划分为多个模块

• 角度模块使隔离、测试和重用功能变得更容易
• 角度模块使延迟加载可路由功能变得容易

如果我们坚持使用角度教程示例： 将所有英雄归为英雄模块，将恶棍归为恶棍模块是有意义的。其次，如果您的应用程序中有与它们和其他模块相关的通用功能，您可以创建另一个模块，例如CommonModule

---

例如，Angular 2本身附带提供基本功能的通用模块，如NgFor和NgIf指令。

是的，您可以将应用程序拆分为模块。这将减少应用程序中模块之间的耦合。如果要构建大型应用程序，将应用程序划分为功能单元或模块是很重要的

例如，您的主模块名为“app.module”

应用程序由“页眉”、“主页”、“主页”、“页脚”部分组成

在标题部分，您可以创建多个组件。例如，链接（路线）和搜索部分，将其添加到模块标题中。类似地，主页、页脚和其他部分也包含相关模块

例如，Home部分是一个由许多功能组成的大型部分，然后我们可以创建多个模块并将其插入Home主模块，如“Home.module”

下面的代码只是一个示例，演示了如何在Angular 2中实现多个模块

应用程序模块.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';


import { AppComponent }   from './app.component';
import { HeaderModule }   from './header.module';

@NgModule({
  imports:      [ 
    BrowserModule,
    HeaderModule
  ],
  declarations: [
    AppComponent,
  ],
  bootstrap: [ AppComponent ]
})

export class AppModule { }

import { NgModule }      from '@angular/core';
import { CommonModule }  from '@angular/common';
import { FormsModule }   from '@angular/forms';
import { HttpModule } from '@angular/http';

import {
  InputTextModule, 
  ButtonModule,
  DataTableModule,
  SharedModule
} from 'primeng/primeng';

import { HeaderComponent }   from './header.component';
import { UploadFileComponent }   from './upload-file.component';


@NgModule({
  imports:      [
    CommonModule,
    FormsModule,
    HttpModule,
    InputTextModule,
    ButtonModule,
    DataTableModule,
    SharedModule
  ],
  declarations: [
    HeaderComponent,
    UploadFileComponent
  ],
  exports: [ 
    HeaderComponent 
  ]
})

export class HeaderModule { }

header.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';


import { AppComponent }   from './app.component';
import { HeaderModule }   from './header.module';

@NgModule({
  imports:      [ 
    BrowserModule,
    HeaderModule
  ],
  declarations: [
    AppComponent,
  ],
  bootstrap: [ AppComponent ]
})

export class AppModule { }

import { NgModule }      from '@angular/core';
import { CommonModule }  from '@angular/common';
import { FormsModule }   from '@angular/forms';
import { HttpModule } from '@angular/http';

import {
  InputTextModule, 
  ButtonModule,
  DataTableModule,
  SharedModule
} from 'primeng/primeng';

import { HeaderComponent }   from './header.component';
import { UploadFileComponent }   from './upload-file.component';


@NgModule({
  imports:      [
    CommonModule,
    FormsModule,
    HttpModule,
    InputTextModule,
    ButtonModule,
    DataTableModule,
    SharedModule
  ],
  declarations: [
    HeaderComponent,
    UploadFileComponent
  ],
  exports: [ 
    HeaderComponent 
  ]
})

export class HeaderModule { }

---

创建一个包含“HeaderComponent”、“HomeComponent”、“FooterComponent”等组件的“StructureModule”（基本上，构成网站不同页面主要设计的组件）也有意义吗？我宁愿将这些组件放在“Common”下模块建议将其他模块放置在何处？app.module.ts附近是否有与其相关的功能？谢谢。@Guy，我们需要以模块化结构构建应用程序。因此，相关模块被注入到相应的功能主模块中。例如，如果您有一个大功能，那么您可以在功能文件夹中创建一个“main.module.ts”，并在“main.module.ts”中插入其他相关模块。这种方法的问题是

模块a

可以调用

模块B

，但

模块B

不能调用

模块a

。在这种情况下，您必须使用一个模块来放置所有服务并创建一些共享组件。@Portekoi您是对的。我们需要创造一些像核心，共享等。。。基于项目结构的模块。这里我只是解释了单模块和多模块的区别。