Один NgModule против нескольких с Angular 2

Мне интересно, лучше ли создать один модуль, содержащий весь мой угловой код 2, или лучше разделить все на несколько модулей. Например, я создаю свой блог с Angular 2. Поэтому у меня есть компонент "article-list" и "article". "article-list" вызывает сервис, который возвращает список статей, затем выполняет "ngFor" и вставляет "article" для каждой из них.

Компонент "article" содержит компонент "tag-list" (который следует той же схеме, что и "article-list", поэтому у меня также есть компонент "tag"). Пока все в одном модуле, и он работает довольно хорошо, но здесь я вижу, что они создали модуль для вещей, связанных с "героями", но мне просто интересно, действительно ли это необходимо.

На самом деле, я точно не знаю стоимость создания модулей вместо того, чтобы просто поместить все в основной, поэтому я пытаюсь понять, стоит ли мне продолжать с одним модулем или создать модуль "статьи" и модуль "теги",

Источник

2 ответа

Решение

Да, вы можете разбить свое приложение на модули. Это уменьшит связь между модулями в приложении. Если вы создаете большое приложение, важно разделить приложение на функциональный блок или модуль.

Например, имя вашего основного модуля - app.module

Приложение состоит из разделов "Верхний колонтитул", "Домой", ..., "Нижний колонтитул".

В разделе заголовка вы можете создать несколько компонентов. Например. ссылка (маршруты) и раздел поиска, добавьте это в заголовок модуля. Аналогично, Home, Footer и другие разделы содержат связанные модули.

Например, домашний раздел - это большой раздел, состоящий из множества функций, тогда мы можем создать несколько модулей и добавить их в главный домашний модуль, например, "home.module".

Приведенный ниже код является просто примером, который показывает, как реализовать несколько модулей в 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

Источник

Вы должны стремиться разбить ваше приложение на модули в соответствии с вашими возможностями.

  • Угловые модули облегчают изоляцию, тестирование и повторное использование функций.
  • Угловые модули облегчают ленивую загрузку маршрутизируемых функций.

Если мы остановимся на примере учебного пособия по Angular: имеет смысл сгруппировать всех героев в HeroesModule и злодеев в VillainsModule. Во-вторых, если у вас есть общие функциональные возможности, связанные с ними и другими модулями в вашем приложении, вы можете создать другой модуль, например CommonModule.

Например, сам Angular 2 поставляется с модулем Common, который обеспечивает базовые функциональные возможности, такие как директивы NgFor и NgIf.

Источник
Другие вопросы по тегам