Verwendung von Angular in Visual Studio Code

Angular ist eine beliebte Webentwicklungsplattform, die von Google entwickelt und gepflegt wird. Angular verwendet TypeScript als seine Hauptprogrammiersprache. Der Visual Studio Code-Editor unterstützt TypeScript IntelliSense und Code-Navigation ab Werk, sodass Sie Angular-Entwicklung betreiben können, ohne zusätzliche Erweiterungen installieren zu müssen.

Hinweis: Um Ihnen den Einstieg in die Angular-Entwicklung zu erleichtern, können Sie die Angular-Profilvorlage verwenden, die nützliche Erweiterungen, Einstellungen und Codeausschnitte enthält.

Willkommen bei Angular

Für dieses Tutorial verwenden wir die Angular CLI. Um die Befehlszeilenschnittstelle zu installieren und zu verwenden sowie den Angular-Anwendungsserver auszuführen, benötigen Sie die Node.js JavaScript-Laufzeitumgebung und npm (den Node.js-Paketmanager) installiert. npm ist in Node.js enthalten, das Sie von Node.js-Downloads installieren können.

Tipp: Um zu testen, ob Node.js und npm korrekt auf Ihrem Computer installiert sind, können Sie node --version und npm --version eingeben.

Um die Angular CLI zu installieren, geben Sie in einem Terminal oder einer Eingabeaufforderung Folgendes ein

npm install -g @angular/cli

Die Installation kann einige Minuten dauern. Sie können nun eine neue Angular-Anwendung erstellen, indem Sie eingeben

ng new my-app

my-app ist der Name des Ordners für Ihre Anwendung. Der Befehl ng new fordert Sie mit Optionen für die generierte Anwendung auf. Akzeptieren Sie die Standardeinstellungen, indem Sie die Enter-Taste drücken. Dies kann einige Minuten dauern, um die Angular-Anwendung in TypeScript zu erstellen und ihre Abhängigkeiten zu installieren.

Lassen Sie uns unsere Angular-Anwendung schnell ausführen, indem wir in den neuen Ordner navigieren und ng serve eingeben, um den Webserver zu starten und die Anwendung in einem Browser zu öffnen

cd my-app
ng serve

Sie sollten "Welcome to app!!" unter https://:4200 in Ihrem Browser sehen. Wir lassen den Webserver laufen, während wir die Anwendung mit VS Code betrachten.

Um Ihre Angular-Anwendung in VS Code zu öffnen, öffnen Sie ein weiteres Terminal (oder eine Eingabeaufforderung), navigieren Sie zum Ordner my-app und geben Sie code . ein

cd my-app
code .

Syntaxhervorhebung und Klammerabgleich

Erweitern Sie nun den Ordner src\app und wählen Sie die Datei app.component.ts aus. Sie werden feststellen, dass VS Code Syntax-Hervorhebung für die verschiedenen Quellcode-Elemente bietet und, wenn Sie den Cursor auf eine Klammer setzen, die passende Klammer ebenfalls ausgewählt wird.

IntelliSense

Wenn Sie mit der Maus über Text in der Datei fahren, zeigt Ihnen VS Code Informationen zu wichtigen Elementen in Ihrem Quellcode an. Elemente wie Variablen, Klassen und Angular-Dekoratoren sind einige Beispiele, bei denen Ihnen diese Informationen angezeigt werden.

Während Sie in app.component.ts tippen, sehen Sie intelligente Vorschläge und Codeausschnitte.

Sie können auf die Informationstaste (i) klicken, um ein Flyout mit weiteren Dokumentationen anzuzeigen.

VS Code verwendet den TypeScript-Sprachdienst für Code-Intelligenz (IntelliSense) und verfügt über eine Funktion namens Automatische Typenerfassung (ATA). ATA lädt die npm-Typdeklarationsdateien (*.d.ts) für die in package.json referenzierten npm-Module herunter.

Gehe zu Definition, Peek Definition

Über den TypeScript-Sprachdienst kann VS Code auch Typdefinitionsinformationen im Editor über **Gehe zu Definition** (F12) oder **Peek Definition** (⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10)) bereitstellen. Öffnen Sie die Datei app.module.ts und setzen Sie den Cursor auf AppComponent in der Deklaration der bootstrap-Eigenschaft, klicken Sie mit der rechten Maustaste und wählen Sie **Peek Definition**. Ein Peek-Fenster öffnet sich und zeigt die AppComponent-Definition aus app.component.ts.

Drücken Sie die Escape-Taste, um das Peek-Fenster zu schließen.

Hallo Welt

Lassen Sie uns die Beispielanwendung in "Hello World" aktualisieren. Gehen Sie zurück zur Datei app.component.ts und ändern Sie den title-String in AppComponent in "Hello World".

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

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

Sobald Sie die Datei app.component.ts speichern, wird die laufende Instanz des Servers die Webseite aktualisieren und Sie sehen "Welcome to Hello World!!".

Tipp: VS Code unterstützt Auto Save, das standardmäßig Ihre Dateien nach einer Verzögerung speichert. Überprüfen Sie die Option **Auto Save** im Menü **Datei**, um Auto Save zu aktivieren, oder konfigurieren Sie direkt die Benutzereinstellung files.autoSave Einstellungen.

Debugging von Angular

Zum Debuggen des clientseitigen Angular-Codes verwenden wir den integrierten JavaScript-Debugger.

Hinweis: Dieses Tutorial geht davon aus, dass Sie den Edge-Browser installiert haben. Wenn Sie mit Chrome debuggen möchten, ersetzen Sie den Debugger-type durch chrome. Es gibt auch einen Debugger für den Firefox-Browser.

