Höller Angular

Das umfassende Handbuch
3. Auflage 2022
ISBN: 978-3-8362-8245-1
Verlag: Rheinwerk
Format: EPUB
Kopierschutz: 0 - No protection

E-Book, Deutsch, 1016 Seiten

Reihe: Rheinwerk Computing

Alles, was Sie über die Angular-Entwicklung wissen sollten - zum Lernen und Nachschlagen. Christoph Höller macht Sie mit allen relevanten Technologien, Standards und Kernbestandteilen des Angular-Frameworks vertraut. Ein durchgehendes Anwendungsbeispiel führt Ihnen die Komponenten praxisnah vor und zeigt, wie Sie Angular für eigene Projekte professionell einsetzen. Inkl. Material Design sowie aller neuen Features und Komponenten.

Aus dem Inhalt:

• Angular-Kickstart
• Komponenten & Direktiven
• Pipes, Services, Dependency-Injection
• Angular-CLI
• Modularisierung
• Formulare
• HTTP-Anbindung
• Echtzeitunterstützung
• Internationalisierung
• Animationen
• Performance-Optimierung
• ECMAScript, TypeScript, RxJS
• Material Design
• NPM-Libraries und Mono-Repos
• WebComponents
• Server-Side Rendering

Christoph Höller ist selbstständiger IT-Consultant. Seine fachlichen Schwerpunkte sind die Konzeption und Implementierung hochverfügbarer Unternehmensapplikationen auf Basis des Java-EE-Stacks, die Entwicklung von responsiven Webapplikationen mit JavaScript, AngularJS und Big-Data-Speichern sowie UML-Modellierung und objektorientierte Softwareentwicklung.

Autoren/Hrsg.

Höller, Christoph

Inhaltsverzeichnis

