Angular in Visual Studio Code verwenden

Angular ist eine populäre Webentwicklungsplattform, die von Google entwickelt und gepflegt wird. Angular verwendet TypeScript als Hauptprogrammiersprache. Der Visual Studio Code-Editor unterstützt TypeScript-IntelliSense und Codenavigation von Haus aus, sodass Sie Angular-Entwicklung betreiben können, ohne weitere Erweiterungen zu installieren.

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

Willkommen bei Angular

In diesem Tutorial verwenden wir die Angular CLI. Um das Befehlszeilen-Interface 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). npm ist in Node.js enthalten, das Sie unter Node.js Downloads herunterladen können.

Tipp: Um zu testen, ob Node.js und npm korrekt auf Ihrem Rechner 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 jetzt eine neue Angular-Anwendung erstellen, indem Sie Folgendes eingeben

ng new my-app

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

Lassen Sie uns unsere Angular-Anwendung kurz 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!!" auf https://:4200 in Ihrem Browser sehen. Wir lassen den Webserver laufen, während wir uns die Anwendung mit VS Code ansehen.

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 eine Syntaxhervorhebung für die verschiedenen Quellcode-Elemente bietet, und wenn Sie den Cursor auf eine Klammer setzen, wird auch die passende Gegenklammer ausgewählt.

IntelliSense

Wenn Sie mit der Maus über Text in der Datei fahren, erhalten Sie von VS Code Informationen zu wichtigen Elementen Ihres Quellcodes. Elemente wie Variablen, Klassen und Angular-Dekoratoren sind nur einige Beispiele, für die Ihnen diese Informationen angezeigt werden.

Sobald Sie anfangen, in app.component.ts zu tippen, sehen Sie intelligente Vorschläge und Code-Snippets.

Sie können auf die Informationsschaltfläche (i) klicken, um ein Flyout mit weiterer Dokumentation zu sehen.

VS Code nutzt den TypeScript-Sprachdienst für Code-Intelligenz (IntelliSense) und verfügt über eine Funktion namens Automatische Typ-Erfassung (ATA). ATA lädt die npm-Typdefinitionsdateien (*.d.ts) für die npm-Module herunter, die in der package.json referenziert sind.

Gehe zu Definition, Peek Definition

Über den TypeScript-Sprachdienst kann VS Code im Editor auch Typdefinitionsinformationen bereitstellen, durch Gehe zu Definition (F12) oder Definition einsehen (⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10)). Öffnen Sie die Datei app.module.ts, setzen Sie den Cursor über AppComponent in der bootstrap-Eigenschaftsdeklaration, klicken Sie mit der rechten Maustaste und wählen Sie Definition einsehen. Ein Peek-Fenster wird geöffnet 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 auf "Hello World" aktualisieren. Gehen Sie zurück zur Datei app.component.ts und ändern Sie den title-String in AppComponent auf "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, aktualisiert die laufende Instanz des Servers die Webseite 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.

Angular debuggen

Um den Angular-Client-seitigen Code zu debuggen, verwenden wir den integrierten JavaScript-Debugger.

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

Haltepunkt setzen

Um einen Breakpoint in app.component.ts zu setzen, klicken Sie auf den Rand links neben den Zeilennummern. Dies setzt einen Breakpoint, der als roter Kreis sichtbar wird.

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, 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 der url von 8080 auf 4200. Ihre launch.json sollte so 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 Browser-Instanz zu öffnen. Der Quellcode, an dem der Breakpoint gesetzt ist, wird beim Start ausgeführt, bevor der Debugger angehängt wurde, sodass der Breakpoint erst erreicht wird, wenn wir die Webseite aktualisieren. Aktualisieren Sie die Seite und Sie sollten Ihren Breakpoint erreichen.

Sie können schrittweise durch Ihren Quellcode gehen (F10), Variablen wie AppComponent untersuchen und den Call-Stack der Client-seitigen Angular-Anwendung sehen.

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

Angular-Profilvorlage

Profile erlauben es Ihnen, schnell zwischen Ihren Erweiterungen, Einstellungen und dem UI-Layout zu wechseln, je nach aktuellem Projekt oder 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 direkt so verwenden oder als Ausgangspunkt für Anpassungen an Ihre eigenen Workflows 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 Aufbau 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 detailliert auf das Debuggen der Unit-Tests des generierten Projekts eingeht.

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 eine Dokumentation und einen Anwendungsgenerator für ein MEAN-Beispielprojekt. Sie müssen MongoDB installieren und starten, aber Sie werden schnell eine MEAN-Anwendung am Laufen haben. VS Code bietet auch großartige MongoDB-Unterstützung über die Azure Databases-Erweiterung.

React

React ist eine Bibliothek zum Erstellen von Benutzeroberflächen und ist minimalistischer als Angular. Wenn Sie ein Beispiel für die Arbeit mit React in VS Code sehen möchten, lesen Sie das Tutorial Using React in VS Code. 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 von Haus aus bietet, können Sie VS Code-Erweiterungen für einen größeren Funktionsumfang installieren.

Klicken Sie auf eine Erweiterungskachel oben, um die Beschreibung und Rezensionen auf dem Marketplace zu lesen.

Um andere 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 "Extension Packs" erstellt, die nützliche Erweiterungen (zum Beispiel einen Linter, Debugger und Snippets) in einem einzigen Download bündeln. Um verfügbare Angular-Erweiterungspakete zu sehen, fügen Sie Ihrem Filter die Kategorie "extension packs" hinzu (angular @category:"extension packs").