填寫這份《一分鐘調查》,幫我們(開發組)做得更好!去填寫Home

Angular 入門:你的第一個應用

Getting started with a basic Angular app

Angular 歡迎你!

Welcome to Angular!

本課程將透過一個簡單的電子商務網站,向你介紹 Angular 的基本知識。該網站具有商品名錄、購物車和結賬表單。 為了幫助你更好地起步,本指南提供了一個已完成的簡單應用,你可以在其中試驗及互動,而不用建立本地開發環境

This tutorial introduces you to the essentials of Angular by walking you through a simple e-commerce site with a catalog, shopping cart, and check-out form. To help you get started right away, this guide uses a simple ready-made application that you can examine and modify interactively (without having to set up a local work environment).

你是 Web 開發的新手嗎?
New to web development?

你可以找到很多資源作為 Angular 文件的補充。Mozilla 的 MDN 文件同時包含了 HTMLJavaScript 的 介紹。TypeScript 的文件中包含一個 5 分鐘課程。各種線上課程平臺,比如 UdemyCodecademy,也涵蓋了 Web 開發的一些基礎知識。

There are many resources to complement the Angular docs. Mozilla's MDN docs include both HTML and JavaScript introductions. TypeScript's docs include a 5-minute tutorial. Various online course platforms, such as Udemy and Codecademy, also cover web development basics.

建立範例專案

Create the sample project

點此在 StackBlitz 上建立一個新專案。點此在 StackBlitz 上建立一個新專案。

  • 右側的預覽窗格顯示了範例 Angular 應用程式的初始狀態。它定義了一個帶有頂欄的框架(包含商店名稱和結賬圖示)以及一個產品列表的標題(它將用來自應用中的資料填充並動態更新產品列表)

    The preview pane on the right shows the starting state of the sample Angular app. It defines a frame with a top bar (containing the store name and checkout icon) and the title for a product list (which will be populated and dynamically updated with data from the application).

  • 左側的專案窗格顯示了組成應用程式的原始檔,包括所有基礎設施和配置檔案。當前選中的檔案顯示在中間的編輯器窗格中。

    The project pane on the left shows the source files that make up the application, including all of the infrastructure and configuration files. The currently selected file shows up in the editor pane in the middle.

在深入原始碼結構之前,下一節將介紹如何使用提供的範例資料為產品列表編寫 HTML 範本。 這將讓你知道動態修改和更新頁面有多容易。

Before going into the source structure, the next section shows how to fill out the HTML template for the product list, using the provided sample data. This should give you an idea how easy it is to modify and update the page dynamically.

StackBlitz 提示
  • 登入 StackBlitz,就可以隨時儲存和恢復你的工作。如果你已經有了 GitHub 賬號,也可以用該賬號登入 StackBlitz。為了儲存你的程序,首先使用左上方的 Fork 按鈕來為本專案開個分支,然後你就能透過點選 “Save” 按鈕來把你的工作儲存到你自己的 StackBlitz 賬號中了。

    Log into StackBlitz so you can save and resume your work. If you have a GitHub account, you can log into StackBlitz with that account. In order to save your progress, first fork the project using the Fork button at the top left, then you'll be able to save your work to your own StackBlitz account by clicking the Save button.

  • 要複製本課程中的程式碼範例,請單擊程式碼範例框右上角的圖示,然後將剪貼簿中的程式碼片段貼上到 StackBlitz 中。

    To copy a code example from this tutorial, click the icon at the top right of the code example box, and then paste the code snippet from the clipboard into StackBlitz.

  • 如果 StackBlitz 預覽窗格沒有如你預期般顯示出來,請儲存並點選重新整理按鈕。

    If the StackBlitz preview pane isn't showing what you expect, save and then click the refresh button.

  • StackBlitz 正在不斷改進,因此產生的程式碼可能會略有不同,但應用的行為是一樣的。

    StackBlitz is continually improving, so there may be slight differences in generated code, but the app's behavior will be the same.

  • 當產生本課程附帶的 StackBlitz 範例應用時,StackBlitz 會為你建立啟動程式檔案和模擬資料。整個課程中你要用到的檔案位於 StackBlitz 範例應用的 src 資料夾中。

    When you generate the StackBlitz example apps that accompany the tutorials, StackBlitz creates the starter files and mock data for you. The files you'll use throughout the tutorials are in the src folder of the StackBlitz example apps.