Materialien zum Buch ... 25  Vorwort ... 27  1.  Angular-Kickstart: Ihre erste Angular-Webapplikation ... 31  1.1 ... Installation der benötigten Software ... 31  1.2 ... Hallo Angular ... 33  1.3 ... Die Blogging-Anwendung ... 43  1.4 ... Zusammenfassung und Ausblick ... 59  2.  Das Angular-CLI: professionelle Projektorganisation für Angular-Projekte ... 61  2.1 ... Das Angular-CLI installieren ... 62  2.2 ... ng new: ein Grundgerüst für die Applikation erstellen ... 62  2.3 ... ng serve: die Anwendung starten ... 69  2.4 ... npm start: Start über die lokale CLI-Version ... 73  2.5 ... ng generate: Komponenten generieren ... 74  2.6 ... ng update: Angular und weitere Abhängigkeiten auf die neueste Version updaten ... 78  2.7 ... ng lint: Linting und der Angular-Style-Guide ... 80  2.8 ... Komponenten- und Ende-zu-Ende-Tests ausführen ... 82  2.9 ... CSS-Präprozessoren verwenden ... 85  2.10 ... Drittanbieter-Bibliotheken einbinden ... 86  2.11 ... ng add: Angular-spezifische Abhängigkeiten zu Ihrer Anwendung hinzufügen ... 87  2.12 ... ng build: deploybare Builds erstellen ... 90  2.13 ... Configurations: Konfiguration unterschiedlicher Build- und Ausführungsumgebungen ... 92  2.14 ... ng deploy: die Anwendung im Web deployen ... 97  2.15 ... Zusammenfassung und Ausblick ... 101  3.  Komponenten und Templating: der Angular-Sprachkern ... 103  3.1 ... Etwas Theorie: der Angular-Komponenten-Baum ... 103  3.2 ... Selektoren: vom DOM-Element zur Angular-Komponente ... 107  3.3 ... Die Templating-Syntax: Verbindung zwischen Applikationslogik und Darstellung ... 110  3.4 ... Komponenten-Schnittstellen definieren: von der einzelnen Komponente zur vollständigen Applikation ... 129  3.5 ... ViewChildren: Zugriff auf Kind-Elemente aus der Komponenten-Klasse ... 140  3.6 ... Content-Insertion: dynamische Komponenten-Hierarchien erstellen ... 143  3.7 ... Der Lebenszyklus einer Komponente ... 153  3.8 ... Zusammenfassung und Ausblick ... 164  4.  Direktiven: Komponenten ohne eigenes Template ... 167  4.1 ... ElementRef und Renderer2: Manipulation von DOM-Eigenschaften eines Elements ... 168  4.2 ... HostBinding und HostListener: Auslesen und Verändern von Host-Eigenschaften und -Events ... 172  4.3 ... Anwendungsfall: Einbinden von Drittanbieter-Bibliotheken ... 174  4.4 ... Anwendungsfall: Accordion-Direktive -- mehrere Kind-Komponenten steuern ... 178  4.5 ... exportAs: Zugriff auf die Schnittstelle einer Direktive ... 181  4.6 ... Zusammenfassung und Ausblick ... 183  5.  Fortgeschrittene Komponenten-Konzepte ... 185  5.1 ... Styling von Angular-Komponenten ... 185  5.2 ... TemplateRef und NgTemplateOutlet: dynamisches Austauschen von Komponenten-Templates ... 196  5.3 ... ViewContainerRef: Komponenten zur Laufzeit hinzufügen ... 204  5.4 ... NgComponentOutlet: dynamisch erzeugte Komponenten noch einfacher verwalten ... 213  5.5 ... ChangeDetection-Strategien: Performance-Boost für Ihre Applikation ... 217  5.6 ... Zusammenfassung und Ausblick ... 230  6.  Standarddirektiven und Pipes: wissen, was das Framework an Bord hat ... 233  6.1 ... Standarddirektiven ... 234  6.2 ... Pipes: Werte vor dem Rendern transformieren ... 247  6.3 ... Zusammenfassung und Ausblick ... 270  7.  Services und Dependency-Injection: lose Kopplung für Ihre Business-Logik ... 273  7.1 ... Grundlagen der Dependency-Injection ... 274  7.2 ... Services in Angular-Applikationen ... 276  7.3 ... Das Angular-Dependency-Injection-Framework ... 277  7.4 ... Weitere Provider-Formen ... 284  7.5 ... Der hierarchische Injector-Baum: volle Flexibilität bei der Definition Ihrer Abhängigkeiten ... 288  7.6 ... Treeshakable-Providers: der DI-Mechanimus auf den Kopf gestellt ... 296  7.7 ... Sichtbarkeit und Lookup von Dependencys ... 297  7.8 ... Zusammenfassung und Ausblick ... 304  8.  Template-driven Forms: einfache Formulare auf Basis von HTML ... 307  8.1 ... Grundlagen zu Formularen: template-driven oder reaktiv? ... 308  8.2 ... Das erste Formular: Übersicht über die Forms-API ... 309  8.3 ... NgModel im Detail: Two-Way-Data-Binding oder nicht? ... 315  8.4 ... Kurzexkurs: Verwendung von Interfaces für die Definition des Applikationsmodells ... 319  8.5 ... Weitere Eingabeelemente ... 322  8.6 ... Verschachtelte Eigenschaften definieren ... 328  8.7 ... Validierungen ... 330  8.8 ... Implementierung der Tags-Liste: wiederholbare Strukturen mit Template-driven Forms ... 347  8.9 ... updateOn: steuern, wann Änderungen übernommen werden ... 351  8.10 ... Zusammenfassung und Ausblick ... 352  9.  Reactive Forms: Formulare dynamisch in der Applikationslogik definieren ... 355  9.1 ... Aktivierung von Reactive Forms für Ihre Applikation ... 356  9.2 ... Das Task-Formular im reaktiven Ansatz ... 356  9.3 ... Formulare und Kontrollelemente auf Änderungen überwachen ... 377  9.4 ... Fallbeispiel: Umfragebogen -- Formulare komplett dynamisch definieren ... 378  9.5 ... ControlValueAccessor: eigene Eingabeelemente für die Forms-API implementieren ... 385  9.6 ... Zusammenfassung und Ausblick ... 394

10.  Routing: Navigation innerhalb der Anwendung ... 397  10.1 ... Project-Manager: die Beispielanwendung ... 398  10.2 ... Die erste Routenkonfiguration: das Routing-Framework einrichten ... 399  10.3 ... Location-Strategien: »schöne URLs« vs. »Routing ohne Server-Konfiguration« ... 404  10.4 ... ChildRoutes: verschachtelte Routenkonfigurationen erstellen ... 407  10.5 ... RouterLinkActive: Styling des aktiven Links ... 413  10.6 ... Routing-Parameter: dynamische Adresszeilenparameter auswerten ... 416  10.7 ... Aus der Anwendungslogik heraus navigieren ... 427  10.8 ... Routing-Guards: Routen absichern und die Navigation generisch beeinflussen ... 429  10.9 ... Redirects und Wildcard-URLs ... 436  10.10 ... Data: statische Metadaten an Routen hinterlegen ... 439  10.11 ... Resolve: dynamische Daten über den Router injizieren ... 439  10.12 ... Der Title-Service: den Seitentitel verändern ... 442  10.13 ... Router-Tree und Router-Events: generisch auf Seitenwechsel reagieren ... 444  10.14 ... Location: direkte Interaktion mit der Adresszeile des Browsers ... 447  10.15 ... Mehrere RouterOutlets: maximale Flexibilität beim Routing ... 449  10.16 ... Zusammenfassung und Ausblick ... 455

