這篇文章將為大家詳細講解有關Angular4中根模塊與Ng模塊有什么用，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)主營懷來網(wǎng)站建設的網(wǎng)絡公司,主營網(wǎng)站建設方案,app軟件定制開發(fā),懷來h5重慶小程序開發(fā)搭建,懷來網(wǎng)站營銷推廣歡迎懷來等地區(qū)企業(yè)咨詢

根模塊 (root module)

每個應用都至少有一個根模塊用來引導并運行應用。根模塊通常命名為 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 類型之外的類。

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

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

關于 BrowserModule

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

NgIf 是在來自 @angular/common 的 CommonModule 中聲明的。

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

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

declarations 數(shù)組

你必須在一個 NgModule 類聲明每一個組件，否則瀏覽器控制臺會報錯。

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

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

永遠不要再次聲明屬于其它模塊的類。

bootstrap 數(shù)組

通過引導根 AppModule 來啟動應用。 在啟動過程中，其中一步是創(chuàng)建列在 bootstrap 數(shù)組的組件， 并將它們每一個都插入到瀏覽器的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.

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

雖然你可以將多個組件樹插入到宿主頁面，但并不普遍。 大多數(shù)應用只有一個組件樹，它們引導單一根組件。
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 中引導

引導應用的方法很多。 它們取決于你想如何編譯應用以及應用將在哪兒運行。

通過即時 (JIT) 編譯器動態(tài)引導

JIT, just-in-time

使用即時 (JIT) 編譯器動態(tài)編譯應用 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);

使用預編譯器 (AOT) 進行靜態(tài)引導

AOT, ahead-of-time

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

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

引導預編譯的 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);

說明：由于整個應用都是預編譯的，所以我們不用把 Angular 編譯器一起發(fā)到瀏覽器中，也不用在瀏覽器中進行編譯。

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

通常，AppModule 不必關心它是如何被引導的。AppModule 會隨著應用而演化，但是 main.ts 中的引導代碼不會變。

Ng模塊 (NgModule)

特性模塊

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

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

它們在技術上有兩個顯著的不同點：

1. 我們引導根模塊來啟動應用，但導入特性模塊來擴展應用。

2. 特性模塊可以對其它模塊暴露或隱藏自己的實現(xiàn)。

特性模塊用來提供了內聚的功能集合。 聚焦于應用的某個業(yè)務領域、用戶工作流、某個基礎設施（表單、HTTP、路由），或一組相關的工具集合。

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

當前模塊不會繼承其它模塊中對組件、指令或管道的訪問權。根模塊與特性模塊的 imports 互不相干。如果某一個模塊要綁定到 [(ngModel)] 就必需導入 FormsModule。

關于“Angular4中根模塊與Ng模塊有什么用”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

網(wǎng)站標題：Angular4中根模塊與Ng模塊有什么用-創(chuàng)新互聯(lián)
文章分享：http://chinadenli.net/article44/cddohe.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供App設計、標簽優(yōu)化、網(wǎng)站導航、云服務器、手機網(wǎng)站建設、品牌網(wǎng)站設計

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)