本頁面由 Cloud Translation API 翻譯而成。

開始使用獨立元件

1. 簡介

建構目標

在本程式碼研究室中，您將使用 Angular v14 建構野生動物相片庫應用程式。完成的申請會顯示一組相片，並提供與攝影師聯絡的傳送訊息表單，而且會提供即時通訊視窗，協助瞭解相片中的動物新訊。

您可以使用 Angular v14 和新的獨立元件功能，建構應用程式中的各項內容。

Angular 架構和 Angular CLI 的所有參照都是 Angular v14。獨立元件是 Angular v14 的預覽功能，因此您必須使用 Angular v14 建立全新的應用程式。獨立元件可讓您簡化 Angular 應用程式建構方式。獨立元件、獨立指令和獨立的管道，旨在減少對於 NgModules 的需求，簡化編寫體驗。獨立元件可充分運用 Angular 程式庫的現有生態系統。

這是您目前建構的應用程式。

完成的報名資料

學習目標

如何使用 Angular CLI 輔助新專案
如何使用 Angular 獨立元件，簡化 Angular 應用程式的開發作業
如何建立獨立元件也就是建構 UI 及新增商業邏輯
如何使用獨立元件啟動應用程式
如何延遲載入獨立元件
如何使用 Dialogflow Messenger 在獨立元件中嵌入即時通訊對話
如何使用 Google Cloud CLI (gcloud) 將 Angular 應用程式部署至 Google Cloud App Engine

軟硬體需求

Gmail 或 Google Workspace 帳戶
對下列主題有基本瞭解
- HTML。如何建立元素。
- 不超過 CSS。如何使用 CSS 選取器並建立樣式定義檔案。
- TypeScript 或 JavaScript。如何與 DOM 結構互動。
- 以及 GitHub。如何分支及複製存放區。
- 指令列介面，例如 bash 或 zsh。如何瀏覽目錄並執行指令。

2. 環境設定

設定本機環境

如要完成本程式碼研究室，您必須在本機電腦上安裝下列軟體。

Node.js 的有效 LTS 或維護 LTS 版本。用於安裝 Angular 架構和 Angular CLI。

節點版本

Angular 支援

14.15 以上版本

有權限

16.10 以上版本

有權限

18.1.0

不支援

如要驗證本機電腦上的 Node.js 版本，請在指令列視窗中執行下列 node 指令。
```
node -v
```
程式碼編輯器或 IDE。可用來開啟和編輯檔案。Visual Studio Code，或您選擇的其他程式碼編輯器。

安裝 Angular CLI

設定所有依附元件後，執行下列 npm 指令，從指令列視窗安裝 Angular CLI。

npm install --global @angular/cli

如要確認設定是否正確，請從指令列執行下列 Angular 指令。

ng version

如果 Angular 指令順利完成，您應該會收到類似下列螢幕畫面擷取的訊息。

角度版本的終端機輸出內容

原始碼和映像檔

您將從頭開始建立整個應用程式，而本程式碼研究室的逐步操作說明將可協助您。請注意，GitHub 存放區包含最終程式碼。如果遇到困難，請查看最終程式碼和圖片庫頁面顯示的圖片。

下載原始碼。

在瀏覽器中前往以下頁面。

https://github.com/angular/codelabs/tree/standalone-components

在指令列視窗中建立分支並複製存放區。

在下一個步驟中，建立你的相片庫應用程式。

3. 建立新的應用程式

如要建立初始範例應用程式，請完成下列步驟。

使用 Angular CLI 建立新的工作區。如要進一步瞭解 Angular CLI 和 Angular 架構，請前往 angular.io。

建立新專案

在指令列視窗中完成下列步驟。

輸入下列 Angular 指令，建立名為 photo-gallery-app 的新 Angular 專案。
```
ng new photo-gallery-app
```
在每個提示中接受預設選項。Angular 架構會安裝必要的套件和依附元件。這項程序可能需要幾分鐘才能完成。

Angular CLI 完成後，您會擁有一個新的 Angular 工作區，以及一個立即可用的簡單應用程式。

新應用程式的結構與標準的 Angular 應用程式類似。新應用程式中的 NgModule 不適用於本程式碼研究室。

移除應用程式模組

如要移除應用程式模組，請完成下列步驟。

前往新 photo-gallery-app 專案目錄中的 src/app 目錄。
刪除 app.module.ts 檔案。

刪除應用程式模組後，應用程式就不會有模組。應用程式只有一個元件，也就是應用程式元件，因此您必須將此元件宣告為獨立元件。

宣告獨立元件

在程式碼編輯器中完成以下動作。

前往新 photo-gallery-app 專案目錄中的 src/app 目錄。
開啟 app.component.ts 檔案。

將以下參數和值加入修飾符清單。

standalone: true

app.component.ts 檔案應與下列程式碼範例密切相符。

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  standalone: true
})
export class AppComponent {
  title = 'photo-gallery-app';
}

儲存 app.component.ts 檔案。

編譯新的獨立應用程式

在指令列視窗中完成下列步驟。

前往新的 photo-gallery-app 專案目錄
輸入下列 Angular 指令，即可編譯新應用程式。
```
ng serve
```

您的應用程式應該無法編譯。別擔心，你只需要修正幾個步驟即可。

使用 BootstrapApplication API

如要讓應用程式在不使用 NgModule 的情況下執行，您必須使用 bootstrapApplication API 將獨立元件做為根元件。

移除應用程式模組的參照

在程式碼編輯器中完成以下動作。

前往新 photo-gallery-app 專案目錄中的 src 目錄
開啟 main.ts 檔案。

由於您不再擁有應用程式模組，請移除以下匯入程式碼。

import { AppModule } from './app/app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

移除以下啟動程式碼，因為您不再擁有應用程式模組。

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

main.ts 檔案應與下列程式碼範例相符。

import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

新增 bootstrapApplication 元件

在程式碼編輯器中完成以下動作。

前往新 photo-gallery-app 專案目錄中的 src 目錄。
開啟 main.ts 檔案。
從 @angular/platform-browser 服務匯入 bootstrapApplication 元件。
```
import { bootstrapApplication } from '@angular/platform-browser';
```

加入下列程式碼即可啟動應用程式。

bootstrapApplication(AppComponent).catch(err => console.error(err));

匯入元件和必要的程式庫。

import { AppComponent } from './app/app.component';

main.ts 檔案應與下列程式碼範例相符。

import { enableProdMode } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

bootstrapApplication(AppComponent).catch(err => console.error(err));

新增路由器和通用模組

如要使用路由器和其他常見模組功能，你必須直接將每個模組匯入元件中。

在程式碼編輯器中完成以下動作。

前往新 photo-gallery-app 專案目錄中的 src/app 目錄。
開啟 app.component.ts 檔案。

將必要模組匯入元件中。

import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';

在元件中新增匯入項目。

imports: [CommonModule, RouterModule],

app.component.ts 檔案應與下列程式碼範例相符。

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';

@Component({
  selector: 'app-root',
  imports: [CommonModule, RouterModule],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  standalone: true
})
export class AppComponent {
  title = 'photo-gallery-app';
}

儲存 app.component.ts 檔案。

編譯並執行新的獨立應用程式

在指令列視窗中完成下列步驟。

前往新的 photo-gallery-app 專案目錄。
輸入下列 Angular 指令，即可編譯並執行應用程式並開啟網路伺服器。您可能需要先關閉 IDE，再執行應用程式，才能移除任何編譯錯誤。
```
ng serve
```

您的開發伺服器應在通訊埠 4200 執行。先前的所有錯誤應都會消失，且應會成功編譯。非常好，您已成功建立 Angular 應用程式，這個應用程式可在沒有模組和獨立元件的情況下執行。

接下來，您將美化應用程式可顯示一些相片。

4. 顯示相片

您的新應用程式設計為相片庫，應顯示一些相片。

元件是 Angular 應用程式的核心構成元素。元件有 3 個主要面向。

範本的 HTML 檔案
樣式的 CSS 檔案
應用程式行為的 TypeScript 檔案

將相片移至您的應用程式

您可以從先前從 GitHub 下載的應用程式中取得圖片。

前往 GitHub 專案的 src/assets 目錄。
複製這些檔案並貼到 photo-gallery-app 專案目錄中的 analogue 目錄中。

建立 HTML 範本

app.component.html 檔案是與 AppComponent 元件相關聯的 HTML 範本檔案。

在程式碼編輯器中完成以下動作。

前往新 photo-gallery-app 專案目錄中的 src/app 目錄。
開啟 app.component.html 檔案。
刪除所有現有的 HTML 檔案。

複製並貼上以下程式碼範例中的 HTML。

<article>
    <h1>Above and below the Ocean</h1>
        <h2>A taste of the Australia and Galapagos Wildlife, meet my friends!</h2>
        <section>
            <section class="row">
                <div class="column">
                  <img src="/assets/49412593648_8cc3277a9c_c.jpg">
                  <img src="/assets/49413271167_22a504c3fa_w.jpg">
                  <img src="/assets/47099018614_5a68c0195a_w.jpg">
                </div>
                <div class="column">
                  <img src="/assets/41617221114_4d5473251c_w.jpg">
                  <img src="/assets/47734160411_f2b6ff8139_w.jpg"> 
                  <img src="/assets/46972303215_793d32957f_c.jpg">
                </div>
                <div class="column">
                  <img src="/assets/45811905264_be30a7ded6_w.jpg">
                  <img src="/assets/44718289960_e83c98af2b_w.jpg">
                  <img src="/assets/46025678804_fb8c47a786_w.jpg">
                </div>
              </section>
        </section>
</article

儲存 app.component.html 檔案。

建立樣式定義檔案

在程式碼編輯器中完成以下動作。

前往新 photo-gallery-app 專案目錄中的 src 目錄。
開啟 styles.css 檔案。

複製並貼上以下程式碼範例中的 CSS。

article {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-family: 'Raleway';
}

h1 {
  color: #4479BA;
  text-align: center;
  font-size: xx-large;
}

h2 {
  color: rgb(121, 111, 110);
  text-align: center;
}

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/*   Create four equal columns that sits next to each other */
.column {
  flex: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

.link_button {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  border: solid 1px #20538D;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  background: #4479BA;
  color: #FFF;
  padding: 8px 12px;
  text-decoration: none;
  margin-top: 50px;
  font-size: large;
}

@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}

儲存 styles.css 檔案

更新索引檔案

在程式碼編輯器中完成以下動作。

前往新 photo-gallery-app 專案目錄中的 src 目錄。
開啟 index.html 檔案。

新增 Raleway 字型，允許所有網頁沿用該字型。

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">

儲存 index.html 檔案。
儲存程式碼並檢查瀏覽器。由於開發伺服器處於執行中狀態，您儲存時就會在瀏覽器中反映變更。
接下來，您將會建立新的獨立元件，以便傳送意見回饋並與 Jimbo 聊天。請繼續進行本程式碼研究室，進一步瞭解 Jimbo。

5. 新增獨立元件

如您目前所見，獨立元件可減少對 NgModules 的需求，進而簡化建構 Angular 應用程式的方式。在以下各節中，您將建立新的獨立元件，讓使用者可以傳送意見回饋並與虛擬服務專員進行即時通訊。

建立新的獨立元件

如要建立這個新元件，請再次使用 Angular CLI。

在指令列視窗中完成下列步驟。

前往新的 photo-gallery-app 專案目錄。

輸入下列 Angular 指令，建立名為 feedback-and-chat 的新元件。

ng generate component feedback-and-chat --standalone

下表說明指令的各個部分。

配件	詳細資料
`ng`	定義 Angular 架構的所有 Angular CLI 指令
`generate component`	為新元件建立鷹架
`feedback-and-chat`	元件名稱
`--standalone`	指示 Angular 架構建立獨立元件

匯入新的獨立元件

如要使用新的獨立元件，請先將元件新增至 app.components.ts 檔案的 imports 陣列。

這是獨立元件，因此您可以像模組一樣匯入。

在程式碼編輯器中完成以下動作。

前往新 photo-gallery-app 專案目錄中的 src/app 目錄。
開啟 app.component.ts 檔案。

匯入新的獨立元件。

import { FeedbackAndChatComponent } from './feedback-and-chat/feedback-and-chat.component';

更新元件中的匯入內容。

imports: [CommonModule, RouterModule, FeedbackAndChatComponent],

app.component.ts 檔案應與下列程式碼範例相符。

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { RouterModule } from '@angular/router';
import { FeedbackAndChatComponent } from './feedback-and-chat/feedback-and-chat.component';

@Component({
  selector: 'app-root',
  imports: [CommonModule, RouterModule, FeedbackAndChatComponent],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  standalone: true
})
export class AppComponent {
  title = 'photo-gallery-app';
}

儲存 app.component.ts 檔案。

延遲載入元件

從積極的載入範例切換至延遲載入模式，在需要程式碼時，才會將程式碼傳送給用戶端。延遲載入是縮短網頁載入時間、改善效能及改善使用者體驗的好方法。路由器會處理延遲載入，這適用於 ngModule 和獨立元件。

更新與應用程式元件相關聯的 HTML 範本

如要延遲載入獨立元件，請在 UI 中新增按鈕，僅在使用者選取元件時才會啟動元件。

在程式碼編輯器中完成以下動作。

前往新 photo-gallery-app 專案目錄中的 src/app 目錄。
開啟 app.component.html 檔案。

捲動至檔案結尾，然後加入以下程式碼範例，再關閉 article 元素。

<a class="link_button" routerLink="feedback-and-chat">Find out more about these guys!</a>
<router-outlet></router-outlet>

app.component.html 檔案應與下列程式碼範例相符。

<article>
    <h1>Above and below the Ocean</h1>
    <h2>A taste of the Australia and Galapagos Wildlife, meet my friends!</h2>
    <section>
        <section class="row">
            <div class="column">
                <img src="/assets/49412593648_8cc3277a9c_c.jpg">
                <img src="/assets/49413271167_22a504c3fa_w.jpg">
                <img src="/assets/47099018614_5a68c0195a_w.jpg">
            </div>
            <div class="column">
                <img src="/assets/41617221114_4d5473251c_w.jpg">
                <img src="/assets/47734160411_f2b6ff8139_w.jpg"> 
                <img src="/assets/46972303215_793d32957f_c.jpg">
            </div>
            <div class="column">
                <img src="/assets/45811905264_be30a7ded6_w.jpg">
                <img src="/assets/44718289960_e83c98af2b_w.jpg">
                <img src="/assets/46025678804_fb8c47a786_w.jpg">
            </div>
        </section>
    </section> 
    <a class="link_button" routerLink="feedback-and-chat">Find out more about these guys!</a>
    <router-outlet></router-outlet>
</article>

儲存 app.component.html 檔案。

設定路徑

在程式碼編輯器中完成以下動作。

前往新 photo-gallery-app 專案目錄中的 src 目錄。
開啟 main.ts 檔案。
匯入 provideRouter 方法和路徑模組。Angular 14.2.0 版導入了新的 provideRouter 方法，以便我們設定應用程式的一組路徑。
```
import { provideRouter, Routes } from '@angular/router';
```

在匯入作業和 if 陳述式之間複製及貼上下列程式碼片段。

const routes = [
  {
    path: 'feedback-and-chat',
    loadComponent: () => import('./app/feedback-and-chat/feedback-and-chat.component').then(c => c.FeedbackAndChatComponent),
  }
]

複製並貼上下列程式碼片段，並取代 bootstrapApplication 方法。

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes)
  ]
}).catch(err => console.error(err));

main.ts 檔案應與下列程式碼範例相符。

import { enableProdMode } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter, Routes } from '@angular/router';
import { AppComponent } from './app/app.component';
import { environment } from './environments/environment';

const routes = [
  {
    path: 'feedback-and-chat',
    loadComponent: () => 
      import('./app/feedback-and-chat/feedback-and-chat.component').then(c => c.FeedbackAndChatComponent),
  }
]

if (environment.production) {
  enableProdMode();
}

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes)
  ]
}).catch(err => console.error(err));

儲存 main.ts 檔案。

使用 Chrome 開發人員工具編譯及審查

使用 Chrome 開發人員工具，瞭解 Angular 架構延遲載入元件的方式。

在指令列視窗中完成下列步驟。

前往新的 photo-gallery-app 專案目錄。
輸入下列 Angular 指令，即可編譯並執行應用程式並開啟網路伺服器。
```
ng serve
```
您的開發伺服器應在通訊埠 4200 執行。

在瀏覽器中完成下列步驟。

前往下一頁。
```
http://localhost:4200
```
開啟 Chrome 開發人員工具，然後選擇 [Network] 分頁標籤。
重新整理頁面後，系統會顯示多個檔案，但不會顯示 feedback-and-chat 元件。畫面應符合下列螢幕截圖內容。
選取「進一步瞭解這些人！」按鈕，即可前往獨立元件。記錄檔應會顯示只有在你到達完整路由器時，系統才會載入元件。向下捲動至清單底部，確認元件已載入。螢幕畫面應與下列螢幕截圖相符。

6. 新增表單 UI

意見回饋表單有三個輸入 UI 欄位和一個底部按鈕。三個輸入 UI 欄位為全名、寄件者電子郵件地址和留言。

如要支援 UI，請在 input 元素中新增 formControlName 屬性，該屬性會繫結至與三個輸入 UI 欄位，且相關聯的每個 contactForm 表單控制項。

將表單新增至 HTML 範本

在 UI 中新增表單，讓使用者可以提供意見。

在程式碼編輯器中完成以下動作。

前往 feedback-and-chat.component.html 檔案。
移除現有的 HTML。

複製並貼上以下程式碼範例中的 HTML。

<article>    
    <h2>Send me a message or use the chat below to learn some cool facts of the animals in the photos</h2>
    <section class="container">
        <form ngNativeValidate [formGroup]="contactForm" (ngSubmit)="onSubmit()">
            <div class="row" *ngIf="showMsg">
                <div class="row">
                    <p>
                        <strong>Thanks for your message!</strong>
                    </p>
                </div>
            </div>
            <div class="row">
                <div class="col-25">
                    <label for="name">Full Name</label>
                </div>
                <div class="col-75">
                    <input type="text" id="fname" placeholder="Your name.." formControlName="fullname" required>
                </div>
            </div>
            <div class="row">
                <div class="col-25">
                    <label for="lemail">Email</label>
                </div>
                <div class="col-75">
                    <input type="text" id="lemail" placeholder="Your email.." formControlName="email" required>
                </div>
            </div>
            <div class="row">
                <div class="col-25">
                    <label for="comments">Comments</label>
                </div>
                <div class="col-75">
                    <textarea id="subject" formControlName="comments" placeholder="Write something.." style="height:200px" required></textarea>
                </div>
            </div>
            <div class="row">
              <button type="submit" class="submit">Submit</button>
            </div>
        </form>
    </section>
</article>

儲存 feedback-and-chat.component.html 檔案。

更新表單的樣式檔案

在程式碼編輯器中完成以下動作。

前往 feedback-and-chat.component.css 檔案。

複製並貼上以下程式碼範例中的 CSS。

/*   Style inputs, select elements and textareas */
input[type=text], select, textarea{
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
}

/*   Style the label to display next to the inputs */
label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}

/*   Style the submit button */
button {
  background-color: #4479BA;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
  font-size: medium;
  font-family: 'Raleway';
}

/*   Style the container */
.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
  width: 100%;
}

/*   Floating column for labels: 25% width */
.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}

/*   Floating column for inputs: 75% width */
.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}

/*   Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/*   Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}

儲存 feedback-and-chat.component.css 檔案。

編譯表單的 UI 更新

在指令列視窗中完成下列步驟。

前往新的 photo-gallery-app 專案目錄。
輸入下列 Angular 指令，即可編譯並執行應用程式並開啟網路伺服器。
```
ng serve
```
您的應用程式應該無法編譯。請放心，您需要繫結表單。
- 您可以使用 formGroup 屬性繫結，將 contactForm 繫結至 form 元素和 ngSubmit 事件繫結
- FormGroup 指令會監聽 form 元素產生的提交事件。接著，FormGroup 指令會發出 ngSubmit 事件，讓您繫結至 onSubmit 回呼函式。
- 在後續步驟中，您要在 feedback-and-chat.component.ts 檔案中實作 onSubmit 回呼函式
接下來，您可以繫結表單。

7. 在表單中新增事件處理方式

提供意見表單的使用者介面已完成，但缺少互動功能。透過表單處理使用者輸入內容，是許多常見應用的基礎。

在實際的情境中，您需實作商業邏輯才能完成下列動作。

從與元件相關聯的轉譯的 DOM 結構剖析使用者輸入內容。
驗證使用者的輸入內容，其中包含人機驗證 (Captcha) 或類似機制，可避免漫遊器濫發垃圾內容。
傳送電子郵件至指定的電子郵件地址。
向使用者顯示善意訊息。

在本程式碼研究室中，您只會實作以下動作。

從與元件相關聯的轉譯的 DOM 結構剖析使用者輸入內容。
向使用者顯示善意訊息。

您必須挑戰自身技能，並實踐這四項行動。

將「傳送訊息」表單模型新增至元件

在元件類別中建立及新增傳送意見回饋表單模型。表單模型會決定表單的狀態。FormBuilder 服務提供輕鬆建立 UI 控制項的方法。

在程式碼編輯器中完成以下動作。

前往 feedback-and-chat.component.ts 檔案。
從 @angular/forms 套件匯入 FormBuilder 服務和 ReactiveModule 模組。這項服務提供產生控制項的便捷方法。在下一個步驟中，我們會使用 inject 函式，因此也必須從 @angular/core 匯入該函式。
```
import { Component, inject, OnInit } from '@angular/core';
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
```

匯入 ReactiveFormsModule 模組。

imports: [CommonModule,ReactiveFormsModule],

移除下列建構函式。
```
constructor() { }
```
透過類別簽章正下方的 inject 函式插入 FormBuilder 服務。
```
private formBuilder = inject(FormBuilder);
```
使用 FormBuilder 服務的 group 方法建立表單模型，收集使用者的姓名、電子郵件地址和留言。
建立新的 contactForm 屬性，並使用 group 方法將其設為表單模型。表單模型包含 name、email 和 comments 欄位。
```
contactForm = this.formBuilder.group({
  fullname: '',
  email: '',
  comments: ''
});
```
定義用於處理表單的 onSubmit 方法。在實際情境中，onSubmit 方法可讓使用者透過傳送至指定電子郵件地址的電子郵件訊息，向攝影師提交意見回饋訊息。在本程式碼研究室中，您將顯示使用者輸入內容，並使用 reset 方法重設表單，並顯示清楚易懂的成功訊息。

新增 onSubmit 方法，並在初始化後將 showMsg 變數設為 true。

showMsg: boolean = false;

onSubmit(): void {
  console.log('Your feedback has been submitted', this.contactForm.value);
  this.showMsg = true;
  this.contactForm.reset();
}

feedback-and-chat.component.ts 檔案應與下列程式碼範例相符。

import { Component, inject, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-feedback-and-chat',
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule],
  templateUrl: './feedback-and-chat.component.html',
  styleUrls: ['./feedback-and-chat.component.css']
})
export class FeedbackAndChatComponent {

  showMsg: boolean = false;
  private formBuilder = inject(FormBuilder);

  contactForm = this.formBuilder.group({
    fullname: '',
    email: '',
    comments: ''
  });

  ngOnInit(): void {
  }

  onSubmit(): void {
    console.log('Your feedback has been submitted', this.contactForm.value);
    this.showMsg = true;
    this.contactForm.reset();
  }
}

儲存 feedback-and-chat.component.ts 檔案。

編譯並顯示「提供意見」表單模型

在指令列視窗中完成下列步驟。

前往新的 photo-gallery-app 專案目錄。
輸入下列 Angular 指令，即可編譯並執行應用程式並開啟網路伺服器。
```
ng serve
```
您的開發伺服器應在通訊埠 4200 執行。

在瀏覽器中完成下列步驟。

前往下一頁。
```
http://localhost:4200
```
開啟 Chrome 開發人員工具，然後選擇 [Console] (控制台) 分頁標籤。
在「全名」、「電子郵件」和「留言」文字方塊中輸入任意值。
選取「提交」按鈕，頁面上應會顯示成功訊息。
確認「Console」分頁顯示的值。畫面應與下列螢幕截圖相符。您已成功導入程式碼，以便在元件 UI 中新增「傳送訊息」表單，並剖析使用者輸入內容。
接著，您可以嵌入即時通訊對話方塊，允許應用程式訪客與 Jimbo 對話。吉博是無尾熊，你能夠透過他學到一些有關野生動物的冷知識。

8. 新增即時通訊對話方塊

運用對話介面的經驗，例如 Dialogflow CX 或類似平台。Dialogflow CX 虛擬服務專員是與人類的並行對話。這個自然語言理解模組可辨識人類語言的細微差異，並將使用者在對話期間的文字或音訊翻譯成應用程式和服務能夠理解的結構化資料。

系統已為您建立範例虛擬服務專員，方便您使用。在這個研究室中，您需要在獨立元件中新增聊天對話，讓應用程式使用者與機器人互動。為符合這項規定，您將使用 Dialogflow Messenger 預先建構的整合服務，提供可自訂的對話方塊視窗。開啟時，即時通訊對話方塊會顯示在畫面右下方，並觸發代理程式的預設歡迎意圖。機器人問候使用者並發起對話。

以下實作方式與使用者分享野生動物的趣聞。其他導入虛擬服務專員的做法，或許也能解決客戶的複雜用途 (例如客服中心服務專員)。許多公司會使用虛擬服務專員做為與公司網站通訊的主要管道。

將 Dialogflow Messenger 新增至元件

如同表單，只有在載入獨立元件時才會顯示即時通訊對話方塊。

在程式碼編輯器中完成以下動作。

前往 feedback-and-chat.component.ts 檔案。

複製以下程式碼範例中的 df-messenger 元素，然後貼到網頁中任何位置。

<df-messenger agent-id="762af666-79f7-4527-86c5-9ca06f72c317"
              chat-title="Chat with Jimbo!"
              df-cx="true"
              intent="messanger-welcome-event"
              language-code="en"
              location="us-central1"></df-messenger>

選取 Dialogflow Messenger 整合時，Dialogflow 會產生 df-messenger 元素的屬性。

屬性	詳細資料
服務專員 ID	預先填入。指定 Dialogflow 虛擬服務專員的專屬 ID。
即時通訊標題	預先填入。指定即時通訊對話方塊頂端顯示的內容。一開始會預先填入代理程式的名稱，但建議您自訂代理程式。
df-cx	表示互動是與 CX 服務專員。將值設為 `true`。
意圖	指定在開啟即時通訊對話方塊時，用來觸發第一個意圖的自訂事件。
語言代碼	為第一個意圖指定預設語言代碼。
位置	指定您部署代理程式的區域。

儲存 feedback-and-chat.component.ts 檔案。

顯示「提供意見」表單模型

在指令列視窗中完成下列步驟。

前往新的 photo-gallery-app 專案目錄。
輸入下列 Angular 指令，即可編譯應用程式。
```
ng serve
```
您的應用程式應該無法編譯。指令列應會顯示下列錯誤訊息。
接著，新增自訂架構。

在獨立元件中新增自訂結構定義

df-messanger 元素不是已知的元素。這是自訂的 Web 元件。Angular 架構的錯誤訊息建議您為兩個獨立元件新增 CUSTOM_ELEMENTS_SCHEMA，才能隱藏訊息。

在程式碼編輯器中完成以下動作。

前往 feedback-and-chat.component.ts 檔案。

匯入 CUSTOM_ELEMENTS_SCHEMA 架構。

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

將 CUSTOM_ELEMENTS_SCHEMA 新增至結構定義清單。

schemas: [CUSTOM_ELEMENTS_SCHEMA]

feedback-and-chat.component.ts 檔案應與下列程式碼範例相符。

import { Component, CUSTOM_ELEMENTS_SCHEMA, inject, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-feedback-and-chat',
  standalone: true,
  imports: [CommonModule,ReactiveFormsModule],
  templateUrl: './feedback-and-chat.component.html',
  styleUrls: ['./feedback-and-chat.component.css'],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

...

這種 PDF 檔案的網頁元件需要在載入意見回饋和即時通訊元件時插入 JavaScript。為此，我們會在 ngOnInit() 方法中加入相關程式碼，該方法會載入啟用元素所需的即時通訊指令碼。

ngOnInit() {
    // Load the chat script, which activates the `<df-messenger>` element.
    const script = document.createElement('script');
    script.async = true;
    script.src = 'https://www.gstatic.com/dialogflow-console/fast/messenger-cx/bootstrap.js?v=1';
    document.head.appendChild(script);
}

儲存 feedback-and-chat.component.ts 檔案。

編譯並顯示更新後的即時通訊對話方塊

在指令列視窗中完成下列步驟。

前往新的 photo-gallery-app 專案目錄。
輸入下列 Angular 指令，即可編譯並執行應用程式並開啟網路伺服器。
```
ng serve
```
您的開發伺服器應在通訊埠 4200 執行。

在瀏覽器中完成下列步驟。

前往下一頁。
```
http://localhost:4200
```
頁面底部應會顯示即時通訊圖示。
只要選取圖示，就能與 Jimbo.Jimbo 互動，分享豐富的動物知識。
本應用程式功能完全正常。

9. 將應用程式部署至 Google App Engine

應用程式會在您的電腦本機上執行。作為本程式碼研究室的下個步驟，最後一個步驟是部署至 Google App Engine。

如要進一步瞭解 Google App Engine，請參閱 App Engine。

設定 Google App Engine 環境

如果已符合以下所有條件，請略過後續步驟並繼續部署應用程式。

使用 App Engine 建立 Cloud 專案
啟用 Cloud Build API
已安裝 Google Cloud CLI

請完成下列動作。

登入 Gmail 或 Google Workspace 帳戶。如果您沒有 Google 帳戶，請建立帳戶。
請在 Cloud 控制台中啟用計費功能，以便使用 Cloud 資源和 API。詳情請參閱「建立、修改或關閉自助式 Cloud Billing 帳戶」。
建立 Google Cloud 專案來保存您的 App Engine 應用程式資源和其他 Google Cloud 資源。詳情請參閱「建立及管理專案」。
在 Cloud 控制台中啟用 Cloud Build API。詳情請參閱「啟用 API 存取權」。
安裝 Google Cloud CLI 和 gcloud 指令列工具。詳情請參閱「安裝 gcloud CLI」一文。
初始化 Google Cloud CLI，並確認 gcloud 已設為使用您要部署的 Google Cloud 專案。詳情請參閱初始化 gcloud CLI。

建構獨立應用程式

在指令列視窗中完成下列步驟。

前往新的 photo-gallery-app 專案目錄。
輸入下列 Angular 指令，即可編譯及建立可用於實際工作環境的應用程式版本。
```
ng build
```

您用於實際工作環境的應用程式版本會建立在 photo-gallery-app 專案目錄的 dist 子目錄中。

10. 使用 Express.js 架構部署應用程式

本程式碼研究室中的程式碼範例使用 Express.js 架構來處理 HTTP 要求。您可以使用偏好的網路架構。

安裝 Express.js 架構

在指令列視窗中完成下列步驟。

輸入下列指令，安裝 Express.js 架構。
```
npm install express --save
```

設定網路伺服器

在程式碼編輯器中完成以下動作。

前往新的 photo-gallery-app 專案目錄。
建立新的 server.js 檔案。

複製並貼上以下程式碼。

const express = require("express");
const path = require("path");

// Running PORT is set automatically by App Engine
const port = process.env.PORT || 3000;
const app = express();

const publicPath = path.join(__dirname, "/dist/photo-gallery-app");

app.use(express.static(publicPath));

app.get("*", (req, res) => {
  res.sendFile(path.join(__dirname + "/dist/photo-gallery-app/index.html"));
});

app.listen(port, () => {
  console.log(`Server is up on ${port}`);
});

儲存 server.js 檔案。

附加您的網路伺服器

在程式碼編輯器中完成以下動作。

前往新的 photo-gallery-app 專案目錄。
開啟 package.json 檔案。

修改 start 指令，執行 server.js 檔案中的節點。

"name": "photo-gallery-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "node server.js",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },

start 屬性是應用程式的進入點。

儲存 package.json 檔案。

設定 App Engine

在程式碼編輯器中完成以下動作。

前往新的 photo-gallery-app 專案目錄。
建立新的 app.yaml 檔案。
複製並貼上以下程式碼。
```
runtime: nodejs16
service: default
```
app.yaml 檔案中的資訊會指定 App Engine 的設定。您只需指定執行階段和服務。
儲存 app.yaml 檔案。

更新 gcloud 忽略清單

為確保未上傳 node_modules 目錄，請建立 .gcloudignore 檔案。系統不會上傳 .gcloudignore 檔案中所列的檔案。

在程式碼編輯器中完成以下動作。

前往新的 photo-gallery-app 專案目錄。
建立新的 .gcloudignore 檔案。

複製並貼上以下程式碼。

# This file specifies files that are *not* uploaded to Google Cloud
# using gcloud. It follows the same syntax as .gitignore, with the addition of
# "#!include" directives (which insert the entries of the given .gitignore-style
# file at that point).
#
# For more information, run:
#   $ gcloud topic gcloudignore
#
.gcloudignore
# If you would like to upload your .git directory, .gitignore file or files
# from your .gitignore file, remove the corresponding line
# below:
.git
.gitignore

# Node.js dependencies:
node_modules/

儲存 .gcloudignore 檔案。

將應用程式初始化

在部署應用程式之前，請先透過專案初始化應用程式，然後選擇相關聯的區域。

在指令列視窗中完成下列步驟。

前往新的 photo-gallery-app 專案目錄。
請輸入下列指令來初始化應用程式。
```
gcloud app create --project=[YOUR_PROJECT_ID]
```
在提示訊息中，選擇要尋找 App Engine 應用程式的區域。

部署應用程式

在指令列視窗中完成下列步驟。

前往新的 photo-gallery-app 專案目錄。

輸入下列指令來部署應用程式。

gcloud app deploy --project=[YOUR_PROJECT_ID]

在系統提示時，確認動作。gcloud Deployment 指令成功完成後，系統會顯示網址來存取應用程式。
輸入下列指令，在瀏覽器中開啟新分頁。
```
gcloud app browse
```

11. 恭喜

恭喜！您使用 Angular v14 建立範例相片庫，並成功部署至 App Engine。

您已經實驗了獨立元件功能和延遲載入結果。您建構了一個表單式的傳送訊息功能，以便提供意見回饋和留言。您也使用 Dialogflow Messenger 成功新增與 Dialogflow CX 虛擬服務專員進行的即時通訊對話。太棒了！

後續步驟

現在您已完成基本應用程式，接下來可以運用下列建議加以改進。

這份表單並不會實際傳送意見回饋，請重構表單並加入傳送電子郵件的商業邏輯。
在實際情境中，您應驗證使用者輸入內容，並加入人機驗證 (Captcha) 或類似機制，來避免機器人濫發垃圾內容
建立新的虛擬服務專員，並瞭解如何在 Dialogflow CX 中設計對話流程

持續嘗試各種 Angular 架構，並樂在其中。

清除所用資源並刪除 Cloud 專案

您可以保留 Cloud 專案，或是選擇刪除專案，這樣系統就會停止對專案中使用的所有資源計費。

在瀏覽器中完成下列步驟。

登入 Gmail 或 Google Workspace 帳戶。
在 Google Cloud 控制台中，選取 IAM 與管理員設定按鈕。
您可以前往 IAM 與管理員頁面，選取「管理資源」分頁標籤。
在「Manage resources」(管理資源) 頁面中。前往要刪除的專案，然後選擇該專案。點選「Delete」按鈕，開啟對話方塊視窗。
在對話方塊視窗中輸入專案 ID，選取「關閉」按鈕即可刪除專案。

節點版本	Angular 支援
14.15 以上版本	有權限
16.10 以上版本	有權限
18.1.0	不支援