11.  HTTP: Anbindung von Angular-Applikationen an einen Webserver ... 457  11.1 ... Die Server-Applikation ... 458  11.2 ... Das Angular-HTTP-Modul verwenden ... 462  11.3 ... Der erste GET-Request: Grundlagen zur HTTP-API ... 462  11.4 ... Asynchrone Service-Schnittstellen modellieren: Anpassung des TaskService ... 466  11.5 ... Die AsyncPipe: noch eleganter mit asynchronen Daten arbeiten ... 468  11.6 ... HttpParams: elegant dynamische Suchen definieren ... 469  11.7 ... Die observe-Eigenschaft: die komplette HttpResponse auswerten ... 472  11.8 ... POST, PUT, DELETE, PATCH und HEAD: Verwendung der weiteren HTTP-Methoden ... 474  11.9 ... JSONP ... 482  11.10 ... Zusammenfassung und Ausblick ... 486

12.  Reaktive Architekturen mit RxJS ... 489  12.1 ... Kurzeinführung in RxJS ... 490  12.2 ... Implementierung einer Typeahead-Suche ... 498  12.3 ... Reaktive Datenarchitekturen in Angular-Applikationen ... 507  12.4 ... Anbindung von Websockets zur Implementierung einer Echtzeitanwendung ... 524  12.5 ... ChangeDetectionStrategy.OnPush: Performance-Schub durch die reaktive Architektur ... 530  12.6 ... Zusammenfassung und Ausblick ... 531

13.  Komponenten- und Unit-Tests: das Angular-Testing-Framework ... 533  13.1 ... Karma und Jasmine: Grundlagen zu Unit- und Komponenten-Tests in Angular-Anwendungen ... 534  13.2 ... Der erste Unit-Test: einfache Klassen und Funktionen testen ... 537  13.3 ... Isolierte Komponenten testen: Grundlagen zu Komponenten-Tests mit dem Angular-Testing-Framework ... 543  13.4 ... Mocks und Spies: Komponenten mit Abhängigkeiten testen ... 549  13.5 ... Services und HTTP-Backends testen ... 555  13.6 ... Formulare testen ... 560  13.7 ... Direktiven und ngContent-Komponenten testen ... 566  13.8 ... waitForAsync und fakeAsync: mehr Kontrolle über asynchrone Tests ... 569  13.9 ... Routing-Funktionalität testen ... 572  13.10 ... Die Tests auf Ihrem Build-Server ausführen ... 576  13.11 ... Zusammenfassung und Ausblick ... 577

14.  Cypress: komfortable Integrationstests für Ihre Anwendung ... 581  14.1 ... Cypress zum Projekt hinzufügen und ausführen ... 582  14.2 ... Cypress lokal und auf Ihrem Build-Server ausführen ... 583  14.3 ... Cypress konfigurieren ... 587  14.4 ... Cypress-Grundlagen: Ihre ersten eigenen Cypress-Tests ... 590  14.5 ... Selektoren, Interaktion mit Elementen und weitere Assertion-Typen: den Tasks-Bereich testen ... 594  14.6 ... cy.on: auf Browser-Events reagieren ... 601  14.7 ... Intercept: REST-Requests untersuchen und manipulieren ... 602  14.8 ... Custom Commands: Den Funktionsumfang von Cypress mit eigenen Kommandos dynamisch erweitern ... 609  14.9 ... Screenshots und Video-Recordings: sehen, was schiefläuft ... 612  14.10 ... Debugging von Cypress-Tests ... 615  14.11 ... Die Cypress-Beispiele als Dokumentation nutzen ... 619  14.12 ... Zusammenfassung und Ausblick ... 621

15.  NgModule und Lazy-Loading: Modularisierung Ihrer Anwendungen ... 625  15.1 ... Feature-Module: Teilbereiche der Applikation kapseln ... 626  15.2 ... Shared-Modules: gemeinsam genutzte Funktionalität kapseln ... 634  15.3 ... Module per Component: das höchste Level an Modularisierung ... 638  15.4 ... Services und Modularisierung ... 640  15.5 ... Lazy-Loading von Applikationsbestandteilen ... 647  15.6 ... Zusammenfassung und Ausblick ... 651

16.  Internationalisierung: mehrsprachige Angular-Anwendungen implementieren ... 653  16.1 ... Einrichtung des i18n-Frameworks ... 654  16.2 ... ng extract-i18n: automatische Generierung der Message-Datei ... 662  16.3 ... Eigene Übersetzungsschlüssel definieren ... 664  16.4 ... Description und Meaning: Metadaten für Übersetzer übergeben ... 665  16.5 ... Weitere Übersetzungstechniken ... 666  16.6 ... $localize: Texte aus dem TypeScript-Code heraus übersetzen ... 668  16.7 ... Pluralisierung und geschlechtsspezifische Texte ... 670  16.8 ... Zusammenfassung und Ausblick ... 677