如果直接進入 StackBlitz 線上開發環境 並選擇 start a new Angular workspace,你將獲得一個通用的應用骨架,而不是此解說性範例。等介紹完這裡的基本概念後,它對於你在學習 Angular 時互動式的進行工作很有幫助。

If you go directly to the StackBlitz online development environment and choose to start a new Angular workspace, you get a generic stub application, rather than this illustrative sample. Once you have been introduced to the basic concepts here, this can be helpful for working interactively while you are learning Angular.

在實際開發中,通常會使用 Angular CLI,這是一個功能強大的命令列工具,可以讓你產生和修改應用程式。如果需要一個完整的分步指南,來學習如何使用 CLI 建立新專案及其各種部件,請參閱英雄之旅課程

In actual development you will typically use the Angular CLI, a powerful command-line tool that lets you generate and modify applications. For a full step-by-step guide that shows how to use the CLI to create a new project and all of its parts, see Tutorial: Tour of Heroes.

範本語法

Template syntax

Angular 的範本語法擴充套件了 HTML 和 JavaScript。在本節中,你將透過增強 “商品” 區域來了解範本語法。

Angular's template syntax extends HTML and JavaScript. This section introduces template syntax by enhancing the "Products" area.

為了讓你專注於範本語法,下列步驟使用了來自 products.ts 檔案(由 StackBlitz 範例建立的)的預定義產品資料和來自 product-list.component.ts 檔案的方法。

