單個NgModule與Angular 2的多個模塊相比較

我想知道是否最好創建一個包含所有我的角度2代碼的單個模塊，或者是否更好地將所有內容分割到多個模塊中。例如，我正在用Angular 2創建我的博客。所以我有一個「文章列表」組件和一個「文章」組件。「文章列表」調用一個返回文章列表的服務，然後對其執行「ngFor」併爲每個文章插入一個「文章」。單個NgModule與Angular 2的多個模塊相比較

「文章」組件包含一個「標籤列表」組件（它遵循與「文章列表」組件相同的模式，所以我也有一個「標籤」組件）。現在，一切都在一個模塊中，並且工作得很好，但here，我可以看到他們爲「英雄」相關的東西創建了一個模塊，但我只是想知道它是否真的有必要。其實，我並不完全知道創建模塊的代價，而不是將所有內容都放在主要模塊中，所以我很難知道是否應該繼續使用一個模塊或創建「文章」模塊和「標籤」一個。

來源

2016-09-28 ssougnez

是的，你可以將你的應用程序拆分成模塊。這將減少應用程序中模塊之間的耦合。如果您正在構建一個大型應用程序，將應用程序劃分爲功能單元或模塊非常重要。

例如，你的主模塊的名稱是「app.module」

的應用包括「頁眉」，「家」，......，「頁腳」節。

在標題部分中，您可以創建多個組件。例如。鏈接（路線）和搜索部分，將其添加到模塊標題中。同樣，Home，Footer和其他部分包含關聯的模塊。

例如，Home部分是一個由許多功能組成的大部分，然後我們可以創建多個模塊並注入到home主模塊中，比如'home.module'。

在下面的代碼僅僅是示出了如何實現在角度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 { }

Just refer angular2 ngmodule documentation

來源

2016-09-28 20:12:47

好吧，我會分開我的代碼。謝謝 – ssougnez

哪裏推薦放置其他模塊？在app.module.ts附近，它靠近與其相關的功能？謝謝。 – Guy

@Guy我們需要在模塊化結構中構建一個應用程序。所以從屬模塊被注入到相應的特徵主模塊中。例如，如果您有一個大特徵，那麼您可以在feature文件夾中創建一個「main.module.ts」，並在「main.module.ts」中注入其他相關模塊 –

您應該努力根據您的功能將您的應用程序劃分爲模塊。

角度模塊使得更容易隔離，測試和重用功能。
Angular模塊可以輕鬆實現延遲加載可路由功能。

如果我們將與角教程示例堅持：這將是有意義的組HeroesModule下的所有英雄和惡棍下VillainsModule。其次，如果您的應用程序具有與它們和其他模塊相關的通用功能，則可以創建另一個模塊，例如CommonModule。例如，Angular 2自帶的Common模塊提供了基本的功能，例如NgFor和NgIf指令。

來源

2016-09-28 19:56:01

，並將它也是有道理創造「StructureModule」將包含諸如「HeaderComponent」，「HomeComponent」，「FooterComponent」（所以基本上，組件正在形成網站不同頁面的主要設計）？ – ssougnez

單個NgModule與Angular 2的多個模塊相比較

回答

相關問題