Schritt-für-Schritt-Anleitung zum Erstellen einer Web-App in Angular 8

Blog

Schritt-für-Schritt-Anleitung zum Erstellen einer Web-App in Angular 8

Schritt-für-Schritt-Anleitung zum Erstellen einer Web-App in Angular 8

In diesem Angular 8-Tutorial zeigen wir Ihnen eine einfache und schnelle Möglichkeit, eine Angular-Webanwendung zu erstellen. Dieses Tutorial zeigt nicht nur eine einfache Hello-Welt oder ein standardmäßiges Angular, das die Seite generiert hat, sondern mehr darüber hinaus zeigen wir die Interaktion mit dem Array von Objektdaten in der separaten Datei. Außerdem zeigen wir Ihnen, wie Sie ein grundlegendes Angular-Material, Routing und Navigation mit den Parametern verwenden.



Inhaltsverzeichnis:

  • Schritt 1. Vorbereitung
  • Schritt 2. Erstellen Sie eine Angular 8-Web-App
  • Schritt 3. Erstellen Sie eine Array-of-Objects-Datei
  • Schritt 4. Winkelmaterial installieren
  • Schritt #5. Angular Routing und Navigation hinzufügen
  • Schritt #6. Datenliste anzeigen
  • Schritt #7. Datendetails anzeigen
  • Schritt #8. Google Maps anzeigen
  • Schritt #9. Führen Sie die Angular 8 Web-App aus und testen Sie sie

Der Ablauf dieser Angular-Web-App ist sehr einfach. Zeigen Sie eine Liste der Premier League-Teams wie die Einkaufsliste an, die auf der Seite mit den Teamdetails angeklickt werden kann. Auf der Teamdetailseite gibt es einen Link, um die Position des Teamstadions anzuzeigen. Die folgenden Tools, Frameworks und Bibliotheken oder Module sind für dieses Tutorial erforderlich.

  1. Node.js
  2. Winkel 8
  3. Terminal (Linux/Mac) oder Node-Befehlszeile (Windows)
  4. Texteditor oder IDE (Wir verwenden VSCode)

Im Moment zeigen wir Ihnen nicht, wie Sie den Google Maps-JavaScript-API-Schlüssel einrichten oder abrufen. Auf dieser Website finden Sie ein weiteres Tutorial, das sich mit Google Maps und verwandten Themen befasst.



Beginnen wir mit den wichtigsten Schritten.

Schritt 1. Vorbereitung

Der Vorbereitungsschritt bedeutet, dass wir alle erforderlichen Tools, Frameworks und Module vorbereiten, um mit der Erstellung von Angular Web App von Grund auf zu beginnen. Jetzt erstellen wir eine Angular 8-App mit der Angular-CLI, die Node.js und NPM benötigt, um sie zu installieren oder zu aktualisieren. Stellen Sie sicher, dass Sie Node.js (einschließlich NPM) herunterladen und installieren müssen, bevor Sie Angular CLI installieren oder aktualisieren. Überprüfen Sie mit diesem Befehl die installierten Node.js und NPM.



node -v v10.15.1 npm -v 6.11.3

Geben Sie diesen Befehl ein, um eine Angular-CLI zu installieren oder zu aktualisieren.

sudo npm install -g @angular/cli

Schritt 2. Erstellen Sie eine Angular 8-Web-App

Wir werden eine Angular 8-Web-App mit Angular CLI erstellen. Geben Sie diesen Befehl ein, um die Angular 8-Web-App zu erstellen.

ng new angular-tutorial

Dieser Befehl erstellt eine neue Angular 8-App mit dem Namen |_+_| und übergeben Sie alle Fragen als ‚Y‘, dann installiert die Angular CLI automatisch die erforderlichen NPM-Module. Gehen Sie nach Abschluss zum neu erstellten Angular 8-Ordner und führen Sie die Angular 8-App zum ersten Mal aus.

angular-tutorial

Wenn Sie diese –open-Parameter verwenden, wird Angular 8 automatisch in Ihrem Standard-Webbrowser geöffnet. So sieht die Standardseite von Angular 8 aus.

Angular 8-Tutorial: So erstellen Sie schnell eine Angular-Webanwendung - Angular Page

Schritt 3. Erstellen Sie eine Array-of-Objects-Datei

Wie im ersten Absatz erwähnt, werden wir die Liste der Premier League-Teamdaten anzeigen. Erstellen Sie dazu eine neue Typescript-Datei in |_+_|.

cd ./angular-tutorial ng serve --open

Öffnen und bearbeiten Sie diese Datei und fügen Sie dann diese Zeilen der Typescript-Konstanten hinzu, die ein Array von Objekten enthalten.

src/app/team.ts

Damit Google Maps auf der Angular-Seite funktioniert, fügen Sie schließlich eine Höhe von . hinzu

zum |_+_|. |_+_|

Schritt #9. Führen Sie die Angular 8 Web-App aus und testen Sie sie

Um die Angular 8-Web-App auszuführen, geben Sie wie gewohnt einfach diesen Befehl ein.

touch src/app/team.ts

Die Angular-Web-App wird automatisch im Standardbrowser geöffnet. Die gesamte Angular-Web-App wird so aussehen.

Angular 8 Tutorial: So erstellen Sie schnell eine Angular Web App - Rasterliste
Angular 8 Tutorial: So erstellen Sie schnell eine Angular Web App - Details
Angular 8 Tutorial: So erstellen Sie schnell eine Angular Web App - Google Maps

Das ist das Angular 8 Tutorial: So erstellen Sie schnell eine Angular Web App. Den vollständigen Quellcode finden Sie in unserem GitHub .

Vielen Dank!

#Angular #webdev #webapp #javascript