To help you get going, the following steps use predefined product data from the products.ts file (already created in StackBlitz example) and methods from the product-list.component.ts file.

  1. product-list 資料夾中,開啟範本檔案 product-list.component.html

    In the product-list folder, open the template file product-list.component.html.

  2. 修改商品列表範本,看是否列出了商品名稱。

    Modify the product list template to display a list of product names.

    1. 列表中的每個商品都以同樣的方式在頁面上挨個顯示出來。要遍歷這些預定義的商品列表,請使用 *ngFor 指令,把 *ngFor 指令加到 <div> 上,如下圖所示:

      Each product in the list displays the same way, one after another on the page. To iterate over the predefined list of products, put the *ngFor directive on a <div>, as follows:

      <h2>Products</h2> <div *ngFor="let product of products"> </div>
      src/app/product-list/product-list.component.html
            
            <h2>Products</h2>
      
      <div *ngFor="let product of products">
      </div>
          

      有了 *ngFor,這個 <div> 就會被列表中的每個商品都重複渲染一次。

      With *ngFor, the <div> repeats for each product in the list.

      *ngFor 是一個 "結構型指令"。結構型指令會透過新增、刪除和操縱它們的宿主元素等方式塑造或重塑 DOM 的結構。帶有星號 * 的指令都是結構型指令。

      *ngFor is a "structural directive". Structural directives shape or reshape the DOM's structure, typically by adding, removing, and manipulating the elements to which they are attached. Directives with an asterisk, *, are structural directives.

    2. 要顯示商品的名稱,請使用插值語法 {{}}。插值會把屬性的值作為文字渲染出來。在 <div> 裡面,新增一個 <h3> 標題來顯示商品 name 屬性的插值:

      To display the names of the products, use the interpolation syntax {{ }}. Interpolation renders a property's value as text. Inside the <div>, add an <h3> to display the interpolation of the product's name property:

      <h2>Products</h2> <div *ngFor="let product of products"> <h3> {{ product.name }} </h3> </div>
      src/app/product-list/product-list.component.html
            
            <h2>Products</h2>
      
      <div *ngFor="let product of products">
      
        <h3>
            {{ product.name }}
        </h3>
      
      </div>
          

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

      The preview pane immediately updates to display the name of each product in the list.

  3. 為了讓每個商品名稱都能連結到商品詳情,新增一個 <a> 元素,並使用屬性繫結語法 [] 把該連結的 title 設定成該商品的名字,如下所示:

    To make each product name a link to product details, add the <a> element and set its title to be the product's name by using the property binding [ ] syntax, as follows:

    <h2>Products</h2> <div *ngFor="let product of products"> <h3> <a [title]="product.name + ' details'"> {{ product.name }} </a> </h3> </div>
    src/app/product-list/product-list.component.html
          
          <h2>Products</h2>
    
    <div *ngFor="let product of products">
    
      <h3>
        <a [title]="product.name + ' details'">
          {{ product.name }}
        </a>
      </h3>
    
    </div>
        

    在預覽窗格中,將滑鼠懸停在顯示的商品名稱上,可以看到繫結的 name 屬性值。它們都是商品名加上單詞 "details" 的格式。插值 {{}} 允許你把屬性值渲染為文字;而屬性繫結語法 [] 則允許你在範本表示式中使用屬性值。

    In the preview pane, hold the pointer over a product name to see the bound name property value, which is the product name plus the word "details". Interpolation {{ }} lets you render the property value as text; property binding [ ] lets you use the property value in a template expression.

  4. 新增商品說明。在 <p> 標籤上,使用 *ngIf 指令,這樣 Angular 只會在當前商品有描述資訊的情況下建立這個 <p> 元素。

    Add the product descriptions. On the <p> element, use an *ngIf directive so that Angular only creates the <p> element if the current product has a description.

    <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>
    src/app/product-list/product-list.component.html
          
          <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>
        

    該應用會立即在列表中顯示每種商品的名稱和描述。請注意,最後一個商品根本沒有描述資訊。由於該商品的 description 屬性為空,因此 Angular 不會建立 <p> 元素(包括靜態文字 “Description”)。

    The app now displays the name and description of each product in the list. Notice that the final product does not have a description paragraph. Because the product's description property is empty, Angular doesn't create the <p> element—including the word "Description".

  5. 新增一個按鈕,以便讓使用者可與朋友分享商品。把 button 的 click 事件繫結到我們替你定義好的 share() 方法上(位於 product-list.component.ts )。事件繫結是透過把事件名稱包裹在圓括號 ( ) 中完成的,如下面的 <button> 元素所示:

    Add a button so users can share a product with friends. Bind the button's click event to the share() method (in product-list.component.ts). Event binding uses a set of parentheses, ( ), around the event, as in the following <button> element:

    <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>
    src/app/product-list/product-list.component.html
          
          <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” 按鈕了:

    Each product now has a "Share" button:

    測試 “Share” 按鈕:

    Test the "Share" button:

該應用現在具有商品列表和共享功能。在這個過程中,你已經學會了 Angular 範本語法的五個常用特性:

The app now has a product list and sharing feature. In the process, you've learned to use five common features of Angular's template syntax:

  • *ngFor

  • *ngIf

  • 插值 {{}}

    Interpolation {{ }}

  • 屬性繫結 []

    Property binding [ ]

  • 事件繫結 ()

    Event binding ( )

對 Angular 範本語法全的完整介紹,請參閱元件與範本簡介

For a fuller introduction to Angular's template syntax, see Introduction to components and templates.

元件

Components

元件在使用者介面(也就是 UI)中定義了一些責任區,讓你能複用這些 UI 功能集。你已經透過商品列表元件建構了一個。

Components define areas of responsibility in the user interface, or UI, that let you reuse sets of UI functionality. You've already built one with the product list component.

元件包含三部分:

A component consists of three things:

  • 一個元件類別,它用來處理資料和功能。上一節,我們在元件類別中定義了商品資料和 share() 方法,它們分別用來處理資料和功能。

    A component class that handles data and functionality. In the previous section, the product data and the share() method in the component class handle data and functionality, respectively.

  • 一個 HTML 範本,它決定了 UI。在上一節中,商品列表的 HTML 範本用來顯示每個商品的名稱、描述和 “Share” 按鈕。

    An HTML template that determines the UI. In the previous section, the product list's HTML template displays the name, description, and a "Share" button for each product.

  • 元件專屬的樣式定義了外觀和感覺。商品列表中還沒有定義任何樣式,那屬於元件 CSS 負責。

    Component-specific styles that define the look and feel. Though product list does not define any styles, this is where component CSS resides.

Angular 應用程式由一棵元件樹組成,每個 Angular 元件都有一個明確的用途和責任。

An Angular application comprises a tree of components, in which each Angular component has a specific purpose and responsibility.

目前,該範例有三個元件:

Currently, the example app has three components:

  • app-root(橙色框)是應用的外殼。這是要載入的第一個元件,也是所有其它元件的父元件。你可以把它想象成一個基礎頁面。

    app-root (orange box) is the application shell. This is the first component to load and the parent of all other components. You can think of it as the base page.

  • app-top-bar(藍色背景)是商店名稱和結帳按鈕。

    app-top-bar (blue background) is the store name and checkout button.

  • app-product-list(紫色框)是你在上一節中修改過的商品列表。

    app-product-list (purple box) is the product list that you modified in the previous section.

下一節會擴充套件應用的功能,添加了一個新元件(產品提醒),並把它新增為商品列表元件的子元件。

The next section expands the app's capabilities by adding a new component—a product alert—as a child of the product list component.

要了解關於元件及其與範本互動的更多資訊,請參閱“元件簡介”

For more information about components and how they interact with templates, see Introduction to Components.

輸入

Input

目前,商品列表會顯示每個商品的名稱和描述。 該商品列表元件還定義了一個 products 屬性,它包含每個商品的匯入資料(來自 products.ts 中的 products 陣列。)

Currently, the product list displays the name and description of each product. The product list component also defines a products property that contains imported data for each product from the products array in products.ts.

接下來建立一個新的提醒功能。它會接收一個商品作為輸入。它會檢查商品的價格,如果價格高於 700 美元,它會顯示一個“Notify Me”(通知我)按鈕,讓使用者註冊一個當商品上市時傳送的通知。

The next step is to create a new alert feature that takes a product as an input. The alert checks the product's price, and, if the price is greater than $700, displays a "Notify Me" button that lets users sign up for notifications when the product goes on sale.

  1. 建立一個新商品提醒元件。

    Create a new product alerts component.

    1. 右鍵單擊 app 資料夾,使用 Angular Generator 產生一個名為 product-alerts 的新元件。

      Right click on the app folder and use the Angular Generator to generate a new component named product-alerts.

      該 generator 為元件的三個部分建立了啟動檔案:

      The generator creates starter files for all three parts of the component:

      • product-alerts.component.ts

      • product-alerts.component.html

      • product-alerts.component.css

  2. 開啟 product-alerts.component.ts

    Open product-alerts.component.ts.

    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() { } }
    src/app/product-alerts/product-alerts.component.ts
          
          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() {
      }
    
    }
        

    1. 注意 @Component() 裝飾器。這表明它下面的類別是一個元件。它提供了有關該元件的元資料,包括它的選擇器、範本和樣式。

      Notice the @Component() decorator. This indicates that the following class is a component. It provides metadata about the component, including its selector, templates, and styles.

      • selector 用於標識該元件。該選擇器是當 Angular 元件在頁面中渲染出 HTML 元素時使用的名字。按照慣例,Angular 元件選擇器會以字首 app- 開頭,後跟元件名稱。

        The selector identifies the component. The selector is the name you give the Angular component when it is rendered as an HTML element on the page. By convention, Angular component selectors begin with the prefix app-, followed by the component name.

      • 範本和樣式檔名。它們是對 StackBlitz 產生的 HTML 和 CSS 檔案的參考。

        The template and style filenames reference the HTML and CSS files that StackBlitz generates.

    2. 元件定義中還匯出了類別 ProductAlertsComponent,用於處理該元件的功能。

      The component definition also exports the class, ProductAlertsComponent, which handles functionality for the component.

  3. 設定新商品提醒元件,讓它接收一個商品作為輸入:

    Set up the new product alerts component to receive a product as input:

    1. @angular/core 匯入 Input

      Import Input from @angular/core.

      import { Component, OnInit } from '@angular/core'; import { Input } from '@angular/core';
      src/app/product-alerts/product-alerts.component.ts
            
            import { Component, OnInit } from '@angular/core';
      import { Input } from '@angular/core';
          

    2. ProductAlertsComponent 類別的定義中,定義一個帶 @Input() 裝飾器的 product 屬性。@Input() 裝飾器指出其屬性值是從該元件的父元件商品列表元件中傳入的。

      In the ProductAlertsComponent class definition, define a property named product with an @Input() decorator. The @Input() decorator indicates that the property value passes in from the component's parent, the product list component.

      export class ProductAlertsComponent implements OnInit { @Input() product; constructor() { } ngOnInit() { } }
      src/app/product-alerts/product-alerts.component.ts
            
            export class ProductAlertsComponent implements OnInit {
        @Input() product;
        constructor() { }
      
        ngOnInit() {
        }
      
      }
          

  4. 定義這個新商品提醒元件的檢視。

    Define the view for the new product alert component.

    1. 開啟 product-alerts.component.html 範本,把作為佔位符的 p 替換為如果商品價格超過 700 美元就要顯示出來的“通知我”按鈕。

      Open the product-alerts.component.html template and replace the placeholder paragraph with a "Notify Me" button that appears if the product price is over $700.

      <p *ngIf="product.price > 700"> <button>Notify Me</button> </p>
      src/app/product-alerts/product-alerts.component.html
            
            <p *ngIf="product.price > 700">
        <button>Notify Me</button>
      </p>
          
  5. 把這個新商品提醒元件顯示為該商品列表的一部分(子元件)。

    Display the new product alert component as a child of the product list.

    1. 開啟 product-list.component.html

      Open product-list.component.html.

    2. 要包含這個新元件,只要像使用 HTML 元素一樣使用它的選擇器( app-product-alert )就可以了。

      To include the new component, use its selector, app-product-alerts, as you would an HTML element.

    3. 透過屬性繫結把當前商品作為輸入傳給元件。

      Pass the current product as input to the component using property binding.

      <button (click)="share()"> Share </button> <app-product-alerts [product]="product"> </app-product-alerts>
      src/app/product-list/product-list.component.html
            
            <button (click)="share()">
        Share
      </button>
      
      <app-product-alerts
        [product]="product">
      </app-product-alerts>
          

新商品提醒元件會從商品列表中獲取商品作為輸入資訊。透過該輸入,它會根據商品的價格顯示或隱藏 “Notify Me” 按鈕。由於 Phone XL 的售價超過了 700 美元,所以該商品上會出現“Notify Me”按鈕。

The new product alert component takes a product as input from the product list. With that input, it shows or hides the "Notify Me" button, based on the price of the product. The Phone XL price is over $700, so the "Notify Me" button appears on that product.

要了解如何將資料從父元件傳遞到子元件、攔截並處理來自父元件的值,以及檢測並對輸入屬性值進行更改的更多資訊,請參閱 元件互動一章。

See Component Interaction for more information about passing data from a parent to child component, intercepting and acting upon a value from the parent, and detecting and acting on changes to input property values.

輸出

Output

要想讓 “Notify Me” 按鈕正常工作,你需要配置兩處:

To make the "Notify Me" button work, you need to configure two things:

  • 當用戶點選 “Notify Me” 時,產品提醒元件發出一個事件

    the product alert component to emit an event when the user clicks "Notify Me"

  • 商品列表元件對這個事件進行響應

    the product list component to act on that event

  1. 開啟 product-alerts.component.ts

    Open product-alerts.component.ts.

  2. @angular/core 中匯入 OutputEventEmitter

    Import Output and EventEmitter from @angular/core:

    import { Component } from '@angular/core'; import { Input } from '@angular/core'; import { Output, EventEmitter } from '@angular/core';
    src/app/product-alerts/product-alerts.component.ts
          
          import { Component } from '@angular/core';
    import { Input } from '@angular/core';
    import { Output, EventEmitter } from '@angular/core';
        

  3. 在元件類別中,用 @Output() 裝飾器和一個事件發射器 EventEmitter() 實例定義一個名為 notify 的屬性。這可以讓商品提醒元件在 notify 屬性發生變化時發出事件。

    In the component class, define a property named notify with an @Output() decorator and an instance of EventEmitter(). This allows the product alert component to emit an event when the value of the notify property changes.

