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

啟動過程

Launching your app with a root module

前提條件

Prerequisites

對下列知識有基本的瞭解:

A basic understanding of the following:


NgModule 用於描述應用的各個部分如何組織在一起。 每個應用有至少一個 Angular 模組,模組就是你用來啟動此應用的模組。 按照慣例,它通常命名為 AppModule

An NgModule describes how the application parts fit together. Every application has at least one Angular module, the root module, which must be present for bootstrapping the application on launch. By convention and by default, this NgModule is named AppModule.

當你使用 Angular CLI 命令 ng new 產生一個應用時,其預設的 AppModule 是這樣的:

When you use the Angular CLI command ng new to generate an app, the default AppModule looks like the following:

      
      /* JavaScript imports */
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

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

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

import 語句之後,是一個帶有 @NgModule裝飾器的類別。

After the import statements is a class with the @NgModuledecorator.

@NgModule 裝飾器表明 AppModule 是一個 NgModule 類別。 @NgModule 獲取一個元資料物件,它會告訴 Angular 如何編譯和啟動本應用。

The @NgModule decorator identifies AppModule as an NgModule class. @NgModule takes a metadata object that tells Angular how to compile and launch the application.

  • declarations —— 該應用所擁有的元件。

    declarations—this application's lone component.

  • imports —— 匯入 BrowserModule 以獲取瀏覽器特有的服務,比如 DOM 渲染、無害化處理和位置(location)。

    imports—import BrowserModule to have browser specific services such as DOM rendering, sanitization, and location.

  • providers —— 各種服務提供者。

    providers—the service providers.

  • bootstrap —— 元件,Angular 建立它並插入 index.html 宿主頁面。

    bootstrap—the root component that Angular creates and inserts into the index.html host web page.

Angular CLI 建立的預設應用只有一個元件 AppComponent,所以它會同時出現在 declarationsbootstrap 陣列中。

The default application created by the Angular CLI only has one component, AppComponent, so it is in both the declarations and the bootstrap arrays.

declarations 陣列

The declarations array

該模組的 declarations 陣列告訴 Angular 哪些元件屬於該模組。 當你建立更多元件時,也要把它們新增到 declarations 中。

The module's declarations array tells Angular which components belong to that module. As you create more components, add them to declarations.

每個元件都應該(且只能)宣告(declare)在一個 NgModule 類別中。如果你使用了未宣告過的元件,Angular 就會報錯。

You must declare every component in exactly one NgModule class. If you use a component without declaring it, Angular returns an error message.

declarations 陣列只能接受可宣告物件。可宣告物件包括元件、指令管道。 一個模組的所有可宣告物件都必須放在 declarations 陣列中。 可宣告物件必須只能屬於一個模組,如果同一個類別被宣告在了多個模組中,編譯器就會報錯。

The declarations array only takes declarables. Declarables are components, directives and pipes. All of a module's declarables must be in the declarations array. Declarables must belong to exactly one module. The compiler emits an error if you try to declare the same class in more than one module.

這些可宣告的類別在當前模組中是可見的,但是對其它模組中的元件是不可見的 —— 除非把它們從當前模組匯出, 並讓對方模組匯入本模組。

These declared classes are visible within the module but invisible to components in a different module unless they are exported from this module and the other module imports this one.

下面是哪些類別可以新增到 declarations 陣列中的例子:

An example of what goes into a declarations array follows:

      
      declarations: [
  YourComponent,
  YourPipe,
  YourDirective
],
    

每個可宣告物件都只能屬於一個模組,所以只能把它宣告在一個 @NgModule 中。當你需要在其它模組中使用它時,就要在那裡匯入包含這個可宣告物件的模組。

A declarable can only belong to one module, so only declare it in one @NgModule. When you need it elsewhere, import the module that has the declarable you need in it.

透過 @NgModule 使用指令

Using directives with @NgModule

使用 declarations 陣列宣告指令。在模組中使用指令、元件或管道的步驟如下:

Use the declarations array for directives. To use a directive, component, or pipe in a module, you must do a few things:

  1. 從你編寫它的檔案中匯出它。

    Export it from the file where you wrote it.

  2. 把它匯入到適當的模組中。

    Import it into the appropriate module.

  3. @NgModuledeclarations 陣列中宣告它。

    Declare it in the @NgModule declarations array.

這三步的結果如下所示。在你建立指令的檔案中匯出它。 下面的例子中,item.directive.ts 中的 ItemDirective 是 CLI 自動產生的預設指令結構。

