Angular 2 - 模組

模組用於 Angular JS 中，為應用程式設定邏輯邊界。因此，無需將所有程式碼都編寫到一個應用程式中，而是可以將所有內容構建到單獨的模組中，以分離應用程式的功能。讓我們檢查一下新增到演示應用程式中的程式碼。

在 Visual Studio Code 中，轉到應用程式資料夾中的 app.module.ts 資料夾。這被稱為根模組類。

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

讓我們詳細瞭解每一行程式碼。

import 語句用於從現有模組匯入功能。因此，前三個語句用於將 NgModule、BrowserModule 和 AppComponent 模組匯入此模組。
NgModule 裝飾器用於稍後定義匯入、宣告和引導選項。
對於任何基於 Web 的 Angular 應用程式，BrowserModule 預設都是必需的。
bootstrap 選項告訴 Angular 要引導哪個元件到應用程式中。

一個模組由以下部分組成：

Bootstrap 陣列 - 用於告訴 Angular JS 需要載入哪些元件才能在應用程式中訪問其功能。將元件包含在 bootstrap 陣列中後，需要宣告它們，以便可以在 Angular JS 應用程式中的其他元件中使用它們。
Export 陣列 - 用於匯出元件、指令和管道，然後可以在其他模組中使用它們。
Import 陣列 - 與 export 陣列一樣，import 陣列可用於從其他 Angular JS 模組匯入功能。

列印頁面