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

NgModules

NgModules 用於配置注入器和編譯器,並幫你把那些相關的東西組織在一起。

NgModules configure the injector and the compiler and help organize related things together.

NgModule 是一個帶有 @NgModule 裝飾器的類別。 @NgModule 的引數是一個元資料物件,用於描述如何編譯元件的範本,以及如何在執行時建立注入器。 它會標出該模組自己的元件、指令和管道,透過 exports 屬性公開其中的一部分,以便外部元件使用它們。 NgModule 還能把一些服務提供者新增到應用的依賴注入器中。

An NgModule is a class marked by the @NgModule decorator. @NgModule takes a metadata object that describes how to compile a component's template and how to create an injector at runtime. It identifies the module's own components, directives, and pipes, making some of them public, through the exports property, so that external components can use them. @NgModule can also add service providers to the application dependency injectors.

要想找一個涉及本章所講的全部技術的範例,參閱現場演練 / 下載範例。 要想得到針對單項技術的一些講解,參閱本目錄下的相關頁面。

For an example app showcasing all the techniques that NgModules related pages cover, see the現場演練 / 下載範例. For explanations on the individual techniques, visit the relevant NgModule pages under the NgModules section.

Angular 模組化

Angular modularity

模組是組織應用和使用外部函式庫擴充套件應用的最佳途徑。

Modules are a great way to organize an application and extend it with capabilities from external libraries.

Angular 自己的函式庫都是 NgModule,比如 FormsModuleHttpClientModuleRouterModule。 很多第三方函式庫也是 NgModule,比如 Material DesignIonicAngularFire2

Angular libraries are NgModules, such as FormsModule, HttpClientModule, and RouterModule. Many third-party libraries are available as NgModules such as Material Design, Ionic, and AngularFire2.

NgModule 把元件、指令和管道打包成內聚的功能塊,每個模組聚焦於一個特性區域、業務領域、工作流或通用工具。

NgModules consolidate components, directives, and pipes into cohesive blocks of functionality, each focused on a feature area, application business domain, workflow, or common collection of utilities.

模組還可以把服務加到應用中。 這些服務可能是內部開發的(比如你自己寫的),或者來自外部的(比如 Angular 的路由和 HTTP 客戶端)。

Modules can also add services to the application. Such services might be internally developed, like something you'd develop yourself or come from outside sources, such as the Angular router and HTTP client.

模組可以在應用啟動時急性載入,也可以由路由器進行非同步的延遲載入。

Modules can be loaded eagerly when the application starts or lazy loaded asynchronously by the router.

NgModule 的元資料會做這些:

NgModule metadata does the following:

  • 宣告某些元件、指令和管道屬於這個模組。

    Declares which components, directives, and pipes belong to the module.

  • 公開其中的部分元件、指令和管道,以便其它模組中的元件範本中可以使用它們。

    Makes some of those components, directives, and pipes public so that other module's component templates can use them.

  • 匯入其它帶有元件、指令和管道的模組,這些模組中的元件都是本模組所需的。

    Imports other modules with the components, directives, and pipes that components in the current module need.

  • 提供一些供應用中的其它元件使用的服務。

    Provides services that other application components can use.

每個 Angular 應用都至少有一個模組,也就是根模組。 你可以引導那個模組,以啟動該應用。

Every Angular app has at least one module, the root module. You bootstrap that module to launch the application.

對於那些只有少量元件的簡單應用,根模組就是你所需的一切。 隨著應用的成長,你要把這個根模組重構成一些特性模組,它們代表一組密切相關的功能集。 然後你再把這些模組匯入到根模組中。

The root module is all you need in a simple application with a few components. As the app grows, you refactor the root module into feature modules that represent collections of related functionality. You then import these modules into the root module.

基本的模組

The basic NgModule

Angular CLI 在建立新應用時會產生如下基本模組 AppModule

The Angular CLI generates the following basic AppModule when creating a new app.

// 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 {}
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 {}
    

檔案的頂部是一些匯入語句。接下來是你配置 NgModule 的地方,用於規定哪些元件和指令屬於它(declarations),以及它使用了哪些其它模組(imports)。 如果要進一步瞭解 @NgModule 的結構,參閱引導

At the top are the import statements. The next section is where you configure the @NgModule by stating what components and directives belong to it (declarations) as well as which other modules it uses (imports). For more information on the structure of an @NgModule, be sure to read Bootstrapping.


關於 NgModule 的更多知識

More on NgModules

你可能還對下列內容感興趣:

You may also be interested in the following: