根模塊 (root module)

每個(gè)應(yīng)用都至少有一個(gè)根模塊用來(lái)引導(dǎo)并運(yùn)行應(yīng)用。根模塊通常命名為 AppModule。

示例 src/app/app.module.ts

import { NgModule }   from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
 imports:   [ BrowserModule ],
 declarations: [ AppComponent ],
 bootstrap:  [ AppComponent ]
})
export class AppModule { }

imports 數(shù)組

注意：不要在 imports 數(shù)組中加入 NgModule 類(lèi)型之外的類(lèi)。

如果有兩個(gè)同名指令都叫做 HighlightDirective，我們只要在 import 時(shí)使用 as 關(guān)鍵字來(lái)為第二個(gè)指令創(chuàng)建個(gè)別名就可以了。

import {
 HighlightDirective as ContactHighlightDirective
} from './contact/highlight.directive';

關(guān)于 BrowserModule

每個(gè)瀏覽器中運(yùn)行的應(yīng)用都需要 @angular/platform-browser 里的 BrowserModule。 所以每個(gè)這樣的應(yīng)用都在其根 AppModule 的 imports 數(shù)組中包含 BrowserModule。

NgIf 是在來(lái)自 @angular/common 的 CommonModule 中聲明的。

CommonModule 提供了很多應(yīng)用程序中常用的指令，包括 NgIf 和 NgFor 等。

BrowserModule 導(dǎo)入了 CommonModule 并且重新導(dǎo)出了它。 最終的效果是：只要導(dǎo)入 BrowserModule 就自動(dòng)獲得了 CommonModule 中的指令。

declarations 數(shù)組

你必須在一個(gè) NgModule 類(lèi)聲明每一個(gè)組件，否則瀏覽器控制臺(tái)會(huì)報(bào)錯(cuò)。

不要在 declarations 添加組件、指令和管道以外的其他類(lèi)型。

不要把 NgModel（或 FORMS_DIRECTIVES）加到 AppModule 元數(shù)據(jù)的 declarations 數(shù)據(jù)中！這些指令屬于 FormsModule。
組件、指令和管道只能屬于一個(gè)模塊。

永遠(yuǎn)不要再次聲明屬于其它模塊的類(lèi)。

bootstrap 數(shù)組

通過(guò)引導(dǎo)根 AppModule 來(lái)啟動(dòng)應(yīng)用。 在啟動(dòng)過(guò)程中，其中一步是創(chuàng)建列在 bootstrap 數(shù)組的組件， 并將它們每一個(gè)都插入到瀏覽器的DOM中。
You launch the application by bootstrapping the root AppModule. Among other things, the bootstrapping process creates the component(s) listed in the bootstrap array and inserts each one into the browser DOM.

每個(gè)被引導(dǎo)的組件都是它自己的組件樹(shù)的根。 插入一個(gè)被引導(dǎo)的組件通常觸發(fā)一系列組件的創(chuàng)建并形成組件樹(shù)。
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.

雖然你可以將多個(gè)組件樹(shù)插入到宿主頁(yè)面，但并不普遍。 大多數(shù)應(yīng)用只有一個(gè)組件樹(shù)，它們引導(dǎo)單一根組件。
While you can put more than one component tree on a host web page, that's not typical. Most applications have only one component tree and they bootstrap a single root component.

根組件通常命名為 AppComponent。

在 main.ts 中引導(dǎo)

引導(dǎo)應(yīng)用的方法很多。 它們?nèi)Q于你想如何編譯應(yīng)用以及應(yīng)用將在哪兒運(yùn)行。

通過(guò)即時(shí) (JIT) 編譯器動(dòng)態(tài)引導(dǎo)

JIT, just-in-time

使用即時(shí) (JIT) 編譯器動(dòng)態(tài)編譯應(yīng)用 src/main.ts

// The browser platform with a compiler
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

// The app module
import { AppModule } from './app/app.module';

// Compile and launch the module
platformBrowserDynamic().bootstrapModule(AppModule);

使用預(yù)編譯器 (AOT) 進(jìn)行靜態(tài)引導(dǎo)

AOT, ahead-of-time

靜態(tài)方案可以生成更小、啟動(dòng)更快的應(yīng)用，建議優(yōu)先使用它，特別是在移動(dòng)設(shè)備或高延遲網(wǎng)絡(luò)下。

使用靜態(tài)選項(xiàng)，Angular 編譯器作為構(gòu)建流程的一部分提前運(yùn)行，生成一組類(lèi)工廠。它們的核心就是 AppModuleNgFactory。

引導(dǎo)預(yù)編譯的 AppModuleNgFactory：

// The browser platform without a compiler
import { platformBrowser } from '@angular/platform-browser';

// The app module factory produced by the static offline compiler
import { AppModuleNgFactory } from './app/app.module.ngfactory';

// Launch with the app module factory.
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

說(shuō)明：由于整個(gè)應(yīng)用都是預(yù)編譯的，所以我們不用把 Angular 編譯器一起發(fā)到瀏覽器中，也不用在瀏覽器中進(jìn)行編譯。

無(wú)論是 JIT 還是 AOT 編譯器都會(huì)從同一份 AppModule 源碼中生成一個(gè) AppModuleNgFactory 類(lèi)。 JIT 編譯器動(dòng)態(tài)地在瀏覽器的內(nèi)存中創(chuàng)建這個(gè)工廠類(lèi)。 AOT 編譯器把工廠輸出成一個(gè)物理文件，也就是我們?cè)陟o態(tài)版本 main.ts 中導(dǎo)入的那個(gè)。

通常，AppModule 不必關(guān)心它是如何被引導(dǎo)的。AppModule 會(huì)隨著應(yīng)用而演化，但是 main.ts 中的引導(dǎo)代碼不會(huì)變。

Ng模塊 (NgModule)

特性模塊

特性模塊是帶有 @NgModule 裝飾器及其元數(shù)據(jù)的類(lèi)，就像根模塊一樣。 特性模塊的元數(shù)據(jù)和根模塊的元數(shù)據(jù)的屬性是一樣的。

根模塊和特性模塊還共享著相同的執(zhí)行環(huán)境。 它們共享著同一個(gè)依賴(lài)注入器，這意味著某個(gè)模塊中定義的服務(wù)在所有模塊中也都能用。

它們?cè)诩夹g(shù)上有兩個(gè)顯著的不同點(diǎn)：

1. 我們引導(dǎo)根模塊來(lái)啟動(dòng)應(yīng)用，但導(dǎo)入特性模塊來(lái)擴(kuò)展應(yīng)用。
2. 特性模塊可以對(duì)其它模塊暴露或隱藏自己的實(shí)現(xiàn)。

特性模塊用來(lái)提供了內(nèi)聚的功能集合。 聚焦于應(yīng)用的某個(gè)業(yè)務(wù)領(lǐng)域、用戶(hù)工作流、某個(gè)基礎(chǔ)設(shè)施（表單、HTTP、路由），或一組相關(guān)的工具集合。

雖然這些都能在根模塊中做，但特性模塊可以幫助我們把應(yīng)用切分成具有特定關(guān)注點(diǎn)和目標(biāo)的不同區(qū)域。

當(dāng)前模塊不會(huì)繼承其它模塊中對(duì)組件、指令或管道的訪問(wèn)權(quán)。根模塊與特性模塊的 imports 互不相干。如果某一個(gè)模塊要綁定到 [(ngModel)] 就必需導(dǎo)入 FormsModule。

總結(jié)

本章整理內(nèi)容較少，主要是詳細(xì)理解 Angular 模塊的概念、功能、關(guān)系。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論