Erste Schritte mit Angular

Angular ist ein Framework und eine Entwicklungsplattform, die auf TypeScript basiert. Es wird zur Erstellung von Single-Page-Webanwendungen verwendet. Als Plattform umfasst Angular:

• Ein komponentenbasiertes Framework zur Erstellung skalierbarer Webanwendungen
• Eine Sammlung gut integrierter Bibliotheken, die eine Vielzahl von Funktionen abdecken, einschließlich Routing, Formularverwaltung, Client-Server-Kommunikation und mehr
• Eine Suite von Entwicklerwerkzeugen, die Ihnen helfen, Ihren Code zu entwickeln, zu erstellen, zu testen und zu aktualisieren

Beim Erstellen von Anwendungen mit Angular nutzen Sie eine Plattform, die von Einzelentwicklerprojekten bis hin zu Unternehmensanwendungen skalierbar ist. Angular ist so konzipiert, dass das Aktualisieren so einfach wie möglich ist, sodass Sie mit minimalem Aufwand die neuesten Entwicklungen nutzen können. Am besten ist, dass das Angular-Ökosystem aus einer vielfältigen Gruppe von über 1,7 Millionen Entwicklern, Bibliotheksautoren und Inhaltserstellern besteht.

Bevor Sie die Angular-Plattform erkunden, sollten Sie den Angular CLI kennen. Der Angular CLI ist der schnellste, einfachste und empfohlene Weg, um Angular-Anwendungen zu entwickeln. Der Angular CLI erleichtert eine Reihe von Aufgaben. Hier sind einige Beispielbefehle, die Sie häufig verwenden werden:

Sie werden feststellen, dass der Angular CLI ein wertvolles Werkzeug für den Aufbau Ihrer Anwendungen ist.

Diese Tutorialreihe führt Sie durch den Aufbau einer Aufgabenlistenanwendung. Über diese Anwendung werden Sie lernen, wie Sie mit Angular Elemente verwalten, bearbeiten, hinzufügen, löschen und filtern können.

Um Angular auf Ihrem lokalen System zu installieren, benötigen Sie Folgendes:

• Node.js

  Angular erfordert eine aktive LTS- oder Wartungs-LTS Version von Node.js. Für Informationen zu spezifischen Versionsanforderungen siehe die Version-Kompatibilität Seite.

  Für weitere Informationen zur Installation von Node.js siehe nodejs.org. Wenn Sie sich nicht sicher sind, welche Version von Node.js auf Ihrem System läuft, führen Sie node -v in einem Terminalfenster aus.

• npm Paketmanager

  Angular, der Angular CLI, und Angular-Anwendungen hängen von npm-Paketen für viele Funktionen und Merkmale ab. Um npm-Pakete herunterzuladen und zu installieren, benötigen Sie einen npm-Paketmanager. Dieser Leitfaden verwendet die Kommandozeilenschnittstelle npm client, die standardmäßig mit Node.js installiert wird. Um zu überprüfen, ob Sie den npm-Client installiert haben, führen Sie npm -v in einem Terminalfenster aus.

Sie können den Angular CLI verwenden, um Befehle in Ihrem Terminal zum Generieren, Erstellen, Testen und Bereitstellen von Angular-Anwendungen auszuführen. Um den Angular CLI global zu installieren, führen Sie den folgenden Befehl in Ihrem Terminal aus:

npm install -g @angular/cli

Alle Angular CLI-Befehle beginnen mit ng, gefolgt von dem, was Sie vom CLI ausgeführt haben möchten. Erstellen Sie ein neues Verzeichnis, in dem Sie Ihre App bauen möchten, und wechseln Sie im Terminal zu diesem Verzeichnis. Verwenden Sie dann den folgenden ng new Befehl, um eine neue Anwendung namens todo zu erstellen:

ng new todo --routing=false --style=css --ssr=false

Der ng new Befehl erstellt eine minimalistische Starter-Angular-Anwendung. Die zusätzlichen Flags, --routing und --style, und --ssr definieren, wie die Navigation und die Stile in der Anwendung behandelt werden, und konfiguriert das serverseitige Rendering. Dieses Tutorial beschreibt diese Funktionen später im Detail.

Beim ersten Ausführen von ng werden Sie möglicherweise gefragt, ob Sie die Terminal-Autovervollständigung und Analysen aktivieren möchten. Autovervollständigung ist praktisch, da beim Eingeben von ng Befehlen durch das Drücken von TAB mögliche Optionen angezeigt und Argumente automatisch vervollständigt werden.

