日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案
創(chuàng)新互聯(lián)Angular教程：Angular快速上手

Angular 入門(mén)

Angular 歡迎你！

成都創(chuàng)新互聯(lián)公司，專(zhuān)注為中小企業(yè)提供官網(wǎng)建設(shè)、營(yíng)銷(xiāo)型網(wǎng)站制作、成都響應(yīng)式網(wǎng)站建設(shè)公司、展示型成都做網(wǎng)站、網(wǎng)站建設(shè)等服務(wù)，幫助中小企業(yè)通過(guò)網(wǎng)站體現(xiàn)價(jià)值、有效益。幫助企業(yè)快速建站、解決網(wǎng)站建設(shè)與網(wǎng)站營(yíng)銷(xiāo)推廣問(wèn)題。

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

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

先決條件

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

  • HTML
  • JavaScript
  • TypeScript

瀏覽范例應(yīng)用

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

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

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

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

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

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

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

  1. 登錄到 StackBlitz。
  2. 對(duì)你生成的項(xiàng)目進(jìn)行分支。
  3. 定時(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 的更多信息，請(qǐng)參見(jiàn) StackBlitz 的文檔。

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

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

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

    使用 ?*ngFor?，會(huì)把這個(gè) ?

    ? 針對(duì)列表中的每個(gè)產(chǎn)品進(jìn)行復(fù)寫(xiě)。

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

  3. 在此 ?
    ? 中，添加 ?

    ? 和 ?{{ product.name }}?。?{{ product.name }}? 語(yǔ)句是 Angular 插值語(yǔ)法的范例。插值 ?{{ }}? 可以讓你把屬性值渲染為文本。

    4. Products
    


    

  
    
      {{ product.name }}

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

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

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

  6. 添加產(chǎn)品說(shuō)明。在 ?

    ? 元素上使用 ?*ngIf? 指令，以便 Angular 只讓當(dāng)前產(chǎn)品有描述 ?

    ?

    7. Products
    


    

  
    
    
      {{ product.name }}
    
  
    

  
    
    Description: {{ product.description }}

    現(xiàn)在，該應(yīng)用將在列表中顯示每個(gè)產(chǎn)品的名稱和描述。請(qǐng)注意，最后一項(xiàng)產(chǎn)品沒(méi)有描述段落。Angular 不會(huì)創(chuàng)建 ?

    ? 元素，因?yàn)榇水a(chǎn)品的 description 屬性為空。

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


    

  
    
    
      {{ product.name }}
    
  
    

  
    
    Description: {{ product.description }}

    每個(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ì)使用來(lái)自 ?ProductListComponent ?的產(chǎn)品數(shù)據(jù)。通知會(huì)檢查產(chǎn)品的價(jià)格，如果價(jià)格大于 700 美元，則會(huì)顯示 Notify Me 按鈕，當(dāng)產(chǎn)品上市銷(xiāo)售時(shí)，用戶可以通過(guò)該按鈕注冊(cè)通知。

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

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

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

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

    • ?product-alerts.component.ts ?
    • ?product-alerts.component.html ?
    • ?product-alerts.component.css?
  3. 打開(kāi) ?product-alerts.component.ts?。?@Component()? 裝飾器會(huì)指出它后面的類(lèi)是組件。?@Component()? 還會(huì)提供有關(guān)組件的元數(shù)據(jù)，包括其選擇器、模板和樣式。
    4. 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-? 開(kāi)頭，后跟組件名稱。
    • 模板和樣式文件名引用了組件的 HTML 和 CSS。
    • 這個(gè) ?@Component()? 定義還導(dǎo)出了類(lèi) ?ProductAlertsComponent?，該類(lèi)會(huì)處理組件的功能。
  4. 要將 ?ProductAlertsComponent ?設(shè)置為接收產(chǎn)品數(shù)據(jù)，請(qǐng)首先從 ?@angular/core? 中導(dǎo)入符號(hào) ?Input?。
    5. import { Component, OnInit, Input } from '@angular/core';