當 Angular CLI 產生一個新元件時,它包含一個空的建構函式,OnInit 介面和 ngOnInit() 方法。 以下範例未使用它們,為了簡潔起見,此處將其省略。

When the Angular CLI generates a new component, it includes an empty constructor, the OnInit interface, and the ngOnInit() method. Since the following example isn't using them, they are omitted here for brevity.

export class ProductAlertsComponent { @Input() product; @Output() notify = new EventEmitter(); }
src/app/product-alerts/product-alerts.component.ts
      
      export class ProductAlertsComponent {
  @Input() product;
  @Output() notify = new EventEmitter();
}
    

  1. 在商品提醒範本(product-alerts.component.html)中,用事件繫結更新“Notify Me”按鈕,以呼叫 notify.emit() 方法。

    In the product alert template, product-alerts.component.html, update the "Notify Me" button with an event binding to call the notify.emit() method.

    <p *ngIf="product.price > 700"> <button (click)="notify.emit()">Notify Me</button> </p>
    src/app/product-alerts/product-alerts.component.html
          
          <p *ngIf="product.price > 700">
      <button (click)="notify.emit()">Notify Me</button>
    </p>
        

  2. 接下來,定義當用戶單擊該按鈕時應該發生的行為。回想一下,應該由父元件(商品列表元件)採取行動,而不是商品提醒元件。在 product-list.component.ts 檔案中,定義一個 onNotify() 方法,類似於 share() 方法:

    Next, define the behavior that should happen when the user clicks the button. Recall that it's the parent, product list component—not the product alerts component—that acts when the child raises the event. In product-list.component.ts, define an onNotify() method, similar to the share() method:

    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'); } }
    src/app/product-list/product-list.component.ts
          
          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');
      }
    }
        

  3. 最後,修改商品列表元件以接收商品提醒元件的輸出。

    Finally, update the product list component to receive output from the product alerts component.

    product-list.component.html 中,把 app-product-alerts 元件(就是它顯示的“Notify Me”按鈕)的 notify 事件繫結到商品列表元件的 onNotify() 方法。

    In product-list.component.html, bind the app-product-alerts component (which is what displays the "Notify Me" button) to the onNotify() method of the product list component.

    <button (click)="share()"> Share </button> <app-product-alerts [product]="product" (notify)="onNotify()"> </app-product-alerts>
    src/app/product-list/product-list.component.html
          
          <button (click)="share()">
      Share
    </button>
    
    <app-product-alerts
      [product]="product" 
      (notify)="onNotify()">
    </app-product-alerts>
        

  4. 試試“Notify Me”按鈕:

    Try the "Notify Me" button:

要了解關於從子元件監聽事件、讀取子屬性或呼叫子方法以及如何用服務在元件之間進行雙向通訊的詳細資訊,請參閱“元件互動”一章。

See Component Interaction for more information about listening for events from child components, reading child properties or invoking child methods, and using a service for bi-directional communication between components.

下一步

Next steps

恭喜!你已經完成了第一個 Angular 應用!

Congratulations! You've completed your first Angular app!

你有了一個基本的線上商店目錄,它帶有商品列表,“Share”按鈕和“Notify Me”按鈕。你已經瞭解了 Angular 的基礎知識:元件和範本語法。你還學習了元件類別和範本如何互動,以及元件如何相互通訊。

You have a basic online store catalog with a product list, "Share" button, and "Notify Me" button. You've learned about the foundation of Angular: components and template syntax. You've also learned how the component class and template interact, and how components communicate with each other.

要繼續探索 Angular,請選擇以下選項之一:

To continue exploring Angular, choose either of the following options: