单个NgModule与Angular 2的倍数 [英] One single NgModule versus multiples ones with Angular 2

问题描述

我想知道创建包含我所有angular 2代码的单个模块是否更好，还是将所有内容拆分到多个模块中更好.例如，我正在使用Angular 2创建博客.因此，我有一个文章列表"组件和一个文章"组件. 文章列表"调用一种服务，该服务返回文章列表，然后在其上执行"ngFor"并为每个文章插入一个文章".

I'm wondering if it's better to create one single module that contains all my angular 2 code or if it is better to split everything across multiple modules. For example, I'm creating my blog with Angular 2. So I have a "article-list" component and an "article" one. "article-list" calls a service that returns a list of articles then do a "ngFor" on it and inserts an "article" for each one.

文章"组件包含一个标签列表"组件(其遵循与文章列表"相同的模式，因此我也有一个标签"组件).目前，所有内容都在一个模块中，并且运行良好，但是此处，我可以看到他们为英雄"相关的东西创建了一个模块，但是我只是想知道是否真的有必要.

The "article" component contains a "tag-list" component (that follows the same pattern as the "article-list" one, so I also have a "tag" component). For now, everything is in one module and it works quite well but here, I can see that they created a module for "heroes" related stuff, but I'm just wondering if it's really necessary.

实际上，我并不完全知道创建模块的成本，而不仅仅是将所有内容都放在主要模块中，所以我一直在努力知道是否应该继续一个模块，还是创建一个文章"模块和一个标签".

Actually, I don't exactly know the cost of creating modules instead of just putting everything in the main one, so I'm struggling to know if I should continue with one module or create an "articles" module and a "tags" one.

推荐答案

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

Yes you can split your application into modules. This will decrease coupling between modules in the application. If you are building a large application it is important to dividing the application in to functional unit or module.

例如，您的主模块名称为"app.module"

For example, your main module name is 'app.module'

该应用程序由页眉"，主页"，...，页脚"部分组成.

The application consist of "Header", "Home", ..., "Footer" section.

在页眉"部分中，您可以创建多个组件.例如.链接(路线)和搜索部分，将其添加到模块标题中.同样，主页，页脚和其他部分包含关联的模块.

In Header section you can create multiple components. Eg. link(routes) and search section, add this in to a module header. Similarly Home, Footer and other section contain associated modules.

例如，主页"部分很大，它包含许多功能，然后我们可以创建多个模块，然后将其插入"home.module"这样的主页主模块中.

For example, Home section is a large one that consist of many functionalities then we can create multiple modules and inject into the home main module say 'home.module'.

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

The below code is just an example that shows how to implement multiple modules in an Angular 2.

app.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 { }

header.module.ts

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 { }

只需参考angular2 ngmodule文档

这篇关于单个NgModule与Angular 2的倍数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！