Angular9 JS 模塊與 NgMoudule 比較

JavaScript 和 Angular 都使用模塊來組織代碼，雖然它們的組織形式不同，但 Angular 的應(yīng)用會(huì)同時(shí)依賴兩者。

JavaScript 模塊

在 JavaScript 中，模塊是內(nèi)含 JavaScript 代碼的獨(dú)立文件。要讓其中的東西可用，你要寫一個(gè)導(dǎo)出語句，通常會(huì)放在相應(yīng)的代碼之后，類似這樣：

export class AppComponent { ... }

然后，當(dāng)你在其它文件中需要這個(gè)文件的代碼時(shí)，要像這樣導(dǎo)入它：

import { AppComponent } from './app.component';

JavaScript 模塊讓你能為代碼加上命名空間，防止因?yàn)槿肿兞慷鹨馔狻?/p>

NgModules

NgModule 是一些帶有 @NgModule 裝飾器的類。@NgModule 裝飾器的 imports 數(shù)組會(huì)告訴 Angular 哪些其它的 NgModule 是當(dāng)前模塊所需的。 imports 數(shù)組中的這些模塊與 JavaScript 模塊不同，它們都是 NgModule 而不是常規(guī)的 JavaScript 模塊。 帶有 @NgModule 裝飾器的類通常會(huì)習(xí)慣性地放在單獨(dú)的文件中，但單獨(dú)的文件并不像 JavaScript 模塊那樣作為必要條件，而是因?yàn)樗鼛в?@NgModule 裝飾器及其元數(shù)據(jù)。

Angular CLI 生成的 AppModule 實(shí)際演示了這兩種模塊：

/* 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 模塊有下列關(guān)鍵性的不同：

• NgModule 只綁定了可聲明的類，這些可聲明的類只是供 Angular 編譯器用的。

• 與 JavaScript 類把它所有的成員類都放在一個(gè)巨型文件中不同，你要把該模塊的類列在它的 @NgModule.declarations 列表中。

• NgModule 只能導(dǎo)出可聲明的類。這可能是它自己擁有的也可能是從其它模塊中導(dǎo)入的。它不會(huì)聲明或?qū)С鋈魏纹渌愋偷念悺?/li>

• 與 JavaScript 模塊不同，NgModule 可以通過把服務(wù)提供者加到 @NgModule.providers 列表中，來用服務(wù)擴(kuò)展整個(gè)應(yīng)用。