Suchen und Finden
Service
Angular - Das umfassende Handbuch
Christoph Höller
Verlag Rheinwerk Computing, 2022
ISBN 9783836282451 , 1016 Seiten
3. Auflage
Format ePUB
Kopierschutz Wasserzeichen
1.2 Hallo Angular
Sie haben nun alle notwendigen Werkzeuge für die Implementierung Ihrer ersten Angular-Anwendung zur Hand.
Bevor es in Abschnitt 1.3, »Die Blogging-Anwendung«, an Ihre erste »echte« Applikation geht, stelle ich Ihnen zunächst ganz klassisch die Grundbausteine einer Angular-Anwendung anhand eines Hello-World-Beispiels vor. Laden Sie sich hierfür, falls noch nicht geschehen, zunächst die Beispielquelltexte von der URL
herunter, und entpacken Sie diese in einen beliebigen Ordner auf Ihrer Festplatte. Öffnen Sie anschließend die Kommandozeile, wechseln Sie in den Unterordner kickstart/hello-angular, und führen Sie dort den Befehl
npm install
aus. Der Node Package Manager (npm) installiert nun alle notwendigen Abhängigkeiten, die in der Datei package.json definiert sind. Dieser Vorgang kann insbesondere beim ersten Mal einige Zeit in Anspruch nehmen.
Öffnen Sie das Projekt nun in Ihrer Entwicklungsumgebung. Falls Sie sich für Visual Studio Code entschieden haben, klicken Sie einfach auf File • Open Folder und wählen das entsprechende Verzeichnis aus. Sie sollten nun etwa die in Abbildung 1.1 dargestellte Ansicht sehen.
Zugegebenermaßen wirkt die Struktur für ein »Hello World«-Projekt ziemlich umfangreich – aber keine Angst: Sie werden ein solches Projekt mit großer Wahrscheinlichkeit niemals von Hand aufsetzen müssen. Wie Sie an der im Ordner liegenden Datei angular.json erkennen können, basiert die hier vorgestellte Anwendung auf dem Angular-Command-Line-Interface (CLI), das ich Ihnen im folgenden Kapitel noch im Detail vorstellen werde.
Hier soll es aber zunächst einmal um die Kernbestandteile einer Angular-Applikation gehen. Im Wesentlichen besteht die hier vorgestellte Anwendung aus den beiden Dateien app.module.ts und app.component.ts im app-Ordner. Zusätzlich dient die Datei main.ts als Startpunkt der Applikation (dazu lesen Sie mehr in Abschnitt 1.2.4).
Abbildung 1.1 Verzeichnisstruktur der Hello-World-Anwendung
Öffnen Sie zunächst die eigentliche »Anwendungslogik« in der Datei app.component.ts:
@Component({
selector: 'app-root',
template: `Hallo {{name}}!`
})
export class AppComponent {
name: string;
constructor() {
this.name = 'Angular';
}
}
Listing 1.1 »app.component.ts«: Ihre erste Angular-Komponente
Tada! Sie sehen gerade Ihre erste Angular-Komponente vor sich.
Hinweis zur Benennung von Komponenten-Dateien
Bei der Benennung von Komponenten-Dateien hat es sich als gute Praxis etabliert, diese mit der Endung .component.ts zu versehen. Auf diese Weise erkennen Sie bereits am Namen, dass die Datei eine Komponente enthält. Wie Sie im folgenden Kapitel sehen werden, unterstützt das Angular-CLI Sie bei der Einhaltung dieser Regeln, indem es die passenden Generatoren bereitstellt.
Sollten Sie in der Vergangenheit mit reinem JavaScript auf Basis von ECMAScript 5 gearbeitet haben, werden Sie in diesem Listing vermutlich direkt eine Reihe von Syntaxelementen entdecken, die Ihnen unbekannt vorkommen. Hierbei handelt es sich um TypeScript, eine von Microsoft entwickelte Programmiersprache, die JavaScript unter anderem um Konzepte wie Typsicherheit, Klassen oder Annotationen erweitert. TypeScript ist dabei ein »Superset« von JavaScript.
TypeScript und ECMAScript
Ich werde in den folgenden Abschnitten immer wieder von ECMAScript- und TypeScript-Konzepten sprechen. Dies kann am Anfang etwas verwirrend sein, und ich werde im weiteren Verlauf noch näher auf die genaue Differenzierung der beiden Sprachen bzw. Sprachstandards eingehen.
Für den Anfang reicht es aber, wenn Sie wissen, dass ECMAScript den Sprachstandard von JavaScript beschreibt. Dieser Standard wird jedes Jahr um neue Sprach-Bestandteile ergänzt. So wurde die Unterstützung von Klassen beispielsweise mit ECMAScript 2015 zum Standard hinzugefügt. Die async/await-Syntax war Teil von ECMAScript 2020.
TypeScript ist in diesem Zusammenhang eine eigenständige Sprache, die zwar auf dem ECMAScript-Standard (und damit auf JavaScript) aufbaut, diese aber unter anderem um Typ-Sicherheit und Dekoratoren erweitert.
Lassen Sie sich nicht von den einzelnen Begriffen verwirren, sondern freuen Sie sich darauf, die neuen Technologien im Einsatz zu sehen. Im Anhang dieses Buches finden Sie im Übrigen eine detaillierte Vorstellung der wichtigsten Sprachelemente von ECMAScript 2015 bis 2021 und TypeScript.
Im Folgenden wird ECMAScript übrigens manchmal mit »ES« abgekürzt, sodass Sie dann etwas wie »ES2015« lesen.
Wie Sie in Listing 1.1 bereits erkennen können, besteht die Komponente aus zwei Teilen:
-
aus dem eigentlichen Komponenten-Code, der durch eine TypeScript-Klasse repräsentiert wird, sowie
-
aus dem Decorator (@Component), der die Konfiguration und die Anmeldung der Komponente beim Angular-Framework übernimmt.
In Kapitel 3, »Komponenten und Templating: der Angular-Sprachkern«, werden Sie Komponenten und deren weitere Konfigurationsmöglichkeiten noch im Detail kennenlernen.
Doch schauen wir uns die Komponente Schritt für Schritt gemeinsam an. Der erste Ausschnitt, der Ihnen vermutlich neu sein wird, ist die import-Anweisung. Mithilfe der Zeile
importieren Sie den Decorator Component aus dem Modul '@angular/core'. Das import-Schlüsselwort ist Teil der ES2015-Modulsyntax – einer der zentralen Neuerungen aus dem neuen JavaScript-Standard ECMAScript 2015. Im weiteren Verlauf des Buches werden Sie noch tiefergehende Erfahrungen mit der Arbeit mit Modulen sammeln. Zunächst können Sie sich ES2015-Module aber als eine Möglichkeit vorstellen, Ihren Code in gekapselten Codebausteinen zu verwalten und diese bei Bedarf dynamisch zu laden. Durch die obige import-Anweisung haben Sie nun also Zugriff auf die importierte Klasse Component und können diese in Ihrer Komponente verwenden.
1.2.1 Komponenten konfigurieren
Der nächste Baustein ist der Code-Block:
selector: 'app-root',
template: `
Hallo {{name}}!
`
})
Listing 1.2 Der »Component«-Ausschnitt aus Listing 1.1
Bei diesem Element handelt es sich um einen TypeScript-Decorator. Mithilfe von Decorators können Sie Ihre Klassen um zusätzliche Informationen – sogenannte Meta-Daten – erweitern. Angular nutzt diese Meta-Daten anschließend, um die lauffähige Applikation zu erzeugen. Der @Component-Decorator ist in diesem Fall die zentrale Stelle zur Konfiguration Ihrer Komponenten.
Konkret teilen Sie Angular über die selector-Eigenschaft der Annotation mit, dass Ihre Komponente über das
Das Selektor-Präfix
Bei der Definition der selector-Eigenschaft empfiehlt es sich, diese mit einem Präfix zu versehen, um Namenskollisionen mit anderen Bibliotheken zu vermeiden.
Das hier verwendete Präfix app- ist natürlich nur bedingt sinnvoll. Vielmehr sollten Sie Ihre persönlichen Initialen (für wiederverwendbare Komponenten) oder eine Abkürzung für Ihr aktuelles Projekt verwenden. Daher werde ich für wiederverwendbare Komponenten ab jetzt das Präfix ch- als Abkürzung meines Namens verwenden. Für das durchgehende Projekt-Manager-Beispiel, das ich Ihnen ab Kapitel 8 vorstellen werde, wird das Präfix pjm- genutzt. Auf diese Weise können Sie auch im HTML-Code leicht erkennen, welche Komponente Sie an der jeweiligen Stelle verwenden. Das Angular-CLI unterstützt Sie auch an dieser Stelle, indem es alle generierten Komponenten mit dem voreingestellten Selektor-Präfix versieht.
Mithilfe der template-Eigenschaft konfigurieren Sie schließlich, dass bei der Instanziierung der Komponente das hinterlegte Template gerendert werden soll.
Außer der Konfiguration des Selektors und des zu rendernden Templates bietet der @Component-Decorator noch eine Reihe weiterer Konfigurationsmöglichkeiten, z. B. um die Schnittstelle der Komponente zu definieren. Diese Möglichkeiten werde ich Ihnen im weiteren Verlauf dieses Kapitels sowie im Detail...