Those three steps look like the following. In the file where you create your directive, export it. The following example, named ItemDirective is the default directive structure that the CLI generates in its own file, item.directive.ts:

src/app/item.directive.ts
      
      import { Directive } from '@angular/core';

@Directive({
  selector: '[appItem]'
})
export class ItemDirective {
// code goes here
  constructor() { }

}
    

重點在於你要先在這裡匯出它才能在別處匯入它。接下來,使用 JavaScript 的 import 語句把它匯入到 NgModule 中(這裡是 app.module.ts)。

The key point here is that you have to export it so you can import it elsewhere. Next, import it into the NgModule, in this example app.module.ts, with a JavaScript import statement:

src/app/app.module.ts
      
      import { ItemDirective } from './item.directive';
    

同樣在這個檔案中,把它新增到 @NgModuledeclarations 陣列中:

And in the same file, add it to the @NgModule declarations array:

src/app/app.module.ts
      
      declarations: [
  AppComponent,
  ItemDirective
],
    

現在,你就可以在元件中使用 ItemDirective 了。這個例子中使用的是 AppModule,但是在特性模組中你也可以這麼做。 要進一步瞭解指令,參閱屬性型指令結構型指令。 這些也同樣適用於管道和元件。

Now you could use your ItemDirective in a component. This example uses AppModule, but you'd do it the same way for a feature module. For more about directives, see Attribute Directives and Structural Directives. You'd also use the same technique for pipes and components.

記住:元件、指令和管道都只能屬於一個模組。你在應用中也只需要宣告它們一次,因為你還可以透過匯入必要的模組來使用它們。這能節省你的時間,並且幫助你的應用保持精簡。

Remember, components, directives, and pipes belong to one module only. You only need to declare them once in your app because you share them by importing the necessary modules. This saves you time and helps keep your app lean.

imports 陣列

The imports array

模組的 imports 陣列只會出現在 @NgModule 元資料物件中。 它告訴 Angular 該模組想要正常工作,還需要哪些模組。

The module's imports array appears exclusively in the @NgModule metadata object. It tells Angular about other NgModules that this particular module needs to function properly.

src/app/app.module.ts (excerpt)
      
      imports: [
  BrowserModule,
  FormsModule,
  HttpClientModule
],
    

列表中的模組匯出了本模組中的各個元件範本中所參考的各個元件、指令或管道。在這個例子中,當前元件是 AppComponent,它參考了匯出自 BrowserModuleFormsModuleHttpClientModule 的元件、指令或管道。 總之,元件的範本中可以參考在當前模組中宣告的或從其它模組中匯入的元件、指令、管道。

This list of modules are those that export components, directives, or pipes that component templates in this module reference. In this case, the component is AppComponent, which references components, directives, or pipes in BrowserModule, FormsModule, or HttpClientModule. A component template can reference another component, directive, or pipe when the referenced class is declared in this module or the class was imported from another module.

providers 陣列

The providers array

providers 陣列中列出了該應用所需的服務。當直接把服務列在這裡時,它們是全應用範圍的。 當你使用特性模組和延遲載入時,它們是範圍化的。要了解更多,參閱服務提供者

The providers array is where you list the services the app needs. When you list services here, they are available app-wide. You can scope them when using feature modules and lazy loading. For more information, see Providers.

bootstrap 陣列

The bootstrap array

應用是透過引導根模組 AppModule 來啟動的,根模組還參考了 entryComponent。 此外,引導過程還會建立 bootstrap 陣列中列出的元件,並把它們逐個插入到瀏覽器的 DOM 中。

The application launches by bootstrapping the root AppModule, which is also referred to as an entryComponent. Among other things, the bootstrapping process creates the component(s) listed in the bootstrap array and inserts each one into the browser DOM.

每個被引導的元件都是它自己的元件樹的根。 插入一個被引導的元件通常觸發一系列元件的建立並形成元件樹。

Each bootstrapped component is the base of its own tree of components. Inserting a bootstrapped component usually triggers a cascade of component creations that fill out that tree.

雖然也可以在宿主頁面中放多個元件,但是大多數應用只有一個元件樹,並且只從一個根元件開始引導。

While you can put more than one component tree on a host web page, most applications have only one component tree and bootstrap a single root component.

這個根元件通常叫做 AppComponent,並且位於根模組的 bootstrap 陣列中。

This one root component is usually called AppComponent and is in the root module's bootstrap array.

關於 Angular 模組的更多知識

More about Angular Modules

要進一步瞭解常見的 NgModules 知識,參閱 關於模組的常見問題

For more on NgModules you're likely to see frequently in apps, see Frequently Used Modules.