Erste Schritte mit Angular

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

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

Wenn Sie Anwendungen mit Angular erstellen, nutzen Sie eine Plattform, die von Einzelentwicklerprojekten bis hin zu Unternehmensanwendungen skalierbar ist. Angular ist so konzipiert, dass Updates so einfach wie möglich sind, 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, Bibliothekautoren und Inhaltserstellern besteht.

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

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

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

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. Informationen zu spezifischen Versionsanforderungen finden Sie auf der Seite Version-Kompatibilität.

  Weitere Informationen zur Installation von Node.js finden Sie auf nodejs.org. Wenn Sie unsicher sind, welche Version von Node.js auf Ihrem System läuft, führen Sie node -v in einem Terminalfenster aus.

• npm Paketmanager

  Angular, die Angular CLI und Angular-Anwendungen hängen von npm Paketen für viele Funktionen ab. Um npm-Pakete herunterzuladen und zu installieren, benötigen Sie einen npm-Paketmanager. Dieser Leitfaden verwendet die npm client Kommandozeilenschnittstelle, die standardmäßig mit Node.js installiert wird. Um zu überprüfen, ob der npm-Client installiert ist, 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 davon, was der CLI tun soll. Erstellen Sie ein neues Verzeichnis, in dem Sie Ihre App erstellen 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, sowie --ssr definieren, wie die Navigation und Styles in der Anwendung gehandhabt werden und konfigurieren das serverseitige Rendering. Dieses Tutorial beschreibt diese Funktionen später detaillierter.

Wenn Sie ng zum ersten Mal ausführen, werden Sie möglicherweise gefragt, ob Sie die Autovervollständigung und Analysen im Terminal aktivieren möchten. Die Autovervollständigung ist praktisch, da das Drücken von TAB beim Eingeben von ng-Befehlen mögliche Optionen anzeigt und Argumente automatisch vervollständigt.

Sie können auch entscheiden, ob Sie erlauben möchten, dass Analysen zur Nutzung des CLI an Angular-Wartungsmitarbeiter von Google gesendet werden. Um mehr über Analysen zu erfahren, sehen Sie sich die Angular ng analytics CLI-Dokumentation an.

Um Ihre todo-Anwendung auszuführen, wechseln Sie mit dem Befehl cd 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 Änderungen an einer der Quelldateien vornehmen, lädt die Anwendung automatisch neu.

Während ng serve läuft, öffnen Sie eine zweite Terminal-Registerkarte oder ein Terminalfenster, um Befehle auszuführen, ohne den Server zu stoppen. Wenn Sie zu irgendeinem Zeitpunkt die Bedienung Ihrer Anwendung beenden möchten, drücken Sie im Terminal, das den Befehl ng serve ausführt, Strg+c.

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

Die wichtigsten Dateien, die der CLI automatisch generiert, sind die folgenden:

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 wird auch als Vorlage (Template) bezeichnet. Die Vorlage bestimmt die Ansicht oder das, was Sie im Browser sehen.
3. app.component.css: Enthält die Styles für AppComponent. Sie verwenden diese Datei, wenn Sie Styles 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 – die Vorlage, die Stile und die 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 so, dass die Anwendung besser wartbar und skalierbar ist. Auf diese Weise verwenden Sie von Anfang an bewährte Praktiken.

Der Angular CLI generiert auch eine Datei für Komponententests, die app.component.spec.ts genannt wird, aber dieses Tutorial geht nicht auf das Testen ein, sodass Sie diese Datei ignorieren können. 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 Tests zu erfahren, sehen Sie sich den Angular-Testleitfaden an.

Angular ist mit TypeScript aufgebaut. 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 reines JavaScript, was Ihnen ein Werkzeug bietet, um wartbarer Code zu erstellen und Fehler zu minimieren.

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

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

Die Klasse ist, wo Sie jede Logik unterbringen, die Ihre Komponente benötigt. Dieser Code kann Funktionen, Ereignislistener, Eigenschaften und Verweise auf Services 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. So könnten Sie 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, die Angular mitteilen, wo das HTML und CSS zu finden sind. Eine typische Komponente sieht folgendermaßen aus:

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

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

Diese Komponente wird ItemComponent genannt, und ihr Selektor ist app-item. Sie verwenden einen Selektor ebenso wie reguläre HTML-Tags, indem Sie ihn in andere Vorlagen einfügen, z.B. <app-item></app-item>. Wenn ein Selektor in einer Vorlage erscheint, rendert der Browser die Vorlage dieser Komponente, wann immer eine Instanz des Selektors auftritt. Dieses Tutorial führt Sie durch das Erstellen zweier Komponenten und die Verwendung einer innerhalb der anderen.

Angulas Komponentenmodell bietet eine starke Kapselung und eine intuitive Anwendungsstruktur. Komponenten machen Ihre Anwendung auch einfacher zu unit-testen und können die Lesbarkeit Ihres Codes insgesamt verbessern.

Jede Komponente hat eine HTML-Vorlage, die deklariert, wie diese Komponente gerendert wird. Sie können diese Vorlage entweder inline oder durch einen Dateipfad definieren.

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

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

Um HTML inline zu schreiben, verwenden Sie die Eigenschaft template und schreiben Ihr HTML in 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 automatisch das gerenderte DOM, wenn sich der Status Ihrer Komponente ändert. Eine Verwendung dieser Funktion ist das Einfügen von dynamischem Text, wie im folgenden Beispiel gezeigt.

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

Die doppelt geschweiften Klammern geben Angular die Anweisung, den Inhalt innerhalb der Klammern zu interpolieren. Der Wert für title stammt aus der Komponentenklasse:

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

@Component({
  selector: "app-root",
  standalone: true,
  template: "<h1>{{ title }}</h1>",
  styleUrls: ["./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>

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

Um die Styles direkt im Komponentendekorator einzubinden, verwenden Sie die Eigenschaft styles:

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

Typischerweise verwendet eine Komponente Styles in einer separaten Datei mit der Eigenschaft styleUrls:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

Mit komponentenspezifischen Styles 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 den Code zu organisieren. Dieses Tutorial verwendet selbstständige Komponenten, die einfacher zu starten sind.

Es ist üblich, CommonModule zu importieren, damit Ihre Komponente gängige Direktiven und Pipes verwenden kann. Dieses Tutorial verwendet ngFor und ngIf, daher können wir sicherstellen, dass sie wie folgt verfügbar sind:

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

@Component({
  standalone: true,
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  imports: [CommonModule],
})

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

• Zurück
• Übersicht: Verständnis von clientseitigen JavaScript-Frameworks
• Weiter