Erste Schritte mit Angular

Was ist Angular?

Angular ist ein Framework und eine Entwicklungsplattform, entwickelt mit TypeScript. Es wird verwendet, um Single-Page-Webanwendungen zu erstellen. 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 beim Entwickeln, Bauen, Testen und Aktualisieren Ihres Codes helfen

Beim Erstellen von Anwendungen mit Angular nutzen Sie eine Plattform, die von Einzelentwicklerprojekten bis hin zu Unternehmensanwendungen skalieren kann. Angular ist so konzipiert, dass Updates so einfach wie möglich sind, sodass Sie mit minimalem Aufwand von den neuesten Entwicklungen profitieren 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 beginnen, die Angular-Plattform zu erkunden, sollten Sie den Angular CLI kennenlernen. Der Angular CLI ist die schnellste, einfachste und empfohlene Methode zur Entwicklung von Angular-Anwendungen. Der Angular CLI erleichtert eine Reihe von Aufgaben. Hier sind einige häufig verwendete Befehle:

Sie werden den Angular CLI als wertvolles Werkzeug zum Aufbau Ihrer Anwendungen finden.

Was Sie erstellen werden

Diese Tutorial-Serie führt Sie durch den Aufbau einer To-Do-Liste-Anwendung. Durch diese Anwendung lernen Sie, wie Sie Angular verwenden, um Elemente zu verwalten, zu bearbeiten, hinzuzufügen, zu löschen und zu filtern.

Voraussetzungen

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

• Node.js

  Angular erfordert eine aktive LTS oder Wartungsversion von Node.js. Informationen zu spezifischen Versionsanforderungen finden Sie auf der Seite Versionskompatibilität.

  Weitere Informationen zur Installation von Node.js finden Sie unter 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-Paket-Manager

  Angular, der Angular CLI und Angular-Anwendungen sind von npm-Paketen für viele Funktionen und Merkmale abhängig. Um npm-Pakete herunterzuladen und zu installieren, benötigen Sie einen npm Paketmanager. Diese Anleitung nutzt die npm-Client Kommandozeilenschnittstelle, die mit Node.js standardmäßig installiert wird. Um zu überprüfen, ob Sie den npm-Client installiert haben, führen Sie npm -v in einem Terminalfenster aus.

Erstellen einer Angular-Anwendung

Sie können den Angular CLI verwenden, um Befehle in Ihrem Terminal zum Generieren, Bauen, 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 davon, was der CLI tun soll. Erstellen Sie ein neues Verzeichnis, in dem Sie Ihre App bauen möchten, und wechseln Sie in das Verzeichnis im Terminal. 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 minimale Starter Angular-Anwendung. Die zusätzlichen Flags --routing und --style, und --ssr definieren, wie Navigation und Stile in der Anwendung gehandhabt werden und konfigurieren Rendering auf Serverseite. Dieses Tutorial beschreibt diese Funktionen später ausführlicher.

Das erste Mal, wenn Sie ng ausführen, können Sie gefragt werden, ob Sie die Terminal-Autovervollständigung und Analyse aktivieren möchten. Die Autovervollständigung ist praktisch, weil durch Drücken von TAB beim Eingeben von ng Befehlen mögliche Optionen angezeigt und Argumente automatisch vervollständigt werden.

Sie können auch entscheiden, ob Sie erlauben möchten, dass Analysen zur CLI-Nutzung an die Angular-Pflegenden 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 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 Terminal-Tab oder ein Terminal-Fenster, um Befehle auszuführen, ohne den Server zu stoppen. Wenn Sie irgendwann aufhören möchten, Ihre Anwendung zu bedienen, drücken Sie Strg+c im Terminal, das den ng serve-Befehl ausführt.

Machen Sie sich mit Ihrer Angular-Anwendung vertraut

Die Anwendungsquellen, 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 der CLI automatisch generiert, sind die folgenden:

1. app.component.ts: Auch als die 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 Vorlage bekannt. Die Vorlage 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 auf eine bestimmte Komponente angewendet werden, im Gegensatz zu Ihrer gesamten Anwendung.

Eine Komponente in Angular besteht aus drei Hauptteilen—der Vorlage, 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, Ansicht und Stile, sodass die Anwendung wartungsfreundlicher und skalierbarer ist. Auf diese Weise verwenden Sie von Anfang an bewährte Praktiken.

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

Um mehr über Tests zu erfahren, lesen Sie den Angular-Testleitfaden.

Die Struktur einer Angular-Anwendung

Angular ist mit TypeScript gebaut. TypeScript ist eine Obermenge von JavaScript, was bedeutet, dass jedes gültige JavaScript auch gültiges TypeScript ist. TypeScript bietet Typisierung und eine präzisere Syntax als einfaches JavaScript, was Ihnen ein Werkzeug bietet, um wartbareren Code zu erstellen und Fehler zu minimieren.

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

Der Dekorator

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

Die Klasse

Die Klasse ist der Ort, an dem Sie jede Logik platzieren, die Ihre Komponente benötigt. Dieser Code kann Funktionen, Ereignis-Listener, Eigenschaften und Verweise auf Dienste 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 hat, die Angular mitteilen, wo das HTML und CSS zu finden ist. 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 wird ItemComponent genannt und ihr Selektor ist app-item. Sie verwenden einen Selektor genau wie reguläre HTML-Tags, indem Sie ihn in andere Vorlagen setzen, d.h. <app-item></app-item>. Wenn ein Selektor in einer Vorlage ist, rendert der Browser die Vorlage dieser Komponente, wann immer eine Instanz des Selektors auftritt. Dieses Tutorial führt Sie durch die Erstellung von zwei Komponenten und die Verwendung der einen innerhalb der anderen.

Angulares Komponentenmodell bietet eine starke Kapselung und eine intuitive Anwendungsstruktur. Komponenten machen Ihre Anwendung auch leichter, auf Modulebene zu testen, und können die allgemeine Lesbarkeit Ihres Codes verbessern.

Die HTML-Vorlage

Jede Komponente hat eine HTML-Vorlage, die angibt, wie diese Komponente gerendert wird. Sie können diese Vorlage entweder inline oder per 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 Inline-HTML zu schreiben, verwenden Sie die template-Eigenschaft und schreiben Sie Ihr HTML in Backticks:

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

Angular erweitert HTML um eine zusätzliche Syntax, die es Ihnen ermöglicht, dynamische Werte aus Ihrer Komponente einzufügen. Angular aktualisiert automatisch den gerenderten DOM, wenn sich der Zustand Ihrer Komponente ändert. Eine Verwendung dieser Funktion ist das Einfügen von dynamischem Text, wie im folgenden Beispiel gezeigt.

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

Die doppelten geschweiften Klammern weisen Angular an, den Inhalt zwischen ihnen 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 ihre Vorlage lädt, sieht der Browser Folgendes:

<h1>To do application</h1>

Stile

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

Um die Stile direkt im Komponentendekorator zu inkludieren, 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 einbeziehen 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 leicht wartbar und portabel ist.

Standalone-Komponenten

Es wird empfohlen, Komponenten standalone zu machen, es sei denn, ein Projekt verwendet bereits NgModules (Angular-Module) zur Organisation des Codes. Dieses Tutorial verwendet Standalone-Komponenten, mit denen der Einstieg leichter ist.

Es ist üblich, CommonModule zu importieren, damit Ihre Komponente allgemeine Direktiven und Pipes nutzen 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 {
  // …
}

Zusammenfassung

Das war Ihre erste Einführung in Angular. An diesem Punkt sollten Sie bereit sein, eine Angular-App zu erstellen, und ein grundlegendes Verständnis davon haben, wie Angular funktioniert. Im nächsten Artikel werden wir dieses Wissen vertiefen und beginnen, die Struktur unserer To-Do-Liste-Anwendung aufzubauen.

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