閱讀(2.6k) 書簽贊(0) 我要糾錯(cuò)

Angular 快速上手

2022-06-27 14:17 更新

Angular 入門

Angular 歡迎你！

本教程將通過構(gòu)建一個(gè)電子商務(wù)網(wǎng)站，向你介紹 Angular 的基本知識(shí)。該網(wǎng)站具有商品名錄、購物車和結(jié)賬表單。

為了幫助你更好地起步，本教程提供了一個(gè)已完成的應(yīng)用，你可以在 Stackblitz 上試驗(yàn)及互動(dòng)，而不用建立本地開發(fā)環(huán)境。 StackBlitz 是一個(gè)基于瀏覽器的開發(fā)環(huán)境，你可以在其中使用各種技術(shù)來創(chuàng)建、保存和共享項(xiàng)目。

先決條件

為了充分利用本教程，你應(yīng)該已經(jīng)對以下內(nèi)容有基本的了解。

HTML
JavaScript
TypeScript

瀏覽范例應(yīng)用

你可以用組件構(gòu)建 Angular 應(yīng)用。組件定義了 UI 中的職責(zé)范圍，讓你可以復(fù)用某些 UI 功能集。

一個(gè)組件由三部分組成：

處理數(shù)據(jù)和功能的組件類。
決定 UI 的 HTML 模板。
定義外觀的組件專屬樣式。

本指南演示了如何使用下列組件構(gòu)建應(yīng)用。

?<app-root>? - 第一個(gè)加載的組件，并且是其他組件的容器。
?<app-top-bar>? - 商店名稱和結(jié)帳按鈕。
?<app-product-list>? - 產(chǎn)品列表。
?<app-product-alerts>? - 包含應(yīng)用中各種通知的組件。

創(chuàng)建范例項(xiàng)目

要?jiǎng)?chuàng)建范例項(xiàng)目，請在 StackBlitz 中生成一個(gè)預(yù)置的范例項(xiàng)目。要保存你的工作，請執(zhí)行以下操作：

登錄到 StackBlitz。
對你生成的項(xiàng)目進(jìn)行分支。
定時(shí)保存。

在 StackBlitz 中，右側(cè)的預(yù)覽窗格會(huì)顯示范例應(yīng)用的啟動(dòng)狀態(tài)。此預(yù)覽有兩個(gè)區(qū)域：

帶有商店名稱（My Store）和 Checkout 按鈕的頂部欄
產(chǎn)品列表及其標(biāo)題

左側(cè)的項(xiàng)目區(qū)顯示了構(gòu)成本應(yīng)用的源文件，包括基礎(chǔ)結(jié)構(gòu)和配置文件。

當(dāng)你生成本教程隨附的 StackBlitz 范例應(yīng)用時(shí)，StackBlitz 會(huì)為你創(chuàng)建啟動(dòng)程序文件和模擬數(shù)據(jù)。本教程中用到的文件位于 ?src ?文件夾中。

有關(guān)如何使用 StackBlitz 的更多信息，請參見 StackBlitz 的文檔。

創(chuàng)建產(chǎn)品列表

在本節(jié)中，你將修改應(yīng)用以顯示產(chǎn)品列表。你會(huì)用到來自 ?products.ts? 文件的預(yù)定義產(chǎn)品數(shù)據(jù)，和一些來自 ?product-list.component.ts? 文件的方法。本節(jié)將指導(dǎo)你完成編輯 HTML（也稱為模板）的過程。

在 ?product-list? 文件夾中，打開模板文件 ?product-list.component.html?。
在 ?<div>? 上添加一個(gè)結(jié)構(gòu)型指令 ?*ngFor?，如下所示。

<h2>Products</h2>

<div *ngFor="let product of products">
</div>

使用 ?*ngFor?，會(huì)把這個(gè) ?<div>? 針對列表中的每個(gè)產(chǎn)品進(jìn)行復(fù)寫。

結(jié)構(gòu)型指令會(huì)通過添加、刪除和操作元素來調(diào)整或重塑 DOM 結(jié)構(gòu)。

在此 ?<div>? 中，添加 ?<h3>? 和 ?{{ product.name }}?。?{{ product.name }}? 語句是 Angular 插值語法的范例。插值 ?{{ }}? 可以讓你把屬性值渲染為文本。

<h2>Products</h2>

<div *ngFor="let product of products">

  <h3>
      {{ product.name }}
  </h3>

</div>

預(yù)覽窗格將會(huì)更新，以顯示列表中每個(gè)商品的名稱。

為了讓每個(gè)商品名稱都能鏈接到商品詳情，請圍繞 ?{{ product.name }}? 添加一個(gè) ?<a>? 元素。
使用 ?[ ]? 語法將標(biāo)題設(shè)置為此產(chǎn)品的名稱，如下所示：

<h2>Products</h2>

<div *ngFor="let product of products">

  <h3>
    <a [title]="product.name + ' details'">
      {{ product.name }}
    </a>
  </h3>

</div>

在預(yù)覽窗格中，將鼠標(biāo)懸停在產(chǎn)品名稱上，可以查看所綁定的 name 屬性值，該值是產(chǎn)品名加上單詞 “details”。通過屬性綁定 ?[ ]? 可以在模板表達(dá)式中使用屬性值。

添加產(chǎn)品說明。在 ?<p>? 元素上使用 ?*ngIf? 指令，以便 Angular 只讓當(dāng)前產(chǎn)品有描述 ?<p>?

<h2>Products</h2>

<div *ngFor="let product of products">

  <h3>
    <a [title]="product.name + ' details'">
      {{ product.name }}
    </a>
  </h3>

  <p *ngIf="product.description">
    Description: {{ product.description }}
  </p>

</div>

現(xiàn)在，該應(yīng)用將在列表中顯示每個(gè)產(chǎn)品的名稱和描述。請注意，最后一項(xiàng)產(chǎn)品沒有描述段落。Angular 不會(huì)創(chuàng)建 ?<p>? 元素，因?yàn)榇水a(chǎn)品的 description 屬性為空。

添加一個(gè)按鈕，以便用戶可以共享產(chǎn)品。將按鈕的 ?click ?事件綁定到 ?product-list.component.ts? 中的 ?share()? 方法。事件綁定要在此事件用一組圓括號(hào) ?( )? 括起來，就比如 ?<button>? 元素上的 ?(click)?。

<h2>Products</h2>

<div *ngFor="let product of products">

  <h3>
    <a [title]="product.name + ' details'">
      {{ product.name }}
    </a>
  </h3>

  <p *ngIf="product.description">
    Description: {{ product.description }}
  </p>

  <button (click)="share()">
    Share
  </button>

</div>

每個(gè)產(chǎn)品現(xiàn)在都有一個(gè) “Share” 按鈕。

單擊 “Share” 按鈕將觸發(fā)一條通知，指出 “The product has been shared!”。

在編輯模板時(shí)，你已經(jīng)了解了 Angular 模板的一些最常用的功能。

將數(shù)據(jù)傳遞給子組件

目前，產(chǎn)品列表中顯示了每個(gè)產(chǎn)品的名稱和描述。?ProductListComponent ?還定義了一個(gè) ?products ?屬性，包含從 ?products.ts? 的 ?products ?數(shù)組導(dǎo)入的各個(gè)產(chǎn)品的數(shù)據(jù)。

下一步是創(chuàng)建一個(gè)新的通知功能，該功能會(huì)使用來自 ?ProductListComponent ?的產(chǎn)品數(shù)據(jù)。通知會(huì)檢查產(chǎn)品的價(jià)格，如果價(jià)格大于 700 美元，則會(huì)顯示 Notify Me 按鈕，當(dāng)產(chǎn)品上市銷售時(shí)，用戶可以通過該按鈕注冊通知。

本節(jié)將引導(dǎo)你創(chuàng)建一個(gè)子組件 ?ProductAlertsComponent?，該子組件可以從其父組件 ?ProductListComponent ?接收數(shù)據(jù)。

點(diǎn)擊當(dāng)前終端上方的加號(hào)，新建一個(gè)終端，運(yùn)行命令生成組件。

在新終端中，通過運(yùn)行以下命令生成一個(gè)名為 ?product-alerts? 的新組件。

ng generate component product-alerts

該生成器會(huì)為組件的三個(gè)部分創(chuàng)建初始文件：

?product-alerts.component.ts?
?product-alerts.component.html?
?product-alerts.component.css?

打開 ?product-alerts.component.ts?。?@Component()? 裝飾器會(huì)指出它后面的類是組件。?@Component()? 還會(huì)提供有關(guān)組件的元數(shù)據(jù)，包括其選擇器、模板和樣式。

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-product-alerts',
  templateUrl: './product-alerts.component.html',
  styleUrls: ['./product-alerts.component.css']
})
export class ProductAlertsComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

?@Component()? 中的主要功能如下：

?selector?（?app-product-alerts?）用于標(biāo)識(shí)組件。按照慣例，Angular 組件選擇器以前綴 ?app-? 開頭，后跟組件名稱。
模板和樣式文件名引用了組件的 HTML 和 CSS。
這個(gè) ?@Component()? 定義還導(dǎo)出了類 ?ProductAlertsComponent?，該類會(huì)處理組件的功能。

要將 ?ProductAlertsComponent ?設(shè)置為接收產(chǎn)品數(shù)據(jù)，請首先從 ?@angular/core? 中導(dǎo)入符號(hào) ?Input?。

import { Component, OnInit, Input } from '@angular/core';
import { Product } from '../products';

在 ?ProductAlertsComponent ?類定義中，使用 ?@Input()? 裝飾器定義一個(gè)名為 ?product ?的屬性。 ?@Input()? 裝飾器指出此屬性值要從本組件的父組件 ?ProductListComponent ?中傳入。

export class ProductAlertsComponent implements OnInit {

  @Input() product!: Product;
  constructor() { }

  ngOnInit() {
  }

}

打開 ?product-alerts.component.html? 并將占位符段落替換為 Notify Me 按鈕，如果產(chǎn)品價(jià)格超過 700 美元，就會(huì)出現(xiàn)此按鈕。

<p *ngIf="product && product.price > 700">
  <button>Notify Me</button>
</p>

生成器會(huì)自動(dòng)把 ?ProductAlertsComponent ?添加到 ?AppModule ?中，以便它能用于本應(yīng)用的其它組件中。

import { ProductAlertsComponent } from './product-alerts/product-alerts.component';

@NgModule({
  declarations: [
    AppComponent,
    TopBarComponent,
    ProductListComponent,
    ProductAlertsComponent,
  ],

最后，要將 ?ProductAlertsComponent ?顯示為 ?ProductListComponent ?的子級(jí)，請將 ?<app-product-alerts>? 元素添加到 ?product-list.component.html? 中。使用屬性綁定將當(dāng)前產(chǎn)品作為輸入傳給此組件。

<button (click)="share()">
  Share
</button>

<app-product-alerts
  [product]="product">
</app-product-alerts>

這個(gè)新的產(chǎn)品通知組件將產(chǎn)品作為產(chǎn)品列表中的輸入。使用該輸入，它將根據(jù)產(chǎn)品的價(jià)格顯示或隱藏 Notify Me 按鈕。Phone XL 的價(jià)格超過了 700 美元，因此該產(chǎn)品上會(huì)顯示 Notify Me 按鈕。

將數(shù)據(jù)傳遞到父組件

為了使 Notify Me 按鈕起作用，子組件需要通知并將數(shù)據(jù)傳遞給父組件。當(dāng)用戶單擊 Notify Me 時(shí) ?ProductAlertsComponent ?需要引發(fā)一個(gè)事件，并且 ?ProductListComponent ?需要響應(yīng)此事件。

在新建組件時(shí)，Angular 生成器會(huì)包含一個(gè)空的 ?constructor()?、?OnInit ?接口和 ?ngOnInit()? 方法。由于這些步驟不會(huì)使用它們，下列范例代碼中都省略了它們，以求簡潔。

在 ?product-alerts.component.ts? 中，從 ?@angular/core? 導(dǎo)入符號(hào) ?Output ?和 ?EventEmitter?。

import { Component, Input, Output, EventEmitter } from '@angular/core';
import { Product } from '../products';

在組件類中，使用 ?@Output()? 裝飾器和 ?EventEmitter()? 的實(shí)例定義一個(gè)名為 ?notify ?的屬性。使用 ?@Output()? 配置 ?ProductAlertsComponent?，這會(huì)讓 ?ProductAlertsComponent ?在 ?notify ?屬性的值發(fā)生變化時(shí)引發(fā)一個(gè)事件。

export class ProductAlertsComponent {
  @Input() product: Product | undefined;
  @Output() notify = new EventEmitter();
}

在 ?product-alerts.component.html? 中，修改 Notify Me 按鈕，增加事件綁定，并調(diào)用 ?notify.emit()? 方法。

<p *ngIf="product && product.price > 700">
  <button (click)="notify.emit()">Notify Me</button>
</p>

定義用戶單擊按鈕時(shí)發(fā)生的行為。當(dāng)子組件引發(fā)事件時(shí)，父組件 ?ProductListComponent?（而不是 ?ProductAlertsComponent?）會(huì)采取行動(dòng)。在 ?product-list.component.ts? 中，定義一個(gè) ?onNotify()? 方法，類似于 ?share()? 方法。

export class ProductListComponent {

  products = products;

  share() {
    window.alert('The product has been shared!');
  }

  onNotify() {
    window.alert('You will be notified when the product goes on sale');
  }
}

更新 ?ProductListComponent?，以從 ?ProductAlertsComponent ?中接收數(shù)據(jù)。

在 ?product-list.component.html? 中，將 ?<app-product-alerts>? 綁定到產(chǎn)品列表組件的 ?onNotify()? 方法。?<app-product-alerts>? 會(huì)顯示 Notify Me 按鈕的內(nèi)容。

<button (click)="share()">
  Share
</button>

<app-product-alerts
  [product]="product" 
  (notify)="onNotify()">
</app-product-alerts>

單擊 Notify Me 按鈕以觸發(fā)一條通知，內(nèi)容為："You will be notified when the product goes on sale"。

以上內(nèi)容是否對您有幫助：

← Angular 是什么?

Angular 添加導(dǎo)航 →

寫筆記

我要補(bǔ)充