Angular 中的元件與模組

Rana Hasnain Khan 2023年1月30日 2022年4月20日
  1. Angular 中的模組
  2. Angular 中的元件
  3. まとめ
Angular 中的元件與模組

本文將介紹 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 結果中的模組

Angular 中的元件

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

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

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

一個元件由 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 為我們的元件定義 selectortemplateUrlstyleUrls

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

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

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

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

# angular
ng generate component login

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

輸出:

元件在 Angular 中的結果

まとめ

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

Rana Hasnain Khan avatar Rana Hasnain Khan avatar

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

LinkedIn

相關文章 - Angular Component

相關文章 - Angular Module