Diese Seite wurde von der Cloud Translation API übersetzt.

Erste Schritte mit eigenständigen Komponenten

1. Einführung

Umfang

In diesem Codelab erstellen Sie mit Angular v14 eine Anwendung für eine Wildtierfotogalerie. Die ausgefüllte Bewerbung enthält eine Reihe von Fotos sowie ein Formular zum Senden einer Nachricht, mit dem Sie den Fotografen kontaktieren können, sowie ein Chatfenster, um interessante Fakten über die abgebildeten Tiere zu erfahren.

Sie erstellen Ihre gesamte Anwendung mit Angular v14 und der neuen Funktion für eigenständige Komponenten.

Alle Verweise auf das Angular-Framework und die Angular-Befehlszeile beziehen sich auf Angular Version 14. Eigenständige Komponenten sind eine Vorabversion von Angular v14. Sie müssen also mit Angular v14 eine ganz neue Anwendung erstellen. Eigenständige Komponenten bieten eine vereinfachte Möglichkeit, Angular-Anwendungen zu erstellen. Eigenständige Komponenten, eigenständige Anweisungen und eigenständige Pipes zielen darauf ab, die Entwicklung zu optimieren, indem der Bedarf an NgModules reduziert wird. Eigenständige Komponenten können das vorhandene System der Angular-Bibliotheken in vollem Umfang nutzen.

Dies ist die Anwendung, die Sie heute erstellen.

Abgeschlossener Antrag

Lerninhalte

Angular CLI für das Gerüst eines neuen Projekts verwenden
Mit eigenständigen Angular-Komponenten die Entwicklung von Angular-Apps optimieren
Erstellen einer eigenständigen Komponente wie Sie die Benutzeroberfläche erstellen und Geschäftslogik hinzufügen,
Bootstrapping einer Anwendung mithilfe einer eigenständigen Komponente ausführen
So laden Sie eine eigenständige Komponente per Lazy Loading
Wie man einen Chat-Dialog mit Dialogflow Messenger in eine eigenständige Komponente einbettet
Angular-Anwendung mit der Google Cloud CLI (gcloud) in Google Cloud App Engine bereitstellen

Voraussetzungen

Ein Gmail- oder Google Workspace-Konto
Grundkenntnisse in den folgenden Fächern
- HTML: So erstellen Sie ein Element.
- und weniger. CSS-Selektor verwenden und eine Stildefinitionsdatei erstellen
- TypeScript oder JavaScript verwenden. Interaktion mit der DOM-Struktur.
- git und GitHub. Verzweigen und Klonen eines Repositorys
- Befehlszeile, z. B. bash oder zsh. Informationen zum Navigieren in Verzeichnissen und Ausführen von Befehlen.

2. Umgebung einrichten

Lokale Umgebung einrichten

Für dieses Codelab musst du die folgende Software auf deinem lokalen Computer installieren.

Eine aktive Langzeitsupport- oder Wartungsversion von Node.js. Wird zum Installieren des Angular-Frameworks und der Angular-Befehlszeile verwendet.

Knotenversion

Unterstützt von Angular

14.15 oder höher

Unterstützt

16.10 oder höher

Unterstützt

18.1.0

Nicht unterstützt

Führen Sie den folgenden node-Befehl in einem Befehlszeilenfenster aus, um die Version von Node.js auf Ihrem lokalen Computer zu prüfen.
```
node -v
```
Einen Code-Editor oder eine IDE Wird zum Öffnen und Bearbeiten von Dateien, Visual Studio Code oder einem anderen Codeeditor Ihrer Wahl, verwendet.

Angular CLI installieren

Nachdem Sie alle Abhängigkeiten konfiguriert haben, führen Sie den folgenden npm-Befehl aus, um die Angular-Befehlszeile über ein Befehlszeilenfenster zu installieren.

npm install --global @angular/cli

Führen Sie den folgenden Angular-Befehl über eine Befehlszeile aus, um zu prüfen, ob Ihre Konfiguration korrekt ist.

ng version

Wenn der Angular-Befehl erfolgreich ausgeführt wurde, sollten Sie eine Nachricht ähnlich der folgenden Bildschirmaufnahme erhalten.

Terminalausgabe der eckigen Version

Quellcode und Bilder

Sie erstellen die gesamte Anwendung von Grund auf neu und dieses Codelab mit Schritt-für-Schritt-Anleitungen hilft Ihnen dabei. Beachten Sie, dass das GitHub-Repository den endgültigen Code enthält. Wenn Sie nicht weiterkommen, überprüfen Sie den endgültigen Code und die Bilder, die auf der Galerieseite angezeigt werden.

So laden Sie den Quellcode herunter:

Rufen Sie in Ihrem Browser die folgende Seite auf.

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

Erstellen Sie in einem Befehlszeilenfenster einen Fork des Repositorys und klonen Sie es.

Erstellen Sie im nächsten Schritt Ihre Fotogalerie-Anwendung.

3. Neue Anwendung erstellen

Führen Sie die folgenden Aktionen aus, um die erste Start-App zu erstellen.

Verwenden Sie die Angular CLI, um einen neuen Arbeitsbereich zu erstellen. Weitere Informationen zur Angular CLI und zum Angular-Framework finden Sie unter angular.io.

Erstellen Sie ein neues Projekt

Führen Sie in einem Befehlszeilenfenster die folgenden Aktionen aus.

