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 中的元件
元件是為特定任務建立的一段程式碼。
例如,如果我們希望使用者自己註冊,我們可以建立一個新元件 register
,它允許使用者在我們的應用程式上註冊。
元件可以根據需要在哪裡重複使用。例如,如果我們想在 Angular 應用程式的所有網頁中使用頁首和頁尾,我們可以建立 header
和 footer
並將這些元件匯入到我們想要使用它們的任何位置。
一個元件由 4 個檔案組成:
- 用於編寫元件樣式的 CSS 檔案。
- 用於編寫我們元件的前端或檢視的 HTML 檔案。
- 用於編寫測試案例的 Specs 檔案。
- 元件檔案,我們在其中編寫元件的邏輯部分,其中包含函式、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 中的模組和元件、如何建立新元件、瞭解它們的方法以及它們是由什麼組成的。
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