Angular. Ferdinand Malcher

       5.3Style-Framework Semantic UI einbinden

      Zu einer Webanwendung gehört natürlich noch mehr als nur Logik, Struktur und Templates. Wir wollen uns in diesem Buch aber vor allem auf die Arbeit mit Angular konzentrieren und nicht mit aufwendigen Style-Definitionen aufhalten. Trotzdem soll unsere Anwendung ein ansprechendes Layout besitzen.

       Style-Framework Semantic UI

      Im Laufe der letzten Jahre haben sich viele CSS-Frameworks zur Gestaltung von responsiven Webseiten herausgebildet. Bootstrap CSS¹⁰ und Semantic UI¹¹ 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. jQuery¹²).

      Zur Installation des Frameworks navigieren wir auf der Konsole in das Hauptverzeichnis BookMonkey. Dort installieren wir das Paket über NPM:

      $ 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 node_modules/semantic-ui-css.

      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 node_modules verweisen.

      "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.