Geben Sie den folgenden Angular-Befehl ein, um ein neues Angular-Projekt mit dem Namen photo-gallery-app zu erstellen.
```
ng new photo-gallery-app
```
Übernehmen Sie bei jeder Eingabeaufforderung die Standardauswahl.Das Angular-Framework installiert die erforderlichen Pakete und Abhängigkeiten. Der Vorgang kann einige Minuten dauern.

Nach Abschluss der Angular-Befehlszeile haben Sie einen neuen Angular-Arbeitsbereich und eine einfache, sofort einsatzbereite Anwendung.

Ihre neue Anwendung ist wie eine Angular-Standardanwendung strukturiert. Das NgModule in Ihrer neuen Anwendung ist für dieses Codelab redundant.

Anwendungsmodul entfernen

Führen Sie die folgenden Schritte aus, um das Anwendungsmodul zu entfernen.

Wechseln Sie in Ihrem neuen photo-gallery-app-Projektverzeichnis zum Verzeichnis src/app.
Löschen Sie die Datei app.module.ts.

Nachdem Sie das Anwendungsmodul gelöscht haben, ist kein Modul in Ihrer Anwendung vorhanden. Ihre Anwendung verfügt nur über eine Komponente, nämlich die Anwendungskomponente. Sie müssen die Komponente als eigenständige Komponente deklarieren.

Eigenständige Komponente deklarieren

Führen Sie in einem Code-Editor die folgenden Aktionen aus.

Wechseln Sie in Ihrem neuen photo-gallery-app-Projektverzeichnis zum Verzeichnis src/app.
Öffnen Sie die Datei app.component.ts.

Fügen Sie der Liste der Decorators den folgenden Parameter und Wert hinzu.

standalone: true

Die Datei app.component.ts sollte dem folgenden Codebeispiel sehr ähnlich sein.

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';
}

Speichern Sie die Datei app.component.ts.

Neue eigenständige Anwendung kompilieren

Führen Sie in einem Befehlszeilenfenster die folgenden Aktionen aus.

Zum neuen photo-gallery-app-Projektverzeichnis wechseln
Geben Sie den folgenden Angular-Befehl ein, um die neue Anwendung zu kompilieren.
```
ng serve
```

Ihre Anwendung sollte nicht kompiliert werden. Keine Sorge, Sie müssen nur noch ein paar Dinge korrigieren.

BootstrapApplication API verwenden

Damit deine Anwendung ohne NgModule ausgeführt werden kann, musst du mithilfe der bootstrapApplication API eine eigenständige Komponente als Stammkomponente verwenden.

Verweise auf das Anwendungsmodul entfernen

Führen Sie in einem Code-Editor die folgenden Aktionen aus.

Wechseln Sie in Ihrem neuen photo-gallery-app-Projektverzeichnis zum Verzeichnis src.
Öffnen Sie die Datei main.ts.

Entfernen Sie den folgenden Importcode, da Sie kein Anwendungsmodul mehr haben.

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

Entfernen Sie den folgenden Bootstrap-Code, da Sie kein Anwendungsmodul mehr haben.

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

Die Datei main.ts sollte dem folgenden Codebeispiel entsprechen.

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

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

BootstrapApplication-Komponente hinzufügen

Führen Sie in einem Code-Editor die folgenden Aktionen aus.

Wechseln Sie in Ihrem neuen photo-gallery-app-Projektverzeichnis zum Verzeichnis src.
Öffnen Sie die Datei main.ts.
Importieren Sie die Komponente „bootstrapApplication“ aus dem Dienst „@angular/platform-browser“.
```
import { bootstrapApplication } from '@angular/platform-browser';
```
Fügen Sie den folgenden Code für das Bootstrapping Ihrer Anwendung hinzu.
```
bootstrapApplication(AppComponent).catch(err => console.error(err));
```

Importieren Sie die Komponente und die erforderlichen Bibliotheken.

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

Die Datei main.ts sollte dem folgenden Codebeispiel entsprechen.

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));

Router und gemeinsame Module hinzufügen

Um den Router und andere gängige Modulfunktionen nutzen zu können, müssen Sie jedes Modul direkt in die Komponente importieren.

Führen Sie in einem Code-Editor die folgenden Aktionen aus.

Wechseln Sie in Ihrem neuen photo-gallery-app-Projektverzeichnis zum Verzeichnis src/app.
Öffnen Sie die Datei app.component.ts.

Importieren Sie die erforderlichen Module in die Komponente.

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

Fügen Sie die Importe in der Komponente hinzu.

imports: [CommonModule, RouterModule],

Die Datei app.component.ts sollte dem folgenden Codebeispiel entsprechen.

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';
}

Speichern Sie die Datei app.component.ts.

Neue eigenständige Anwendung kompilieren und ausführen

Führen Sie in einem Befehlszeilenfenster die folgenden Aktionen aus.

Rufen Sie Ihr neues photo-gallery-app-Projektverzeichnis auf.
Geben Sie den folgenden Angular-Befehl ein, um die Anwendung zu kompilieren und auszuführen und einen Webserver zu öffnen. Möglicherweise müssen Sie Ihre IDE schließen, bevor Sie die Anwendung ausführen, um Kompilierungsfehler zu entfernen.
```
ng serve
```

Ihr Entwicklungsteam sollte über Port 4200 ausgeführt werden. Alle vorherigen Fehler sollten verschwinden und die Kompilierung sollte erfolgreich sein. Gut gemacht! Sie haben erfolgreich eine Angular-Anwendung erstellt, die ohne Modul und mit einer eigenständigen Komponente ausgeführt wird.

Als Nächstes verschönern Sie Ihre Anwendung, um einige Fotos anzuzeigen.

4. Fotos anzeigen

Ihre neue Anwendung ist als Fotogalerie konzipiert und sollte einige Fotos anzeigen.

Komponenten sind die zentralen Bausteine für Angular-Anwendungen. Komponenten haben drei Hauptaspekte.

Eine HTML-Datei für die Vorlage
Eine CSS-Datei für die Stile
TypeScript-Datei für das Verhalten der App

Fotos in die App verschieben

Die Bilder werden in der Anwendung bereitgestellt, die Sie zuvor von GitHub heruntergeladen haben.

Rufen Sie das Verzeichnis src/assets des GitHub-Projekts auf.
Kopieren Sie die Dateien und fügen Sie sie in das Verzeichnis analogue in Ihrem photo-gallery-app-Projektverzeichnis ein.

HTML-Vorlage erstellen

Die Datei app.component.html ist die HTML-Vorlagendatei, die mit der Komponente AppComponent verknüpft ist.

Führen Sie in einem Code-Editor die folgenden Aktionen aus.

Wechseln Sie in Ihrem neuen photo-gallery-app-Projektverzeichnis zum Verzeichnis src/app.
Öffnen Sie die Datei app.component.html.
Löschen Sie den gesamten vorhandenen HTML-Code.

Kopieren Sie den HTML-Code aus dem folgenden Codebeispiel und fügen Sie ihn ein.

<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

Speichern Sie die Datei app.component.html.

Stildefinitionsdatei erstellen

Führen Sie in einem Code-Editor die folgenden Aktionen aus.

Wechseln Sie in Ihrem neuen photo-gallery-app-Projektverzeichnis zum Verzeichnis src.
Öffnen Sie die Datei styles.css.

Kopieren Sie den CSS-Code aus dem folgenden Codebeispiel und fügen Sie ihn ein.

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%;
  }
}

Datei styles.css speichern

Indexdatei aktualisieren

Führen Sie in einem Code-Editor die folgenden Aktionen aus.

Wechseln Sie in Ihrem neuen photo-gallery-app-Projektverzeichnis zum Verzeichnis src.
Öffnen Sie die Datei index.html.
Fügen Sie die Schriftart Raleway hinzu, damit sie für alle Seiten übernommen werden kann.
```
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
```
Speichern Sie die Datei index.html.
Speichern Sie den Code und überprüfen Sie Ihren Browser. Wenn der Anwendungsserver ausgeführt wird, werden die Änderungen beim Speichern im Browser angezeigt.
Als Nächstes erstellen Sie eine neue eigenständige Komponente, um Feedback zu senden und mit Jimbo zu chatten. Fahren Sie in diesem Codelab fort, um mehr über Jimbo zu erfahren.

5. Neue eigenständige Komponente hinzufügen

Wie Sie bereits gesehen haben, bieten eigenständige Komponenten eine vereinfachte Möglichkeit zum Erstellen von Angular-Anwendungen, da der Bedarf an NgModules reduziert wird. In den folgenden Abschnitten erstellen Sie eine neue eigenständige Komponente, mit der Nutzer Feedback geben und mit einem virtuellen Kundenservicemitarbeiter chatten können.

Neue eigenständige Komponente erstellen

Verwenden Sie zum Erstellen dieser neuen Komponente wieder die Angular CLI.

Führen Sie in einem Befehlszeilenfenster die folgenden Aktionen aus.

Rufen Sie Ihr neues photo-gallery-app-Projektverzeichnis auf.

Geben Sie den folgenden Angular-Befehl ein, um eine neue Komponente mit dem Namen feedback-and-chat zu erstellen.

ng generate component feedback-and-chat --standalone

In der folgenden Tabelle werden die Bestandteile des Befehls beschrieben.

Teil	Details
`ng`	Definiert alle Angular-Kommandozeilenbefehle für das Angular-Framework
`generate component`	Erstellt das Gerüst für eine neue Komponente
`feedback-and-chat`	Der Name der Komponente
`--standalone`	Weist das Angular-Framework an, eine eigenständige Komponente zu erstellen

Neue eigenständige Komponente importieren

Wenn Sie die neue eigenständige Komponente verwenden möchten, müssen Sie sie zuerst dem Array imports in der Datei app.components.ts hinzufügen.

Da es sich um eine eigenständige Komponente handelt, importieren Sie sie einfach wie ein Modul.

Führen Sie in einem Code-Editor die folgenden Aktionen aus.

Wechseln Sie in Ihrem neuen photo-gallery-app-Projektverzeichnis zum Verzeichnis src/app.
Öffnen Sie die Datei app.component.ts.

Importieren Sie die neue eigenständige Komponente.

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

Aktualisieren Sie die Importe in der Komponente.

imports: [CommonModule, RouterModule, FeedbackAndChatComponent],

Die Datei app.component.ts sollte dem folgenden Codebeispiel entsprechen.

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';
}

Speichern Sie die Datei app.component.ts.

Lazy Loading der Komponente