Sie können auch entscheiden, ob Sie zulassen möchten, dass Analysen über die CLI-Nutzung an die Angular-Verwalter bei Google gesendet werden. Um mehr über Analysen zu erfahren, lesen Sie die Angular ng analytics CLI-Dokumentation.

Um Ihre todo Anwendung auszuführen, navigieren Sie mit dem cd Befehl in Ihr neues Projekt und führen Sie ng serve aus:

cd todo
ng serve

Navigieren Sie im Browser zu http://localhost:4200/, um Ihre neue Starter-Anwendung zu sehen. Wenn Sie eine der Quelldateien ändern, wird die Anwendung automatisch neu geladen.

Während ng serve läuft, öffnen Sie einen zweiten Terminaltab oder ein Terminalfenster, um Befehle auszuführen, ohne den Server zu stoppen. Falls Sie zu einem beliebigen Zeitpunkt das Bedienen Ihrer Anwendung beenden möchten, drücken Sie Ctrl+c in dem Terminal, das den ng serve Befehl ausführt.

Die Quelldateien der Anwendung, auf die sich dieses Tutorial konzentriert, befinden sich in src/app:

src/app
├── app.component.css
├── app.component.html
├── app.component.spec.ts
├── app.component.ts
└── app.config.ts

Wichtige Dateien, die vom CLI automatisch generiert werden, sind folgende:

1. app.component.ts: Auch als Klasse bekannt, enthält die Logik für die Hauptseite der Anwendung.
2. app.component.html: Enthält das HTML für AppComponent. Der Inhalt dieser Datei ist auch als Template bekannt. Das Template bestimmt die Ansicht oder das, was Sie im Browser sehen.
3. app.component.css: Enthält die Stile für AppComponent. Sie verwenden diese Datei, wenn Sie Stile definieren möchten, die nur für eine bestimmte Komponente gelten, im Gegensatz zu Ihrer gesamten Anwendung.

Eine Komponente in Angular besteht aus drei Hauptteilen – dem Template, den Stilen und der Klasse. Zum Beispiel bilden app.component.ts, app.component.html und app.component.css zusammen das AppComponent. Diese Struktur trennt die Logik, die Ansicht und die Stile, sodass die Anwendung wartbarer und skalierbarer wird. Auf diese Weise nutzen Sie von Anfang an Best Practices.

Der Angular CLI generiert auch eine Datei für Komponententests namens app.component.spec.ts, aber dieses Tutorial geht nicht auf das Testen ein, daher können Sie diese Datei ignorieren. Wann immer Sie eine Komponente generieren, erstellt der CLI diese Dateien in einem Verzeichnis mit dem von Ihnen angegebenen Namen, und wir werden später ein Beispiel dafür sehen.

Um mehr über das Testen zu erfahren, siehe die Angular Testleitfaden.

Angular ist mit TypeScript gebaut. TypeScript ist eine Obermenge von JavaScript, das bedeutet, dass jeder gültige JavaScript-Code auch gültiger TypeScript-Code ist. TypeScript bietet Typisierung und eine präzisere Syntax als einfaches JavaScript, was Ihnen ein Werkzeug zum Erstellen von wartbarerem Code und zur Minimierung von Fehlern an die Hand gibt.

Komponenten sind die Bausteine einer Angular-Anwendung. Eine Komponente umfasst eine TypeScript-Klasse, die einen @Component() Dekorator hat.

Sie verwenden den @Component() Dekorator, um Metadaten (HTML-Template und Stile) über eine Klasse anzugeben.

Die Klasse ist der Ort, an dem Sie jegliche Logik einfügen, die Ihre Komponente benötigt. Dieser Code kann Funktionen, Event-Listener, Eigenschaften und Referenzen zu Diensten umfassen, um nur einige zu nennen. Die Klasse befindet sich in einer Datei mit einem Namen wie feature.component.ts, wobei feature der Name Ihrer Komponente ist. Sie könnten also Dateien mit Namen wie header.component.ts, signup.component.ts oder feed.component.ts haben. Sie erstellen eine Komponente mit einem @Component() Dekorator, der Metadaten enthält, welche Angular mitteilen, wo sich das HTML und CSS befinden. Eine typische Komponente sieht wie folgt aus:

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

@Component({
  selector: "app-item",
  standalone: true,
  imports: [],
  // the following metadata specifies the location of the other parts of the component
  templateUrl: "./item.component.html",
  styleUrl: "./item.component.css",
})
export class ItemComponent {
  // code goes here
}

Diese Komponente heißt ItemComponent, und ihr Selektor ist app-item. Sie verwenden einen Selektor genau wie reguläre HTML-Tags, indem Sie ihn innerhalb anderer Templates platzieren, z.B. <app-item></app-item>. Wenn ein Selektor in einem Template ist, rendert der Browser das Template dieser Komponente, wann immer eine Instanz des Selektors auftritt. Dieses Tutorial führt Sie durch das Erstellen von zwei Komponenten und das Verwenden einer innerhalb der anderen.

Das Komponentenmodell von Angular bietet eine starke Kapselung und eine intuitive Anwendungsstruktur. Komponenten erleichtern auch das Unit-Testen Ihrer Anwendung und können die Lesbarkeit Ihres Codes insgesamt verbessern.

Jede Komponente hat ein HTML-Template, das erklärt, wie diese Komponente gerendert wird. Sie können dieses Template entweder inline oder durch den Dateipfad definieren.

Um auf eine externe HTML-Datei zu verweisen, verwenden Sie die templateUrl-Eigenschaft:

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
})
export class AppComponent {
  // code goes here
}

Um HTML inline zu schreiben, verwenden Sie die template-Eigenschaft und schreiben Ihr HTML innerhalb von Backticks:

@Component({
  selector: "app-root",
  template: `<h1>To do application</h1>`,
})
export class AppComponent {
  // code goes here
}

Angular erweitert HTML mit zusätzlicher Syntax, die es Ihnen ermöglicht, dynamische Werte aus Ihrer Komponente einzufügen. Angular aktualisiert das gerenderte DOM automatisch, wenn sich der Zustand Ihrer Komponente ändert. Ein Nutzen dieser Funktion ist das Einfügen von dynamischem Text, wie im folgenden Beispiel gezeigt.

<h1>{{ title }}</h1>

Die doppelten geschweiften Klammern instruieren Angular, die darin enthaltenen Inhalte zu interpolieren. Der Wert für title kommt aus der Komponentenkasse:

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

@Component({
  selector: "app-root",
  standalone: true,
  imports: [],
  template: "<h1>{{ title }}</h1>",
  styleUrl: "./app.component.css",
})
export class AppComponent {
  title = "To do application";
}

Wenn die Anwendung die Komponente und ihr Template lädt, sieht der Browser folgendes:

<h1>To do application</h1>

Eine Komponente kann globale Stile aus der styles.css-Datei der Anwendung erben und diese mit eigenen Stilen erweitern oder überschreiben. Sie können komponentenspezifische Stile direkt im @Component() Dekorator schreiben oder den Pfad zu einer CSS-Datei spezifizieren.

Um die Stile direkt im Komponentendekorator einzuschließen, verwenden Sie die styles-Eigenschaft:

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styles: ["h1 { color: red; }"],
})
export class AppComponent {
  // …
}

Typischerweise verwendet eine Komponente Stile in einer separaten Datei. Sie können die styleUrl-Eigenschaft mit dem Pfad zur CSS-Datei als String oder styleUrls mit einem Array von Strings verwenden, wenn es mehrere CSS-Stylesheets gibt, die Sie einbinden möchten:

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrl: "./app.component.css",
})
export class AppComponent {
  // …
}

Mit komponentenspezifischen Stilen können Sie Ihr CSS so organisieren, dass es einfach wartbar und portabel ist.

Es wird empfohlen, Komponenten eigenständig zu machen, es sei denn, ein Projekt verwendet bereits NgModules (Angular-Module), um Code zu organisieren. Dieses Tutorial verwendet eigenständige Komponenten, die einfacher zu beginnen sind.

Es ist üblich, CommonModule zu importieren, damit Ihre Komponente allgemeine Direktiven und Pipes verwenden kann.

import { Component } from "@angular/core";
import { CommonModule } from "@angular/common";

@Component({
  standalone: true,
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrl: "./app.component.css",
  imports: [CommonModule],
})
export class AppComponent {
  // …
}

Das war's für Ihre erste Einführung in Angular. An diesem Punkt sollten Sie bereit sein, eine Angular-Anwendung zu erstellen und ein grundlegendes Verständnis dafür haben, wie Angular funktioniert. Im nächsten Artikel werden wir dieses Wissen vertiefen und damit beginnen, die Struktur unserer Aufgabenlistenanwendung aufzubauen.

• Übersicht: JavaScript-Frameworks und -Bibliotheken
• Weiter