填寫這份《一分鐘調查》,幫我們(開發組)做得更好!去填寫Home

NgModule 簡介

Introduction to modules

Angular 應用是模組化的,它擁有自己的模組化系統,稱作 NgModule。 一個 NgModule 就是一個容器,用於存放一些內聚的程式碼塊,這些程式碼塊專注於某個應用領域、某個工作流或一組緊密相關的功能。 它可以包含一些元件、服務提供者或其它程式碼檔案,其作用域由包含它們的 NgModule 定義。 它還可以匯入一些由其它模組中匯出的功能,並匯出一些指定的功能供其它 NgModule 使用。

Angular apps are modular and Angular has its own modularity system called NgModules. NgModules are containers for a cohesive block of code dedicated to an application domain, a workflow, or a closely related set of capabilities. They can contain components, service providers, and other code files whose scope is defined by the containing NgModule. They can import functionality that is exported from other NgModules, and export selected functionality for use by other NgModules.

每個 Angular 應用都至少有一個 NgModule 類別,也就是根模組,它習慣上命名為 AppModule,並位於一個名叫 app.module.ts 的檔案中。引導這個根模組就可以啟動你的應用。

Every Angular app has at least one NgModule class, the root module, which is conventionally named AppModule and resides in a file named app.module.ts. You launch your app by bootstrapping the root NgModule.

雖然小型的應用可能只有一個 NgModule,不過大多數應用都會有很多特性模組。應用的根模組之所以叫根模組,是因為它可以包含任意深度的層次化子模組。

While a small application might have only one NgModule, most apps have many more feature modules. The root NgModule for an app is so named because it can include child NgModules in a hierarchy of any depth.

@NgModule 元資料

NgModule metadata

NgModule 是一個帶有 @NgModule() 裝飾器的類別。@NgModule() 裝飾器是一個函式,它接受一個元資料物件,該物件的屬性用來描述這個模組。其中最重要的屬性如下。

An NgModule is defined by a class decorated with @NgModule(). The @NgModule() decorator is a function that takes a single metadata object, whose properties describe the module. The most important properties are as follows.

  • declarations(可宣告物件表) —— 那些屬於本 NgModule 的元件指令管道

    declarations: The components, directives, and pipes that belong to this NgModule.

  • exports(匯出表) —— 那些能在其它模組的元件範本中使用的可宣告物件的子集。

    exports: The subset of declarations that should be visible and usable in the component templates of other NgModules.

  • imports(匯入表) —— 那些匯出了模組中的元件範本所需的類別的其它模組。

    imports: Other modules whose exported classes are needed by component templates declared in this NgModule.

  • providers —— 本模組向全域性服務中貢獻的那些服務的建立器。 這些服務能被本應用中的任何部分使用。(你也可以在元件級別指定服務提供者,這通常是首選方式。)

    providers: Creators of services that this NgModule contributes to the global collection of services; they become accessible in all parts of the app. (You can also specify providers at the component level.)

  • bootstrap —— 應用的主檢視,稱為根元件。它是應用中所有其它檢視的宿主。只有根模組才應該設定這個 bootstrap 屬性。

    bootstrap: The main application view, called the root component, which hosts all other app views. Only the root NgModule should set the bootstrap property.

下面是一個簡單的根 NgModule 定義:

Here's a simple root NgModule definition.

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; @NgModule({ imports: [ BrowserModule ], providers: [ Logger ], declarations: [ AppComponent ], exports: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { }
src/app/app.module.ts
      
      import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
  imports:      [ BrowserModule ],
  providers:    [ Logger ],
  declarations: [ AppComponent ],
  exports:      [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }
    

AppComponent 放到 exports 中是為了示範匯出的語法,這在本例子中實際上是沒必要的。 根模組沒有任何理由匯出任何東西,因為其它模組永遠不需要匯入根模組。

AppComponent is included in the exports list here for illustration; it isn't actually necessary in this example. A root NgModule has no reason to export anything because other modules don't need to import the root NgModule.

NgModule 和元件

NgModules and components

NgModule 為其中的元件提供了一個編譯上下文環境。根模組總會有一個根元件,並在引導期間建立它。 但是,任何模組都能包含任意數量的其它元件,這些元件可以透過路由器載入,也可以透過範本建立。那些屬於這個 NgModule 的元件會共享同一個編譯上下文環境。

NgModules provide a compilation context for their components. A root NgModule always has a root component that is created during bootstrap, but any NgModule can include any number of additional components, which can be loaded through the router or created through the template. The components that belong to an NgModule share a compilation context.


元件及其範本共同定義檢視。元件還可以包含檢視層次結構,它能讓你定義任意複雜的螢幕區域,可以將其作為一個整體進行建立、修改和銷燬。 一個檢視層次結構中可以混合使用由不同 NgModule 中的元件定義的檢視。 這種情況很常見,特別是對一些 UI 函式庫來說。

A component and its template together define a view. A component can contain a view hierarchy, which allows you to define arbitrarily complex areas of the screen that can be created, modified, and destroyed as a unit. A view hierarchy can mix views defined in components that belong to different NgModules. This is often the case, especially for UI libraries.


當你建立一個元件時,它直接與一個叫做宿主檢視的檢視關聯起來。 宿主檢視可以是檢視層次結構的根,該檢視層次結構可以包含一些內嵌檢視,這些內嵌檢視又是其它元件的宿主檢視。 這些元件可以位於相同的 NgModule 中,也可以從其它 NgModule 中匯入。 樹中的檢視可以巢狀到任意深度。

When you create a component, it's associated directly with a single view, called the host view. The host view can be the root of a view hierarchy, which can contain embedded views, which are in turn the host views of other components. Those components can be in the same NgModule, or can be imported from other NgModules. Views in the tree can be nested to any depth.

注意: 檢視的這種層次結構是 Angular 在 DOM 和應用資料中檢測與響應變更時的關鍵因素。

Note: The hierarchical structure of views is a key factor in the way Angular detects and responds to changes in the DOM and app data.

NgModule 和 JavaScript 的模組

NgModules and JavaScript modules

NgModule 系統與 JavaScript(ES2015)用來管理 JavaScript 物件的模組系統不同,而且也沒有直接關聯。 這兩種模組系統不同但互補。你可以使用它們來共同編寫你的應用。

The NgModule system is different from and unrelated to the JavaScript (ES2015) module system for managing collections of JavaScript objects. These are complementary module systems that you can use together to write your apps.

JavaScript 中,每個檔案是一個模組,檔案中定義的所有物件都從屬於那個模組。 透過 export 關鍵字,模組可以把它的某些物件宣告為公共的。 其它 JavaScript 模組可以使用import 語句來訪問這些公共物件。

In JavaScript each file is a module and all objects defined in the file belong to that module. The module declares some objects to be public by marking them with the export key word. Other JavaScript modules use import statements to access public objects from other modules.

import { NgModule } from '@angular/core'; import { AppComponent } from './app.component';
      
      import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
    
export class AppModule { }
      
      export class AppModule { }
    

Angular 自帶的函式庫

Angular libraries

Component

Angular 會作為一組 JavaScript 模組進行載入,你可以把它們看成函式庫模組。每個 Angular 函式庫的名稱都帶有 @angular 字首。 使用 npm 套件管理器安裝 Angular 的函式庫,並使用 JavaScript 的 import 語句匯入其中的各個部分。

Angular loads as a collection of JavaScript modules. You can think of them as library modules. Each Angular library name begins with the @angular prefix. Install them with the node package manager npm and import parts of them with JavaScript import statements.


例如,像下面這樣,從 @angular/core 函式庫中匯入 Angular 的 Component 裝飾器:

For example, import Angular's Component decorator from the @angular/core library like this.

import { Component } from '@angular/core';
      
      import { Component } from '@angular/core';
    

還可以使用 JavaScript 的匯入語句從 Angular 函式庫中匯入 Angular 模組。 比如,下列程式碼從 platform-browser 函式庫中匯入了 BrowserModule 這個 NgModule。

You also import NgModules from Angular libraries using JavaScript import statements. For example, the following code imports the BrowserModule NgModule from the platform-browser library.

import { BrowserModule } from '@angular/platform-browser';
      
      import { BrowserModule } from '@angular/platform-browser';
    

在上面這個簡單的根模組範例中,應用的根模組需要來自 BrowserModule 中的素材。要訪問這些素材,就要把它加入 @NgModule 元資料的 imports 中,程式碼如下:

In the example of the simple root module above, the application module needs material from within BrowserModule. To access that material, add it to the @NgModule metadata imports like this.

imports: [ BrowserModule ],
      
      imports:      [ BrowserModule ],
    

透過這種方式,你可以同時使用 Angular 和 JavaScript 的這兩種模組系統。 雖然這兩種模組系統容易混淆(它們共享了同樣的詞彙 importexport),不過只要多用用你就會熟悉它們各自的語境了。

In this way you're using the Angular and JavaScript module systems together. Although it's easy to confuse the two systems, which share the common vocabulary of "imports" and "exports", you will become familiar with the different contexts in which they are used.

更多資訊,參閱 NgModules

Learn more from the NgModules guide.