Wechseln Sie von einem Eager Loading-Paradigma zu einem Lazy Loading-Paradigma, bei dem der Code erst an den Kunden gesendet wird, wenn Sie ihn benötigen. Lazy Loading ist ein guter Ansatz, um die Ladezeit einer Seite zu verkürzen, die Leistung zu verbessern und die Nutzererfahrung zu verbessern. Der Router übernimmt das Lazy Load, das bei einer ngModule und einer eigenständigen Komponente gleich ist.

Mit der Anwendungskomponente verknüpfte HTML-Vorlage aktualisieren

Um die eigenständige Komponente per Lazy Loading zu laden, fügen Sie der Benutzeroberfläche eine Schaltfläche hinzu, mit der die Komponente nur aktiviert wird, wenn ein Nutzer sie auswählt.

Führen Sie in einem Code-Editor die folgenden Aktionen aus.

Wechseln Sie in Ihrem neuen photo-gallery-app-Projektverzeichnis zum Verzeichnis src/app.
Öffnen Sie die Datei app.component.html.

Scrollen Sie zum Ende der Datei und fügen Sie das folgende Codebeispiel hinzu, bevor Sie das article-Element schließen.

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

Die Datei app.component.html sollte dem folgenden Codebeispiel entsprechen.

<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>

Speichern Sie die Datei app.component.html.

Routen konfigurieren

Führen Sie in einem Code-Editor die folgenden Aktionen aus.

Wechseln Sie in Ihrem neuen photo-gallery-app-Projektverzeichnis zum Verzeichnis src.
Öffnen Sie die Datei main.ts.
Importieren Sie die Methode provideRouter und das Routenmodul. Mit Version 14.2.0 von Angular wurde eine neue Methode „deployRouter“ eingeführt, mit der eine Reihe von Routen für die Anwendung konfiguriert werden kann.
```
import { provideRouter, Routes } from '@angular/router';
```

Kopieren Sie das folgende Code-Snippet und fügen Sie es zwischen den Importen und der if-Anweisung ein.

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

Kopieren Sie das folgende Code-Snippet, fügen Sie es ein und ersetzen Sie die Methode bootstrapApplication.

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

Die Datei main.ts sollte dem folgenden Codebeispiel entsprechen.

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));

Speichern Sie die Datei main.ts.

Mit den Chrome-Entwicklertools kompilieren und prüfen

Verwenden Sie die Chrome-Entwicklertools, um zu prüfen, wie das Angular-Framework die Komponente Lazy lädt.

Führen Sie in einem Befehlszeilenfenster die folgenden Aktionen aus.

Rufen Sie Ihr neues photo-gallery-app-Projektverzeichnis auf.
Geben Sie den folgenden Angular-Befehl ein, um die Anwendung zu kompilieren und auszuführen und einen Webserver zu öffnen.
```
ng serve
```
Ihr Entwicklungsteam sollte über Port 4200 ausgeführt werden.

Führen Sie in Ihrem Browser die folgenden Aktionen aus.

Rufen Sie die folgende Seite auf.
```
http://localhost:4200
```
Öffnen Sie die Chrome-Entwicklertools und wählen Sie den Tab Netzwerk aus.
Aktualisiere die Seite, um mehrere Dateien, aber nicht die Komponente „feedback-and-chat“ anzuzeigen.Dein Bildschirm sollte so wie auf dem folgenden Screenshot aussehen.
Wählen Sie die Schaltfläche Erfahren Sie mehr über diese Leute! aus, um zur eigenständigen Komponente zu gelangen.Aus dem Protokoll geht hervor, dass die Komponente nur geladen wird, wenn Sie den vollen Router nutzen. Scrollen Sie zum Ende der Liste, um zu überprüfen, ob die Komponente geladen wurde. Dein Bildschirm sollte jetzt so aussehen wie in der folgenden Abbildung.

6. UI für das Formular hinzufügen

Das Formular zum Senden von Feedback hat drei Eingabefelder auf der Benutzeroberfläche und eine Schaltfläche unten. Die drei Eingabe-UI-Felder sind der vollständige Name, die E-Mail-Adresse des Absenders und die Kommentare.

Zur Unterstützung der Benutzeroberfläche fügen Sie ein formControlName-Attribut in einem input-Element hinzu, das an jedes contactForm-Formularsteuerelement gebunden wird, das mit jedem der drei Eingabe-UI-Felder verknüpft ist.

Formular zur HTML-Vorlage hinzufügen

Fügen Sie der Benutzeroberfläche ein Formular hinzu, damit Nutzer Feedback geben können.

Führen Sie in Ihrem Code-Editor die folgenden Aktionen aus.

Rufen Sie die Datei feedback-and-chat.component.html auf.
Entfernen Sie den vorhandenen HTML-Code.

Kopieren Sie den HTML-Code aus dem folgenden Codebeispiel und fügen Sie ihn ein.

<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>

Speichern Sie die Datei feedback-and-chat.component.html.

Stildatei für das Formular aktualisieren

Führen Sie in Ihrem Code-Editor die folgenden Aktionen aus.

Rufen Sie die Datei feedback-and-chat.component.css auf.

Kopieren Sie den CSS-Code aus dem folgenden Codebeispiel und fügen Sie ihn ein.

