Angular9 JS 模塊與 NgMoudule 比較
JavaScript 和 Angular 都使用模塊來組織代碼,雖然它們的組織形式不同,但 Angular 的應用會同時依賴兩者。
JavaScript 模塊
在 JavaScript 中,模塊是內含 JavaScript 代碼的獨立文件。要讓其中的東西可用,你要寫一個導出語句,通常會放在相應的代碼之后,類似這樣:
export class AppComponent { ... }
然后,當你在其它文件中需要這個文件的代碼時,要像這樣導入它:
import { AppComponent } from './app.component';
JavaScript 模塊讓你能為代碼加上命名空間,防止因為全局變量而引起意外。
NgModules
NgModule
是一些帶有 @NgModule
裝飾器的類。@NgModule
裝飾器的 imports
數組會告訴 Angular 哪些其它的 NgModule
是當前模塊所需的。 imports
數組中的這些模塊與 JavaScript 模塊不同,它們都是 NgModule
而不是常規的 JavaScript 模塊。 帶有 @NgModule
裝飾器的類通常會習慣性地放在單獨的文件中,但單獨的文件并不像 JavaScript 模塊那樣作為必要條件,而是因為它帶有 @NgModule
裝飾器及其元數據。
Angular CLI 生成的 AppModule
實際演示了這兩種模塊:
/* These are JavaScript import statements. Angular doesn’t know anything about these. */
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
/* The @NgModule decorator lets Angular know that this is an NgModule. */
@NgModule({
declarations: [
AppComponent
],
imports: [ /* These are NgModule imports. */
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
NgModule 類與 JavaScript 模塊有下列關鍵性的不同:
-
NgModule
只綁定了可聲明的類,這些可聲明的類只是供 Angular 編譯器用的。 -
與 JavaScript 類把它所有的成員類都放在一個巨型文件中不同,你要把該模塊的類列在它的
@NgModule.declarations
列表中。 -
NgModule
只能導出可聲明的類。這可能是它自己擁有的也可能是從其它模塊中導入的。它不會聲明或導出任何其它類型的類。 - 與 JavaScript 模塊不同,
NgModule
可以通過把服務提供者加到@NgModule.providers
列表中,來用服務擴展整個應用。