herausgebildet. Bootstrap CSS10 und Semantic UI11 sind zwei bekannte Vertreter dieser Frameworks. Für den BookMonkey wollen wir Semantic UI verwenden. Das Paket ist leichtgewichtig und bringt schlichte und flache UI-Elemente mit. Wir verwenden eine schlanke Version von Semantic UI, die uns lediglich die CSS-Definitionen liefert. Das hat den Vorteil, dass wir in unserem Projekt keine zusätzlichen Abhängigkeiten zu anderen Frameworks haben (z. B. jQuery12).
Zur Installation des Frameworks navigieren wir auf der Konsole in das Hauptverzeichnis
$ npm install semantic-ui-css
Listing 5–7 Semantic UI über NPM installieren
Danach sind alle von uns benötigten Style-Dateien heruntergeladen und befinden sich im Ordner
Damit die Angular CLI die CSS-Dateien beim Build berücksichtigt, müssen wir sie in unser Projekt einbinden. Für diesen Schritt stellt uns die Angular CLI schon das nötige Werkzeug bereit. In der Datei angular.json müssen wir lediglich unter projects → book-monkey → architect →build → options → styles auf die entsprechende Datei im Ordner
"styles": [
"node_modules/semantic-ui-css/semantic.css"
]
Listing 5–8 Globales CSS in die Anwendung einbinden
Wenn wir mit der Angular CLI mit ng serve den Build-Prozess anstoßen, wird das angegebene Stylesheet in die Anwendung eingebunden und ist dann global innerhalb des Angular-Projekts verfügbar.
Um für spätere Tests das gleiche Stylesheet zu verwenden, sollten wir den gleichen Verweis auch unter projects → book-monkey → architect → test → options → styles setzen.
Alternative: Styles mit CSS-Imports einbinden
CSS-Stylesheets können ebenso über eine @import-Regel in das Projekt eingefügt werden. Dafür muss lediglich die folgende Zeile in das CSS-Stylesheet src/styles.css aufgenommen werden:
@import '~semantic-ui-css/semantic.css';
Die Tilde (~) wird beim Build automatisch durch den Pfad zum Verzeichnis node_modules ersetzt.a Zusammen mit einem Präprozessor wie Sass oder Less hat der Weg mit dem Import den Vorteil, dass wir die Variablendeklarationen aus dem Stylesheet selbst nutzen und verändern können, um z. B. eigene Einstellungen in unserem Projekt zu setzen.
a Hinter den Kulissen nutzt Angular dafür einen Webpack-Alias.
Als Test, ob Semantic UI erfolgreich eingebunden wurde, fügen wir direkt das erste UI-Element aus dem Framework ein. Wir wollen eine rotierende Ladeanzeige einblenden, solange die Angular-Anwendung geladen wird. So eine Ladeanzeige platzieren wir in der index.html innerhalb des Host-Elements für die AppComponent, hier <bm-root>:
<bm-root>
<div class="ui active inverted dimmer">
<div class="ui text loader large">Lade BookMonkey...</div>
</div>
</bm-root>
Listing 5–9 Den Loader aus Semantic UI nutzen (index.html)
Laden wir die Seite neu, wird nun so lange ein Ladesymbol angezeigt, bis der Bootstrapping-Prozess von Angular erfolgreich war und die Komponente <bm-root> geladen wurde (Abbildung 5–8).
Abb. 5–8 Ladestatus mithilfe von Semantic UI anzeigen
Geschafft! Wir haben nun alle Werkzeuge und Frameworks heruntergeladen, installiert und konfiguriert, die wir benötigen. Jetzt können wir mit der Entwicklung unserer Anwendung beginnen.
6Komponenten & Template-Syntax: Iteration I
»To be or not to be DOM. That’s the question.«
Igor Minar
(Angular Lead Developer)
Nun, da unsere Projektumgebung vorbereitet ist, können wir beginnen, die ersten Schritte bei der Implementierung des BookMonkeys zu machen. Wir wollen in dieser Iteration die wichtigsten Grundlagen von Angular betrachten. Wir lernen zunächst das Prinzip der komponentenbasierten Entwicklung kennen und tauchen in die Template-Syntax von Angular ein. Zwei elementare Konzepte – die Property und Event Bindings – schauen wir uns dabei sehr ausführlich an.
Die Grundlagen von Angular sind umfangreich, deshalb müssen wir viel erläutern, bevor es mit der Implementierung losgeht. Aller Anfang ist schwer, aber haben Sie keine Angst: Sobald Sie die Konzepte verinnerlicht haben, werden sie Ihnen den Entwickleralltag angenehmer machen!
6.1Komponenten: die Grundbausteine der Anwendung
Wir betrachten in diesem Abschnitt das Grundkonzept der Komponenten. Auf dem Weg lernen wir die verschiedenen Bestandteile der Template-Syntax kennen. Anschließend entwickeln wir mit der Listenansicht die erste Komponente für unsere Beispielanwendung.
6.1.1Komponenten
Komponenten sind die Grundbausteine einer Angular-Anwendung. Jede Anwendung ist aus vielen verschiedenen Komponenten zusammengesetzt, die jeweils eine bestimmte Aufgabe erfüllen. Eine Komponente beschreibt somit immer einen kleinen Teil der Anwendung, z. B. eine Seite oder ein einzelnes UI-Element.
Hauptkomponente Eine Komponente besitzt immer ein Template.
Jede Anwendung besitzt mindestens eine Komponente, die Hauptkomponente (engl. Root Component). Alle weiteren Komponenten sind dieser Hauptkomponente untergeordnet. Eine Komponente hat außerdem einen Anzeigebereich, die View, in dem ein Template dargestellt wird. Das Template ist das »Gesicht« der Komponente, also der Bereich, den der Nutzer sieht.
An eine Komponente wird üblicherweise Logik geknüpft, die die Interaktion mit dem Nutzer möglich macht.
Komponente: Klasse mit Decorator @Component()
Das Grundgerüst sieht wie folgt aus: Eine Komponente besteht aus einer TypeScript-Klasse, die mit einem Template verknüpft wird. Die Klasse wird immer mit dem Decorator @Component() eingeleitet. Das Listing 6–1 zeigt den Grundaufbau einer Komponente.
Was ist ein Decorator?
Decorators dienen der Angabe von Metainformationen zu einer Komponente. Der Einsatz von Metadaten fördert die Übersichtlichkeit im Code, da Konfiguration und Ablaufsteuerung sauber voneinander getrennt werden. Angular nutzt Decorators, um den Klassen eine Bedeutung zuzuordnen, z. B. @Component(). Im Kapitel