Angular 中的元件與模組

1. Angular 中的模組
2. Angular 中的元件
3. まとめ

本文將介紹 Angular 中的元件和模組，並討論它們的區別。

Angular 中的模組

該模組是我們應用程式的完整功能。

例如，使用者身份驗證是一個完整的功能，包括使用者登入、註冊和身份驗證（忘記密碼和驗證電子郵件）。因此，使用者身份驗證是我們應用程式的一個模組。

當我們擁有一組相互關聯的功能時，就像使用者身份驗證一樣，該模組將包含一個或多個元件、服務和點子。

例如，我們在使用者身份驗證中包含三個元件登入、註冊和忘記密碼。我們的服務將是使用者身份驗證中的 API 呼叫，而 pips 將是助手。

因此，將這些相互關聯的不同功能組合在一起，就可以在我們的 Angular 應用程式中建立一個模組。

現在，讓我們使用以下命令建立一個新應用程式。

# angular
ng new my-app

在 Angular 中建立我們的新應用程式後，我們將使用此命令轉到我們的應用程式目錄。

# angular
cd my-app

現在，讓我們執行我們的應用程式來檢查所有依賴項是否安裝正確。

# angular
ng serve --open

然後，我們將開啟 app.module.ts 檔案。

# angular
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

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

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

如你在上面的程式碼中所見，我們在 App 模組中匯入了 NgModule 和 BrowserModule。我們還匯入了一個元件，AppComponent。

但是，如果我們想在我們的模組中匯入更多的元件，我們可以使用宣告在我們的模組中註冊我們的元件。如果我們要匯入另一個模組，我們可以使用 imports。

我們可以使用以下命令輕鬆地在 Angular 應用程式中建立新模組。

# angular
ng generate module user-auth

此命令將在 App 資料夾內建立一個新資料夾並建立一個新模組，如下所示。

輸出：

Angular 中的元件

元件是為特定任務建立的一段程式碼。

例如，如果我們希望使用者自己註冊，我們可以建立一個新元件 register，它允許使用者在我們的應用程式上註冊。

元件可以根據需要在哪裡重複使用。例如，如果我們想在 Angular 應用程式的所有網頁中使用頁首和頁尾，我們可以建立 header 和 footer 並將這些元件匯入到我們想要使用它們的任何位置。

一個元件由 4 個檔案組成：

1. 用於編寫元件樣式的 CSS 檔案。
2. 用於編寫我們元件的前端或檢視的 HTML 檔案。
3. 用於編寫測試案例的 Specs 檔案。
4. 元件檔案，我們在其中編寫元件的邏輯部分，其中包含函式、API 呼叫等。

現在，讓我們使用以下命令建立一個新應用程式。

# angular
ng new my-app

在 Angular 中建立我們的新應用程式後，我們將使用此命令轉到我們的應用程式目錄。

# angular
cd my-app

現在，讓我們執行我們的應用程式來檢查所有依賴項是否安裝正確。

# angular
ng serve --open

然後，我們將開啟 app.component.ts 檔案。

# angular
import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  title = "App Component";
}

正如你在上面的程式碼中看到的，我們從@angular/core 匯入了一個 component 方法。現在，我們可以使用剛剛匯入的 component 為我們的元件定義 selector、templateUrl 和 styleUrls。

選擇器是一個標籤，用於在我們的 Angular 應用程式中顯示我們元件的內容。

從上面的程式碼中，如果我們在 index.html 檔案中建立標籤 <app-root></app-root>，Angular 應用程式將檢測該標籤並將其替換為我們元件的內容。

templateUrl 用於為我們的元件定義模板。並且 styleUrls 將為我們的元件定義編寫樣式的 CSS 檔案。

我們可以使用以下命令輕鬆地在 Angular 應用程式中建立新元件。

# angular
ng generate component login

此命令將為我們的元件建立 4 個帶有新選擇器的新檔案。

輸出：

まとめ

在本教程中，我們瞭解了 Angular 中的模組和元件、如何建立新元件、瞭解它們的方法以及它們是由什麼組成的。