Haltepunkt setzen

Um einen Haltepunkt in app.component.ts zu setzen, klicken Sie in den Bereich links neben den Zeilennummern. Dies setzt einen Haltepunkt, der als roter Kreis sichtbar ist.

Debugger konfigurieren

Wir müssen den Debugger zunächst konfigurieren. Gehen Sie dazu zur Ansicht **Ausführen und Debuggen** (⇧⌘D (Windows, Linux Ctrl+Shift+D)) und wählen Sie den Link **launch.json-Datei erstellen** aus, um eine launch.json-Debugger-Konfigurationsdatei zu erstellen. Wählen Sie **Web-App (Edge)** aus der Dropdown-Liste **Debugger auswählen**. Dies erstellt eine launch.json-Datei in einem neuen .vscode-Ordner in Ihrem Projekt, die eine Konfiguration zum Starten der Website enthält.

Wir müssen eine Änderung für unser Beispiel vornehmen: Ändern Sie den Port von url von 8080 auf 4200. Ihre launch.json sollte wie folgt aussehen

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "msedge",
      "request": "launch",
      "name": "Launch Edge against localhost",
      "url": "https://:4200",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

Drücken Sie F5 oder den grünen Pfeil, um den Debugger zu starten und eine neue Browserinstanz zu öffnen. Der Quellcode, an dem der Haltepunkt gesetzt ist, wird beim Start ausgeführt, bevor der Debugger angehängt wurde, sodass wir den Haltepunkt erst erreichen, wenn wir die Webseite aktualisieren. Aktualisieren Sie die Seite und Sie sollten Ihren Haltepunkt erreichen.

Sie können durch Ihren Quellcode steppen (F10), Variablen wie AppComponent inspizieren und den Call Stack der clientseitigen Angular-Anwendung anzeigen.

Weitere Informationen zum Debugger und seinen verfügbaren Optionen finden Sie in unserer Dokumentation zum Browser-Debugging.

Angular-Profilvorlage

Profile ermöglichen es Ihnen, Ihre Erweiterungen, Einstellungen und UI-Layouts schnell zu wechseln, je nach Ihrem aktuellen Projekt oder Ihrer Aufgabe. Um Ihnen den Einstieg in die Angular-Entwicklung zu erleichtern, können Sie die Angular-Profilvorlage verwenden, ein kuratiertes Profil mit nützlichen Erweiterungen und Einstellungen. Sie können die Profilvorlage unverändert verwenden oder sie als Ausgangspunkt für weitere Anpassungen an Ihre eigenen Arbeitsabläufe nutzen.

Sie wählen eine Profilvorlage über das Dropdown-Menü Profile > Profil erstellen... aus.

Sobald Sie eine Profilvorlage ausgewählt haben, können Sie die Einstellungen und Erweiterungen überprüfen und einzelne Elemente entfernen, wenn Sie sie nicht in Ihr neues Profil aufnehmen möchten. Nach dem Erstellen des neuen Profils basierend auf der Vorlage werden Änderungen an Einstellungen, Erweiterungen oder der Benutzeroberfläche in Ihrem Profil gespeichert.

Beliebte Starter-Kits

In diesem Tutorial haben wir die Angular CLI verwendet, um eine einfache Angular-Anwendung zu erstellen. Es gibt viele großartige Beispiele und Starter-Kits, die Ihnen beim Erstellen Ihrer ersten Angular-Anwendung helfen.

Rezepte

Das VS Code-Team hat Rezepte für komplexere Debugging-Szenarien erstellt. Dort finden Sie das Rezept Debugging with Angular CLI, das ebenfalls die Angular CLI verwendet und detaillierte Informationen zum Debugging der Unit-Tests des generierten Projekts enthält.

MEAN Starter

Wenn Sie ein vollständiges MEAN-Stack-Beispiel (MongoDB, Express, Angular, Node.js) sehen möchten, schauen Sie sich MEAN.JS an. Sie bieten Dokumentation und einen Anwendungsgenerator für ein Beispiel-MEAN-Projekt. Sie müssen MongoDB installieren und starten, aber Sie werden schnell eine MEAN-Anwendung zum Laufen bringen. VS Code bietet auch großartige MongoDB-Unterstützung über die Erweiterung Azure Databases.

React

React ist eine Bibliothek zum Erstellen von Benutzeroberflächen und ist minimaler als Angular. Wenn Sie ein Beispiel dafür sehen möchten, wie React mit VS Code funktioniert, sehen Sie sich das Tutorial React in VS Code verwenden an. Es führt Sie durch die Erstellung einer React-Anwendung und die Konfiguration der launch.json-Datei für den JavaScript-Debugger.

Angular-Erweiterungen

Zusätzlich zu den Funktionen, die VS Code standardmäßig bietet, können Sie VS Code-Erweiterungen für erweiterte Funktionalität installieren.

Klicken Sie auf eine Erweiterungskachel oben, um die Beschreibung und Bewertungen im Marketplace zu lesen.

Um weitere Angular-Erweiterungen zu finden, öffnen Sie die Erweiterungsansicht (⇧⌘X (Windows, Linux Ctrl+Shift+X)) und geben Sie 'angular' ein, um eine gefilterte Liste von Angular-Erweiterungen zu sehen.

Die Community hat auch "Erweiterungspakete" erstellt, die nützliche Erweiterungen bündeln (z. B. einen Linter, Debugger und Snippets) in einem einzigen Download. Um verfügbare Angular-Erweiterungspakete zu sehen, fügen Sie die Kategorie "extension packs" zu Ihrem Filter hinzu (angular @category:"extension packs").