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

常用模組

Frequently-used modules

Angular 應用至少需要一個充當根模組使用的模組。 如果你要把某些特性新增到應用中,可以透過新增模組來實現。 下列是一些常用的 Angular 模組,其中帶有一些其內容物的例子:

An Angular app needs at least one module that serves as the root module. As you add features to your app, you can add them in modules. The following are frequently used Angular modules with examples of some of the things they contain:

NgModule

匯入自

Import it from

為何使用

Why you use it

BrowserModule

@angular/platform-browser

當你想要在瀏覽器中執行應用時

When you want to run your app in a browser

CommonModule

@angular/common

當你想要使用 NgIfNgFor

When you want to use NgIf, NgFor

FormsModule

@angular/forms

當要建構範本驅動表單時(它包含 NgModel

When you want to build template driven forms (includes NgModel)

ReactiveFormsModule

@angular/forms

當要建構響應式表單時

When you want to build reactive forms

RouterModule@angular/router

要使用路由功能,並且你要用到 RouterLink,.forRoot().forChild()

When you want to use RouterLink,.forRoot(), and .forChild()

HttpClientModule

@angular/common/http

當你要和伺服器對話時

When you want to talk to a server

匯入模組

Importing modules

當你使用這些 Angular 模組時,在 AppModule(或適當的特性模組)中匯入它們,並把它們列在當前 @NgModuleimports 陣列中。比如,在 Angular CLI 產生的基本應用中,BrowserModule 會在 app.module.tsAppModule 的頂部最先匯入。

When you use these Angular modules, import them in AppModule, or your feature module as appropriate, and list them in the @NgModule imports array. For example, in the basic app generated by the Angular CLI, BrowserModule is the first import at the top of the AppModule, app.module.ts.

/* import modules so that AppModule can access them */ import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ /* add modules here so Angular knows to use them */ BrowserModule, ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
      
      /* import modules so that AppModule can access them */
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [ /* add modules here so Angular knows to use them */
    BrowserModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
    

檔案頂部的這些匯入是 JavaScript 的匯入語句,而 @NgModule 中的 imports 陣列則是 Angular 特有的。 要了解更多的不同點,參閱 JavaScript 模組 vs. NgModule

The imports at the top of the array are JavaScript import statements while the imports array within @NgModule is Angular specific. For more information on the difference, see JavaScript Modules vs. NgModules.

BrowserModuleCommonModule

BrowserModule and CommonModule

BrowserModule 匯入了 CommonModule,它貢獻了很多通用的指令,比如 ngIfngFor。 另外,BrowserModule 重新匯出了 CommonModule,以便它所有的指令在任何匯入了 BrowserModule 的模組中都可以使用。

BrowserModule imports CommonModule, which contributes many common directives such as ngIf and ngFor. Additionally, BrowserModule re-exports CommonModule making all of its directives available to any module that imports BrowserModule.

對於執行在瀏覽器中的應用來說,都必須在根模組中 AppModule 匯入 BrowserModule,因為它提供了啟動和執行瀏覽器應用時某些必須的服務。BrowserModule 的提供者是面向整個應用的,所以它只能在根模組中使用,而不是特性模組。 特性模組只需要 CommonModule 中的常用指令,它們不需要重新安裝所有全應用級的服務。

For apps that run in the browser, import BrowserModule in the root AppModule because it provides services that are essential to launch and run a browser app. BrowserModule’s providers are for the whole app so it should only be in the root module, not in feature modules. Feature modules only need the common directives in CommonModule; they don’t need to re-install app-wide providers.

如果你把 BrowserModule 匯入了延遲載入的特性模組中,Angular 就會返回一個錯誤,並告訴你要改用 CommonModule

If you do import BrowserModule into a lazy loaded feature module, Angular returns an error telling you to use CommonModule instead.


關於 NgModule 的更多知識

More on NgModules

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

You may also be interested in the following: