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

Angular 快速上手

2022-06-27 14:17 更新

Angular 入門

Angular 歡迎你！

本教程將通過構建一個電子商務網站，向你介紹 Angular 的基本知識。該網站具有商品名錄、購物車和結賬表單。

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

先決條件

為了充分利用本教程，你應該已經對以下內容有基本的了解。

HTML
JavaScript
TypeScript

瀏覽范例應用

你可以用組件構建 Angular 應用。組件定義了 UI 中的職責范圍，讓你可以復用某些 UI 功能集。

一個組件由三部分組成：

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

本指南演示了如何使用下列組件構建應用。

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

創(chuàng)建范例項目

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

登錄到 StackBlitz。
對你生成的項目進行分支。
定時保存。

在 StackBlitz 中，右側的預覽窗格會顯示范例應用的啟動狀態(tài)。此預覽有兩個區(qū)域：

帶有商店名稱（My Store）和 Checkout 按鈕的頂部欄
產品列表及其標題

左側的項目區(qū)顯示了構成本應用的源文件，包括基礎結構和配置文件。

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

有關如何使用 StackBlitz 的更多信息，請參見 StackBlitz 的文檔。

創(chuàng)建產品列表

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

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

<h2>Products</h2>

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

使用 ?*ngFor?，會把這個 ?<div>? 針對列表中的每個產品進行復寫。

結構型指令會通過添加、刪除和操作元素來調整或重塑 DOM 結構。

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

<h2>Products</h2>

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

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

</div>

預覽窗格將會更新，以顯示列表中每個商品的名稱。

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

<h2>Products</h2>

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

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

</div>

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

添加產品說明。在 ?<p>? 元素上使用 ?*ngIf? 指令，以便 Angular 只讓當前產品有描述 ?<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>

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

添加一個按鈕，以便用戶可以共享產品。將按鈕的 ?click ?事件綁定到 ?product-list.component.ts? 中的 ?share()? 方法。事件綁定要在此事件用一組圓括號 ?( )? 括起來，就比如 ?<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>

每個產品現在都有一個 “Share” 按鈕。

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

在編輯模板時，你已經了解了 Angular 模板的一些最常用的功能。

將數據傳遞給子組件

目前，產品列表中顯示了每個產品的名稱和描述。?ProductListComponent ?還定義了一個 ?products ?屬性，包含從 ?products.ts? 的 ?products ?數組導入的各個產品的數據。

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

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

點擊當前終端上方的加號，新建一個終端，運行命令生成組件。

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

ng generate component product-alerts

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

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

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

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?）用于標識組件。按照慣例，Angular 組件選擇器以前綴 ?app-? 開頭，后跟組件名稱。
模板和樣式文件名引用了組件的 HTML 和 CSS。
這個 ?@Component()? 定義還導出了類 ?ProductAlertsComponent?，該類會處理組件的功能。

要將 ?ProductAlertsComponent ?設置為接收產品數據，請首先從 ?@angular/core? 中導入符號 ?Input?。

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

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

export class ProductAlertsComponent implements OnInit {

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

  ngOnInit() {
  }

}

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

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

生成器會自動把 ?ProductAlertsComponent ?添加到 ?AppModule ?中，以便它能用于本應用的其它組件中。

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

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

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

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

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

這個新的產品通知組件將產品作為產品列表中的輸入。使用該輸入，它將根據產品的價格顯示或隱藏 Notify Me 按鈕。Phone XL 的價格超過了 700 美元，因此該產品上會顯示 Notify Me 按鈕。

將數據傳遞到父組件

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

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

在 ?product-alerts.component.ts? 中，從 ?@angular/core? 導入符號 ?Output ?和 ?EventEmitter?。

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

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

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

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

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

定義用戶單擊按鈕時發(fā)生的行為。當子組件引發(fā)事件時，父組件 ?ProductListComponent?（而不是 ?ProductAlertsComponent?）會采取行動。在 ?product-list.component.ts? 中，定義一個 ?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 ?中接收數據。

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

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

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

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

以上內容是否對您有幫助：

← Angular 是什么?

Angular 添加導航 →

寫筆記

我要補充