填寫這份《一分鐘調查》，幫我們（開發組）做得更好！去填寫Home
JS 模組 vs Angular 模組

JavaScript 模組 vs. NgModule

JavaScript modules vs. NgModules

JavaScript 模組和 NgModule 都可以幫你模組化你的程式碼，但它們卻有著本質性的不同。 Angular 應用同時依賴這兩種模組。

JavaScript modules and NgModules can help you modularize your code, but they are very different. Angular apps rely on both kinds of modules.

JavaScript 模組：包含程式碼的檔案

JavaScript modules: Files containing code

JavaScript 模組是一個帶有 JavaScript 程式碼的單獨檔案，它通常包含一個應用中特定用途的類別或函式函式庫。 JavaScript 模組讓你可以跨多個檔案進行工作。

A JavaScript module is an individual file with JavaScript code, usually containing a class or a library of functions for a specific purpose within your app. JavaScript modules let you spread your work across multiple files.

要了解更多關於 JavaScript 模組的資訊，參閱深入 ES6：模組 。關於模組規範的更多資訊，請參閱ECMAScript 標準第 6 版。

To learn more about JavaScript modules, see ES6 In Depth: Modules. For the module specification, see the 6th Edition of the ECMAScript standard.

要讓 JavaScript 模組中的程式碼可用於其它模組，請在模組中相關程式碼的末尾使用 export 匯出它，比如：

To make the code in a JavaScript module available to other modules, use an export statement at the end of the relevant code in the module, such as the following:

      
      export class AppComponent { ... }

如果你在另一個模組中需要來自本模組的程式碼時，請使用 import 語句，如下所示：

When you need that module’s code in another module, use an import statement as follows:

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

每個模組都有自己的最上層作用域。換句話說，模組中的最上層變數和函式在其他指令碼或模組中是看不到的。每個模組都為其中的識別符號提供了一個名稱空間，以防止它們與其它模組中的識別符號衝突。要想使用多個模組，你可以透過建立一個全域性名稱空間並為它新增子模組來防止出現意外的全域性變數。

Each module has its own top-level scope. In other words, top-level variables and functions in a module are not seen in other scripts or modules. Each module provides a namespace for identifiers to prevent them from clashing with identifiers in other modules. With multiple modules, you can prevent accidental global variables by creating a single global namespace and adding sub-modules to it.

Angular 框架本身就是作為一組 JavaScript 模組載入的。

The Angular framework itself is loaded as a set of JavaScript modules.

NgModule：帶有供編譯用的元資料的類別

NgModules: Classes with metadata for compiling

NgModule 是帶有 @NgModule 裝飾器標記的類別，它帶有一個描述該應用裡這個特定部分要如何與其他部分配合使用的元資料物件。 NgModule 是 Angular 特有的。雖然帶有 @NgModule 裝飾器的類別一般也儲存在單獨的檔案中，但它們與 JavaScript 模組的不同，因為它們包含這種元資料。

An NgModule is a class marked by the @NgModule decorator with a metadata object that describes how that particular part of the app fits together with the other parts. NgModules are specific to Angular. While classes with an @NgModule decorator are by convention kept in their own files, they differ from JavaScript modules because they include this metadata.

@NgModule 元資料在指導 Angular 編譯過程中發揮了重要作用，它把你編寫的應用程式碼轉換成高效的 JavaScript 程式碼。元資料描述瞭如何編譯元件範本以及如何在執行時建立注入器。它標出了 NgModule 的元件、指令和管道，並且透過 exports 屬性把它們中的一部分標為公開的，以便外部元件可以使用它們。你還可以使用 NgModule 為服務新增服務提供者，以便這些服務可以用在你應用的其他地方。

The @NgModule metadata plays an important role in guiding the Angular compilation process that converts the app code you write into highly performant JavaScript code. The metadata describes how to compile a component's template and how to create an injector at runtime. It identifies the NgModule's components, directives, and pipes, and makes some of them public through the exports property so that external components can use them. You can also use an NgModule to add providers for services, so that the services are available elsewhere in your app.

不要把所有類別都作為 JavaScript 模組定義在一個巨型檔案中，而應該在 @NgModule.declarations 列表中宣告哪些元件、指令和管道屬於這個 NgModule。這些類別叫做可宣告物件 。NgModule 只能匯出它自己擁有的可宣告物件類別或從其他 NgModule 中匯入的類別。它不會宣告或匯出任何其他型別的類別。對 Angular 編譯過程來說，可宣告物件是唯一值得關注的類別。

Rather than defining all member classes in one giant file as a JavaScript module, declare which components, directives, and pipes belong to the NgModule in the @NgModule.declarations list. These classes are called declarables. An NgModule can export only the declarable classes it owns or imports from other NgModules. It doesn't declare or export any other kind of class. Declarables are the only classes that matter to the Angular compilation process.

關於 NgModule 元資料屬性的完整描述，請參閱使用 NgModule 元資料。

For a complete description of the NgModule metadata properties, see Using the NgModule metadata.

同時使用兩者的例子

An example that uses both

Angular CLI為新應用專案產生的根模組 AppModule 示範瞭如何使用這兩種模組：

The root NgModule AppModule generated by the Angular CLI for a new app project demonstrates how you use both kinds of modules:

src/app/app.module.ts (default AppModule)
      
      // imports
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

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

// @NgModule decorator with its metadata
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

根模組根據 import 語句開頭匯入 JavaScript 模組。然後使用下列陣列 @NgModule

The root NgModule starts with import statements to import JavaScript modules. It then configures the @NgModule with the following arrays:

  • declarations ：屬於該 NgModule 的元件、指令和管道。新應用專案的根模組中只有一個叫做 AppComponent 的元件。

    declarations: The components, directives, and pipes that belong to the NgModule. A new app project's root NgModule has only one component, called AppComponent.

  • imports ：你要用的其他 NgModule，這樣你才可以使用它們的可宣告物件。新產生的根模組會匯入BrowserModule，以便使用特定於瀏覽器的服務，比如 DOM 渲染、無害化處理和定位。

    imports: Other NgModules you are using, so that you can use their declarables. The newly generated root NgModule imports BrowserModulein order to use browser-specific services such as DOM rendering, sanitization, and location.

  • providers ：一些服務提供者，可供其他 NgModule 中的元件使用。新產生的根模組中沒有提供者。

    providers: Providers of services that components in other NgModules can use. There are no providers in a newly generated root NgModule.

  • bootstrap ： Angular 建立的入口元件，Angular 會建立它，並把它插入到宿主頁面 index.html 中，從而引導該應用。這個入口元件 AppComponent 會同時出現在 declarations 和 bootstrap 陣列中。

    bootstrap: The entry component that Angular creates and inserts into the index.html host web page, thereby bootstrapping the app. This entry component, AppComponent, appears in both the declarations and the bootstrap arrays.

下一步

Next steps