import { Product } from '../products';
  5. 在 ?ProductAlertsComponent ?類(lèi)定義中，使用 ?@Input()? 裝飾器定義一個(gè)名為 ?product ?的屬性。 ?@Input()? 裝飾器指出此屬性值要從本組件的父組件 ?ProductListComponent ?中傳入。
    6. export class ProductAlertsComponent implements OnInit {

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

  ngOnInit() {
  }

}
  6. 打開(kāi) ?product-alerts.component.html? 并將占位符段落替換為 Notify Me 按鈕，如果產(chǎn)品價(jià)格超過(guò) 700 美元，就會(huì)出現(xiàn)此按鈕。
    7.
  7. 生成器會(huì)自動(dòng)把 ?ProductAlertsComponent ?添加到 ?AppModule ?中，以便它能用于本應(yīng)用的其它組件中。
    8. import { ProductAlertsComponent } from './product-alerts/product-alerts.component';

@NgModule({
  declarations: [
    AppComponent,
    TopBarComponent,
    ProductListComponent,
    ProductAlertsComponent,
  ],
  8. 最后，要將 ?ProductAlertsComponent ?顯示為 ?ProductListComponent ?的子級(jí)，請(qǐng)將 ?? 元素添加到 ?product-list.component.html? 中。使用屬性綁定將當(dāng)前產(chǎn)品作為輸入傳給此組件。
    9.

這個(gè)新的產(chǎn)品通知組件將產(chǎn)品作為產(chǎn)品列表中的輸入。使用該輸入，它將根據(jù)產(chǎn)品的價(jià)格顯示或隱藏 Notify Me 按鈕。Phone XL 的價(jià)格超過(guò)了 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ì)使用它們，下列范例代碼中都省略了它們，以求簡(jiǎn)潔。

  1. 在 ?product-alerts.component.ts? 中，從 ?@angular/core? 導(dǎo)入符號(hào) ?Output ?和 ?EventEmitter?。
    2. import { Component, Input, Output, EventEmitter } from '@angular/core';
import { Product } from '../products';
  2. 在組件類(lèi)中，使用 ?@Output()? 裝飾器和 ?EventEmitter()? 的實(shí)例定義一個(gè)名為 ?notify ?的屬性。使用 ?@Output()? 配置 ?ProductAlertsComponent?，這會(huì)讓 ?ProductAlertsComponent ?在 ?notify ?屬性的值發(fā)生變化時(shí)引發(fā)一個(gè)事件。
    3. export class ProductAlertsComponent {
  @Input() product: Product | undefined;
  @Output() notify = new EventEmitter();
}
  3. 在 ?product-alerts.component.html? 中，修改 Notify Me 按鈕，增加事件綁定，并調(diào)用 ?notify.emit()? 方法。
    4.
  4. 定義用戶單擊按鈕時(shí)發(fā)生的行為。當(dāng)子組件引發(fā)事件時(shí)，父組件 ?ProductListComponent?（而不是 ?ProductAlertsComponent?）會(huì)采取行動(dòng)。在 ?product-list.component.ts? 中，定義一個(gè) ?onNotify()? 方法，類(lèi)似于 ?share()? 方法。
    5. 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');
  }
}
  5. 更新 ?ProductListComponent?，以從 ?ProductAlertsComponent ?中接收數(shù)據(jù)。

    6. 在 ?product-list.component.html? 中，將 ?? 綁定到產(chǎn)品列表組件的 ?onNotify()? 方法。?? 會(huì)顯示 Notify Me 按鈕的內(nèi)容。
  6. 單擊 Notify Me 按鈕以觸發(fā)一條通知，內(nèi)容為："You will be notified when the product goes on sale"。


網(wǎng)站題目：創(chuàng)新互聯(lián)Angular教程：Angular快速上手
文章路徑：http://www.dlmjj.cn/article/cdcpoes.html