17.  Das Animation-Framework: Angular-Anwendungen animieren ... 679  17.1 ... Die erste Animation: Grundlagen zum Animation-Framework ... 680  17.2 ... void und *: spezielle States zum Hinzufügen und Entfernen von DOM-Elementen ... 684  17.3 ... Animationen in Verbindung mit automatisch berechneten Eigenschaften ... 687  17.4 ... Animation-Lifecycles: auf den Start und das Ende von Animationen reagieren ... 689  17.5 ... Keyframes: Definition von komplexen, mehrstufigen Animationen ... 690  17.6 ... Styling von Komponenten, die in Animationen verwendet werden ... 691  17.7 ... Groups und Sequences: mehrere Animationen kombinieren ... 693  17.8 ... Querying: komplexe Komponenten animieren ... 696  17.9 ... Staggering: ausgefeilte Listenanimationen definieren ... 700  17.10 ... Animation von Routing-Vorgängen ... 702  17.11 ... Zusammenfassung und Ausblick ... 707

18.  Vollendet in Form und Funktion: Material Design und Angular Material ... 709  18.1 ... Material Design ... 710  18.2 ... Angular Material ... 725  18.3 ... Zusammenfassung ... 771

19.  NPM-Librarys und Mono-Repos: Funktionalität in Bibliotheken auslagern und per NPM veröffentlichen ... 773  19.1 ... Das Angular-CLI-Projekt einrichten ... 774  19.2 ... Die generierte Bibliothek im Detail ... 777  19.3 ... Die Bibliothek kompilieren und im Demo-Projekt einbinden ... 781  19.4 ... Der Mono-Repo-Ansatz für die Entwicklung von mehreren Webapplikationen ... 784  19.5 ... Die Bibliothek über npm veröffentlichen ... 788  19.6 ... Best Practices für die Implementierung von stylebaren Komponenten ... 794  19.7 ... Zusammenfassung und Ausblick ... 802

20.  Angular Elements: Angular-Komponenten als WebComponents bereitstellen ... 805  20.1 ... Einführung in Custom Elements und Angular Elements ... 806  20.2 ... Angular-Komponenten als WebComponents bereitstellen ... 807  20.3 ... Zoneless-Applications: Angular-Anwendungen unabhängig von Zone.js machen ... 816  20.4 ... Den Build für die WebComponent-Auslieferung optimieren ... 818  20.5 ... Die WebComponent in einem Angular-Projekt verwenden ... 819  20.6 ... Die WebComponent in einem Vue-Projekt verwenden ... 822  20.7 ... Zusammenfassung und Ausblick ... 826

21.  Docker: Die Anwendung im Container deployen ... 829  21.1 ... Deployment über nginx: das Docker-Image erstellen und als Container starten ... 830  21.2 ... Multi-Stage Builds ... 835  21.3 ... Die Anwendung über Umgebungsvariablen konfigurieren ... 840  21.4 ... Zusammenfassung und Ausblick ... 848

22.  Server-Side Rendering: Angular-Anwendungen auf dem Server rendern ... 851  22.1 ... Einführung in Server-Side Rendering (SSR): Grundlagen und Vorteile ... 851  22.2 ... Das Angular-Projekt für das Server-Side Rendering vorbereiten ... 854  22.3 ... isPlatformServer und isPlatformBrowser: Wo bin ich gerade? ... 862  22.4 ... Die State-Transfer-API: geladene Daten vom Server auf den Client transferieren ... 862  22.5 ... Title-Service und Meta-Service: Suchmaschinen-Optimierung und Einbindung in Social-Media-Seiten leicht gemacht ... 867  22.6 ... Notwendige Anpassungen am Project-Manager-Code: Stolperfallen und alternative Lösungsansätze beim Server-Side Rendering ... 870  22.7 ... Die Anwendung in der Cloud deployen ... 876  22.8 ... Zusammenfassung ... 889  Anhang ... 891  A ... ECMAScript 2015 (and beyond) ... 891  B ... Typsicheres JavaScript mit TypeScript ... 947  Index ... 1007

Leseproben

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

www.rheinwerk-verlag.de/5285

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:

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

@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

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

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:

@Component({
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...

Über Autor(innen)

Höller, Christoph
Christoph Höller ist selbstständiger IT-Consultant. Seine fachlichen Schwerpunkte sind die Konzeption und Implementierung hochverfügbarer Unternehmensapplikationen auf Basis des Java-EE-Stacks, die Entwicklung von responsiven Webapplikationen mit JavaScript, AngularJS und Big-Data-Speichern sowie UML-Modellierung und objektorientierte Softwareentwicklung.