/*   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;
  }
}

Speichern Sie die Datei feedback-and-chat.component.css.

UI-Update für das Formular kompilieren

Führen Sie in einem Befehlszeilenfenster die folgenden Aktionen aus.

Rufen Sie Ihr neues photo-gallery-app-Projektverzeichnis auf.
Geben Sie den folgenden Angular-Befehl ein, um die Anwendung zu kompilieren und auszuführen und einen Webserver zu öffnen.
```
ng serve
```
Ihre Anwendung sollte nicht kompiliert werden. Keine Sorge, Sie müssen das Formular binden.
Überprüfen Sie vorerst die folgenden Punkte.
- Mit der formGroup-Property-Bindung binden Sie contactForm an das form-Element und die ngSubmit-Ereignisbindung.
- Die Anweisung FormGroup wartet auf das Sendeereignis, das vom Element form ausgegeben wird. Die Anweisung FormGroup gibt dann ein ngSubmit-Ereignis aus, das Sie an die Callback-Funktion onSubmit binden können.
- In einem späteren Schritt implementieren Sie die Callback-Funktion onSubmit in der Datei feedback-and-chat.component.ts.
Als Nächstes binden Sie das Formular.

7. Ereignisbehandlung zum Formular hinzufügen

Die Benutzeroberfläche für das Formular Feedback geben ist vollständig, es fehlt jedoch die Interaktion. Die Verarbeitung von Nutzereingaben in Formularen ist der Eckpfeiler vieler gängiger Anwendungen.

In einem realen Szenario müssen Sie Geschäftslogik implementieren, um die folgenden Aktionen auszuführen.

Parst die Nutzereingabe aus der gerenderten DOM-Struktur, die der Komponente zugeordnet ist.
Validieren Sie die Nutzereingabe. Verwenden Sie dazu ein Captcha oder eine ähnliche Methode, um Spamming durch Bots zu vermeiden.
Senden Sie eine E-Mail an eine festgelegte E-Mail-Adresse.
Zeigen Sie dem Nutzer eine freundliche Nachricht.

In diesem Codelab implementieren Sie nur die folgenden Aktionen.

Parst die Nutzereingabe aus der gerenderten DOM-Struktur, die der Komponente zugeordnet ist.
Zeigen Sie dem Nutzer eine freundliche Nachricht.

Sie sollten Ihre Fähigkeiten herausfordern und alle vier Maßnahmen umsetzen.

Der Komponente das Modell zum Senden von Nachrichtenformularen hinzufügen

Erstellen Sie das Formularmodell zum Senden von Feedback und fügen Sie es in der Komponentenklasse hinzu. Das Formularmodell bestimmt den Status des Formulars. Der Dienst FormBuilder bietet praktische Methoden zum Erstellen eines UI-Steuerelements.

Führen Sie in Ihrem Code-Editor die folgenden Aktionen aus.

Rufen Sie die Datei feedback-and-chat.component.ts auf.
Importieren Sie den Dienst FormBuilder und das Modul ReactiveModule aus dem Paket @angular/forms. Dieser Dienst bietet praktische Methoden zum Generieren von Steuerelementen. Im nächsten Schritt verwenden wir die inject-Funktion, daher müssen wir diese auch aus @angular/core importieren.
```
import { Component, inject, OnInit } from '@angular/core';
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
```

Importieren Sie das Modul ReactiveFormsModule.

imports: [CommonModule,ReactiveFormsModule],

Entfernen Sie den folgenden Konstruktor.
```
constructor() { }
```
Injizieren Sie den Dienst FormBuilder über die Funktion inject direkt unter der Klassensignatur.
```
private formBuilder = inject(FormBuilder);
```
Verwenden Sie die Methode group aus dem FormBuilder-Dienst, um ein Formularmodell zu erstellen, mit dem der Name, die E-Mail-Adresse und die Kommentare eines Nutzers erfasst werden.
Erstellen Sie das neue Attribut contactForm und legen Sie es mit der Methode group auf ein Formularmodell fest.Das Formularmodell enthält die Felder name, email und comments.
```
contactForm = this.formBuilder.group({
  fullname: '',
  email: '',
  comments: ''
});
```
Definieren Sie eine onSubmit-Methode für die Verarbeitung des Formulars.In einem realen Szenario ermöglicht die onSubmit-Methode dem Nutzer, über eine E-Mail-Nachricht, die an eine festgelegte E-Mail-Adresse gesendet wird, eine Feedbacknachricht an den Fotografen zu senden.In diesem Codelab zeigen Sie die Nutzereingaben an, verwenden die Methode reset, um das Formular zurückzusetzen, und zeigen eine nutzerfreundliche Erfolgsmeldung an.

Fügen Sie die neue Methode onSubmit hinzu und legen Sie die Variable showMsg nach der Initialisierung auf true fest.

showMsg: boolean = false;

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

Die Datei feedback-and-chat.component.ts sollte dem folgenden Codebeispiel entsprechen.

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();
  }
}

Speichern Sie die Datei feedback-and-chat.component.ts.

Modell zum Senden von Feedback-Formularen kompilieren und anzeigen

Führen Sie in einem Befehlszeilenfenster die folgenden Aktionen aus.

Rufen Sie Ihr neues photo-gallery-app-Projektverzeichnis auf.
Geben Sie den folgenden Angular-Befehl ein, um die Anwendung zu kompilieren und auszuführen und einen Webserver zu öffnen.
```
ng serve
```
Ihr Entwicklungsteam sollte über Port 4200 ausgeführt werden.

Führen Sie in Ihrem Browser die folgenden Aktionen aus.

Rufen Sie die folgende Seite auf.
```
http://localhost:4200
```
Öffnen Sie die Chrome-Entwicklertools und wählen Sie den Tab Console aus.
Geben Sie beliebige Werte in die Textfelder Vollständiger Name, E-Mail und Kommentare ein.
Klicken Sie auf die Schaltfläche Senden.Auf der Seite sollte eine Erfolgsmeldung angezeigt werden.
Prüfen Sie, ob die Werte auf dem Tab Console angezeigt werden.Der Bildschirm sollte dem folgenden Screenshot entsprechen.Sie haben den Code erfolgreich implementiert, um ein Formular zum Senden einer Nachricht in die Komponenten-Benutzeroberfläche einzufügen und die Nutzereingaben zu parsen.
Als Nächstes betten Sie ein Chat-Dialogfeld ein, damit die Anwendungsbesucher mit Jimbo sprechen können. Jimbo ist ein Koala, von dem du ein paar interessante Fakten über Wildtiere erfährst.

8. Chat-Dialogfeld hinzufügen

Nutzen Sie Ihre Erfahrung mit dialogorientierten Benutzeroberflächen wie Dialogflow CX oder ähnlichen Plattformen. Ein Dialogflow CX-Agent ist ein virtueller Kundenservicemitarbeiter, der gleichzeitige Unterhaltungen mit Personen abwickelt. Es ist ein Modul für Natural Language Understanding, das die Nuancen der menschlichen Sprache erkennt und den Text oder Audio des Endnutzers während einer Unterhaltung in strukturierte Daten übersetzt, die Apps und Dienste verstehen können.

Es wurde bereits ein Beispiel für einen virtuellen Kundenservicemitarbeiter für Sie erstellt. In diesem Lab fügen Sie der eigenständigen Komponente ein Chat-Dialogfeld hinzu, damit die Nutzer der Anwendung mit dem Bot interagieren können. Für diese Anforderung verwenden Sie Dialogflow Messenger, eine vordefinierte Integration mit einem anpassbaren Dialogfenster. Wenn das Chat-Dialogfeld geöffnet wird, wird es rechts unten auf dem Bildschirm angezeigt und löst den Standard-Begrüßungs-Intent des Kundenservicemitarbeiters aus. Der Bot begrüßt den Nutzer und initiiert eine Unterhaltung.

Mit der folgenden Implementierung werden interessante Fakten über Wildtiere mit dem Nutzer geteilt. Andere Implementierungen für virtuelles Kundenservicepersonal können komplexe Anwendungsfälle für Kunden abdecken (z. B. ein menschlicher Callcenter-Mitarbeiter). Viele Unternehmen verwenden einen virtuellen Kundenservicemitarbeiter als primären Kanal für die Kommunikation mit der Unternehmenswebsite.

Dialogflow Messenger zur Komponente hinzufügen

Wie das Formular sollte auch das Chat-Dialogfeld nur angezeigt werden, wenn die eigenständige Komponente geladen wurde.

Führen Sie in Ihrem Code-Editor die folgenden Aktionen aus.

Rufen Sie die Datei feedback-and-chat.component.ts auf.

Kopieren Sie das df-messenger-Element aus dem folgenden Codebeispiel und fügen Sie es an einer beliebigen Stelle auf der Seite ein.

<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 generiert die Attribute für das Element df-messenger, wenn Sie die Dialogflow Messenger-Integration auswählen.

Attribut	Details
Agent-ID	Vorausgefüllt. Gibt die eindeutige Kennung des Dialogflow-Agents an.
Chattitel	Vorausgefüllt. Gibt den Inhalt an, der oben im Chat-Dialogfeld angezeigt werden soll. Anfangs mit dem Namen Ihres Agents vorausgefüllt, aber Sie sollten ihn anpassen.
df-cx	Gibt an, dass die Interaktion mit einem CX-Agent stattfindet. Legen Sie den Wert auf `true` fest.
Intent	Gibt das benutzerdefinierte Ereignis an, mit dem der erste Intent ausgelöst wird, wenn das Chat-Dialogfeld geöffnet wird.
Sprachcode	Gibt den standardmäßigen Sprachcode für den ersten Intent an.
Standort	Gibt die Region an, in der Sie den Agent bereitstellen.

Speichern Sie die Datei feedback-and-chat.component.ts.

Formularmodell zum Senden von Feedback anzeigen

Führen Sie in einem Befehlszeilenfenster die folgenden Aktionen aus.

Rufen Sie Ihr neues photo-gallery-app-Projektverzeichnis auf.
Geben Sie den folgenden Angular-Befehl ein, um die Anwendung zu kompilieren.
```
ng serve
```
Ihre Anwendung sollte nicht kompiliert werden. In der Befehlszeile sollte die folgende Fehlermeldung angezeigt werden.
Als Nächstes fügen Sie ein benutzerdefiniertes Schema hinzu.

Benutzerdefiniertes Schema zur eigenständigen Komponente hinzufügen

Das df-messanger-Element ist kein bekanntes Element. Es ist eine benutzerdefinierte Webkomponente. Die Fehlermeldung vom Angular-Framework deutet darauf hin, dass Sie beiden eigenständigen Komponenten ein CUSTOM_ELEMENTS_SCHEMA hinzufügen müssen, um die Meldung zu unterdrücken.

Führen Sie in Ihrem Code-Editor die folgenden Aktionen aus.

Rufen Sie die Datei feedback-and-chat.component.ts auf.

Importieren Sie das CUSTOM_ELEMENTS_SCHEMA-Schema.

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

Fügen Sie CUSTOM_ELEMENTS_SCHEMA der Liste der Schemas hinzu.

schemas: [CUSTOM_ELEMENTS_SCHEMA]

Die Datei feedback-and-chat.component.ts sollte dem folgenden Codebeispiel entsprechen.

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]
})

...

Die Webkomponente „df-messanger“ erfordert ein JavaScript, das nur beim Laden der Feedback- und Chat-Komponente eingeschleust werden sollte. Zu diesem Zweck fügen wir der ngOnInit()-Methode den entsprechenden Code hinzu, der das Chat-Skript lädt, das zum Aktivieren des -Elements erforderlich ist.

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);
}

Speichern Sie die Datei feedback-and-chat.component.ts.

Kompilieren Sie das aktualisierte Chat-Dialogfeld und zeigen Sie es an.

Führen Sie in einem Befehlszeilenfenster die folgenden Aktionen aus.

Rufen Sie Ihr neues photo-gallery-app-Projektverzeichnis auf.
Geben Sie den folgenden Angular-Befehl ein, um die Anwendung zu kompilieren und auszuführen und einen Webserver zu öffnen.
```
ng serve
```
Ihr Entwicklungsteam sollte über Port 4200 ausgeführt werden.

Führen Sie in Ihrem Browser die folgenden Aktionen aus.

Rufen Sie die folgende Seite auf.
```
http://localhost:4200
```
Unten auf der Seite sollte ein Chatsymbol angezeigt werden.
Wähle das Symbol aus und interagiere mit Jimbo.Jimbo liefert coole Fakten über Tiere.
Die Anwendung ist voll funktionsfähig.

9. Anwendung in Google App Engine bereitstellen

Die Anwendung wird lokal auf Ihrem Computer ausgeführt. Im nächsten und letzten Schritt dieses Codelab stellen Sie das Codelab in Google App Engine bereit.

Weitere Informationen zu Google App Engine finden Sie unter App Engine.

Umgebung für Google App Engine einrichten

Wenn Sie alle der folgenden Bedingungen bereits erfüllen, überspringen Sie die nächsten Schritte und stellen Sie die Anwendung bereit.

Cloud-Projekt mit App Engine erstellt
Die Cloud Build API wurde aktiviert
Google Cloud CLI installiert

Führen Sie die folgenden Aktionen aus.

Melden Sie sich in Ihrem Gmail- oder Google Workspace-Konto an. Erstellen Sie ein Google-Konto, falls Sie noch keines haben.
Aktivieren Sie die Abrechnung in der Cloud Console, damit Sie Cloud-Ressourcen und APIs verwenden können. Weitere Informationen finden Sie unter Selfservice-Cloud-Rechnungskonto erstellen, ändern oder schließen.
Erstellen Sie ein Google Cloud-Projekt für Ihre App Engine-Anwendungsressourcen und andere Google Cloud-Ressourcen. Weitere Informationen finden Sie unter Projekte erstellen und verwalten.
Aktivieren Sie die Cloud Build API in der Cloud Console. Weitere Informationen finden Sie unter Zugriff auf die API aktivieren.
Installieren Sie die Google Cloud CLI und das gcloud-Befehlszeilentool. Weitere Informationen finden Sie unter gcloud CLI installieren.
Initialisieren Sie die Google Cloud CLI und achten Sie darauf, dass gcloud für die Verwendung des Google Cloud-Projekts konfiguriert ist, in dem Sie die Bereitstellung vornehmen möchten. Weitere Informationen finden Sie unter gcloud CLI initialisieren.

Eigenständige Anwendung erstellen

Führen Sie in einem Befehlszeilenfenster die folgenden Aktionen aus.

Rufen Sie Ihr neues photo-gallery-app-Projektverzeichnis auf.
Geben Sie den folgenden Angular-Befehl ein, um eine produktionsreife Version der Anwendung zu kompilieren und zu erstellen.
```
ng build
```

Die produktionsreife Version der Anwendung wird im Unterverzeichnis dist Ihres Projektverzeichnisses photo-gallery-app erstellt.

10. Anwendung mit dem Express.js-Framework bereitstellen

Im Beispielcode in diesem Codelab wird zur Verarbeitung von HTTP-Anfragen das Express.js-Framework verwendet. Sie können Ihr bevorzugtes Web-Framework verwenden.

Express.js-Framework installieren

Führen Sie in einem Befehlszeilenfenster die folgenden Schritte aus.

Geben Sie den folgenden Befehl ein, um das Express.js-Framework zu installieren.
```
npm install express --save
```

Webserver konfigurieren

Führen Sie in Ihrem Code-Editor die folgenden Aktionen aus.

Rufen Sie Ihr neues photo-gallery-app-Projektverzeichnis auf.
Erstellen Sie eine neue server.js-Datei.

Kopieren Sie den folgenden Code und fügen Sie ihn ein.

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}`);
});

Speichern Sie die Datei server.js.

Webserver anhängen

Führen Sie in Ihrem Code-Editor die folgenden Aktionen aus.

Rufen Sie Ihr neues photo-gallery-app-Projektverzeichnis auf.
Öffnen Sie die Datei package.json.

Ändern Sie den Startbefehl so, dass der Knoten in der Datei server.js ausgeführt wird.

"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"
  },

Das Attribut start ist der Einstiegspunkt für Ihre Anwendung.

Speichern Sie die Datei package.json.

App Engine konfigurieren

Führen Sie in Ihrem Code-Editor die folgenden Aktionen aus.

Rufen Sie Ihr neues photo-gallery-app-Projektverzeichnis auf.
Erstellen Sie eine neue app.yaml-Datei.
Kopieren Sie den folgenden Code und fügen Sie ihn ein.
```
runtime: nodejs16
service: default
```
Die Informationen in der Datei app.yaml legen die Konfiguration für App Engine fest. Sie müssen nur die Laufzeit und den Dienst angeben.
Speichern Sie die Datei app.yaml.

gcloud-Ignorieren-Liste aktualisieren

Damit Ihr node_modules-Verzeichnis nicht hochgeladen wird, erstellen Sie eine .gcloudignore-Datei. Die in Ihrer .gcloudignore-Datei aufgeführten Dateien wurden nicht hochgeladen.

Führen Sie in Ihrem Code-Editor die folgenden Aktionen aus.

Rufen Sie Ihr neues photo-gallery-app-Projektverzeichnis auf.
Erstellen Sie eine neue .gcloudignore-Datei.

Kopieren Sie den folgenden Code und fügen Sie ihn ein.

# 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/

Speichern Sie die Datei .gcloudignore.

Anwendung initialisieren

Initialisieren Sie die Anwendung vor dem Bereitstellen mit Ihrem Projekt und wählen Sie eine verknüpfte Region aus.

Führen Sie in einem Befehlszeilenfenster die folgenden Aktionen aus.

Rufen Sie Ihr neues photo-gallery-app-Projektverzeichnis auf.
Geben Sie den folgenden Befehl ein, um die Anwendung zu initialisieren.
```
gcloud app create --project=[YOUR_PROJECT_ID]
```
Wählen Sie in der Eingabeaufforderung die Region aus, in der sich Ihre App Engine-Anwendung befinden soll.

Anwendung bereitstellen

Führen Sie in einem Befehlszeilenfenster die folgenden Aktionen aus.

Rufen Sie Ihr neues photo-gallery-app-Projektverzeichnis auf.
Geben Sie den folgenden Befehl ein, um die Anwendung bereitzustellen.
```
gcloud app deploy --project=[YOUR_PROJECT_ID]
```
Bestätigen Sie die Aktion in der Eingabeaufforderung.Nachdem der gcloud-Bereitstellungsbefehl erfolgreich ausgeführt wurde, wird eine URL für den Zugriff auf Ihre Anwendung angezeigt.
Geben Sie den folgenden Befehl ein, um einen neuen Tab in Ihrem Browser zu öffnen.
```
gcloud app browse
```

11. Glückwunsch

Glückwunsch! Sie haben mit Angular Version 14 eine Beispielfotogalerie erstellt und erfolgreich in App Engine bereitgestellt.

Sie haben die Funktion für eigenständige Komponenten und Lazy Loading getestet. Sie haben eine formularbasierte Funktion zum Senden von Nachrichten entwickelt, um Feedback und Kommentare zu geben. Außerdem haben Sie mithilfe von Dialogflow Messenger erfolgreich einen Chatdialog mit einem virtuellen Kundenservicemitarbeiter in Dialogflow CX hinzugefügt. Gut gemacht!

Nächste Schritte

Nachdem Sie die grundlegende Anwendung nun fertiggestellt haben, können Sie sie mithilfe der folgenden Ideen verbessern.

Über das Formular wird kein Feedback gesendet. Refaktorieren Sie es so, dass die Geschäftslogik zum Senden einer E-Mail hinzugefügt wird.
In einem realen Szenario sollten Sie die Nutzereingabe validieren und ein Captcha oder eine ähnliche Methode einbinden, um Spamming durch Bots zu vermeiden.
Neuen Agent erstellen und dialogorientierte Abläufe in Dialogflow CX erstellen

Experimentieren Sie weiter mit dem Angular-Framework und haben Sie Spaß dabei.

Cloud-Projekt bereinigen und löschen

Sie können Ihr Cloud-Projekt behalten oder es löschen, um die Abrechnung für alle im Projekt verwendeten Ressourcen zu beenden.

Führen Sie in Ihrem Browser die folgenden Aktionen aus.

Melden Sie sich in Ihrem Gmail- oder Google Workspace-Konto an.
Wählen Sie in der Google Cloud Console die Seite IAM & Admin-Einstellungen.
Klicken Sie auf der Seite IAM & Admin.Wählen Sie den Tab Ressourcen verwalten aus.
Gehen Sie auf der Seite Ressourcen verwalten zu dem Projekt, das Sie löschen möchten, und wählen Sie es aus. Klicken Sie auf die Schaltfläche Löschen, um ein Dialogfeld zu öffnen.
Geben Sie im Dialogfeld die Projekt-ID ein. Wählen Sie die Schaltfläche Beenden aus, um das Projekt zu löschen.

Knotenversion	Unterstützt von Angular
14.15 oder höher	Unterstützt
16.10 oder höher	Unterstützt
18.1.0	Nicht unterstützt