Читать книгу Angular - Manfred Steyer - Страница 16

Da auch »das Auge mitprogrammiert«, wollen wir an dieser Stelle ein paar vordefinierte Styles ins Spiel bringen. Es handelt sich dabei um das Paper-Design-Theme von Creative Tim (https://www.creative-tim.com), das wiederum auf der populären Bibliothek Bootstrap (http://getbootstrap.com) basiert.

Der Vorteil von Bootstrap liegt neben seiner äußerst weiten Verbreitung in der Tatsache, dass es unaufdringlich ist. Es definiert lediglich ein paar (S)CSS-Klassen, die man auf bekannte HTML-Elemente anwenden kann. Im Gegensatz zu anderen Lösungen muss man also zunächst keine weiteren HTML-Elemente erlernen.

Sie können sowohl Bootstrap als auch das Paper-Design-Theming mit dem folgenden Befehl installieren:

ng add @angular-architects/paper-design

Dieses von uns bereitgestellte Paket beinhaltet die besprochenen Styles und generiert auch einige Konfigurationseinträge sowie das Skelett unserer Anwendung (siehe Abbildung 1-5).

Abbildung 1-5: Generierte Angular-Anwendung

Wie Sie hier sehen, verschiebt dieser Befehl die AppComponent und das AppModule in den Ordner bak (siehe Zeilen mit RENAME). Danach generiert er die beiden erneut im Ordner src/app. Außerdem generiert er eine NavbarComponent, eine SideBarComponent und ein Angular-Logo. Danach erweitert dieser Aufruf von ng add die Dateien angular.json und index.html. Erstere erhält Verweise auf die Style-Dateien (siehe Beispiel 1-4) von Bootstrap und dem freien Paper Design-Theming von Creative Tim. Letztere erhält zwei link-Elemente zum Laden des vom Theming verwendeten Webfonts.

Beispiel 1-4: Referenzierte Styles in angular.json

"styles": [

"node_modules/@angular-architects/paper-design/assets/css/bootstrap.css",

"node_modules/@angular-architects/paper-design/assets/scss/paper-dashboard.scss",

"src/styles.scss"

],

In Beispiel 1-4 sieht man übrigens auch die von ng new generierte Datei src/styles. scss, in der Sie Ihre eigenen globalen Styles hinterlegen können.

Leider liest ng serve globale Konfigurationsdateien wie die angular. json nur beim Programmstart. Falls -ng serve- bereits läuft, müssen Sie es deswegen beenden (Strg+C) und neu starten.

Startet man die Anwendung erneut mit ng serve -o, ergibt sich das in Abbildung 1-6 gezeigte Bild.

Abbildung 1-6: Anwendung mit Style-Bibliothek

Links sieht man die generierte SideBarComponent und im oberen Bereich die ebenfalls generierte NavBarComponent. Sämtliche Links sind derzeit noch Dummies – aber das wird sich im Laufe des Buchs noch ändern.

ng add Der von der Angular CLI gebotene Befehl ng add installiert ein npm-Paket und führt danach ein Skript aus, das das Paket in der Angular-Anwendung einrichtet. Stattdessen könnte man auch mit npm install das Paket installieren und das Einrichten händisch übernehmen. Im Fall von Bootstrap müsste man dazu zunächst npm install bootstrap anstoßen und danach die von Bootstrap gebotenen Styles manuell in die angular.json eintragen. Danach müssten Sie auf dieselbe Weise die Styles des verwendeten Bootstrap-Themes referenzieren.