Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

AngularJS Grundkurs

Stylesheets

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Das Setzen der Style-Attribute mit der ng-style-Direktive ermöglicht in Angular JS die browserübergreifende Änderung der Stylesheets zur Laufzeit.
03:22

Transkript

Einige von Euch werden sich sicherlich jetzt denken, wenn ich so toll mit einer Bindung in der Lage bin Inhalte aus dem Scope entsprechend zu verwenden und zu visualisieren, vielleicht kann ich das Ganze auch verwenden um beispielsweise Stylesheets zur Laufzeit zu manipulieren. Im Grunde genommen geht das auch und die meisten Angular Anfänger machen nichts anderes, dass die dann tatsächlich hier das Style definieren. In dem Style beispielsweise das font-size definieren wollen und mit dem font-size, das definieren sie dann, indem beispielsweise hier auf das age verwiesen wird. Ich weiß, es macht wenig Sinn, aber einfach nur grundsätzlich. Speichern wir. Damit wird dann sorgen, dass hans1 die kleinste Schrift hat und hans4 die größte Schrift hat. Wenn wir das Ganze jetzt einmal aktualisieren, sehen wir, dass das hier perfekt funktioniert hat. Das Dilemma der ganzen Sache ist, wenn ich aber auf vielleicht nicht so modernen Browsern arbeiten möchte, dass diese Styleänderung zur Laufzeit etwas kritisch ist. Das heißt, die bekommen das dann nicht vernünftig hin. Um das also browserübergreifend hinzubekommen, müsst Ihr eigentlich im Grunde genommen einen winzig kleinen Zwischenschritt einfügen. Dieser Zwischenschritt bedeutet, dass ich das Styleattribut eben nicht einfach normal setze, sondern mittels der ng-style Direktive, die mir AngularJS zur Verfügung stellt und dieses ng-style, das ist das Entscheidende, erwartet ein Objekt, wobei Objektparameter dann in Anführungszeichen definiert werden müssen. Die Objekteigenschaft, die ich jetzt in ng-style definiere, wäre font-size. Bitte achtet aber unbedingt darauf, dieses ng-style erwartet ein Objekt mit Eigenschaften und dieses Objekt und die Objekteigenschaften dürfen natürlich in der Namensgebung keinen Bindestrich haben, weil das ein ungültiges Zeichen ist. Also ersetze ich den Bindestrich durch die Camel Case Schreibweise, indem ich entsprechend den Buchstaben nach dem Bindestrich groß schreibe und den Bindestrich dafür entferne. Dadurch entsteht dann das font-size in der Camel Case Schreibweise und muss nun nichts anderes machen, als entsprechend via Bindung jetzt wieder mein age hier hinzufügen und das, was entscheidend ist, dass ich jetzt natürlich den Wert zusammensetzen muss. Denn das ist ein Objekt und Objektwert, den ich hier setzen möchte. Das mache ich durch eine Addition und muss das px quasi dann hinten dranhängen. Ihr seht von der Schreibweise her, ist das jetzt keine großartig andere Geschichte. Ich werde Euch das noch hierlassen auskommentiert, damit Euch das nicht durcheinanderbringt. Also so bitte nicht. Anstatt dessen dann auf diese Art und Weise mit dem ng-style, wie ich es hier definiert habe. Wenn wir das jetzt hier aktualisieren, hat das nicht geklappt. Das bedeutet, dass ich irgendwo mich vertippt haben muss. Gebt mir eine Sekunde, dass ich da ganz schnell reinschaue. Klar. Ich darf natürlich keine Bindungen in einer Direktive machen. Das heißt, wenn ich das ng-style verwende, muss ich das person.age eben nicht in geschweiften Klammern setzen. Wenn wir das jetzt testen, seht Ihr, dass das wunderbar an dieser Stelle mit dem ng-style funktioniert hat. Das Tolle ist, so was funktioniert beispielsweise bis runter ohne jegliche Probleme. In diesem Video habt Ihr also gelernt, wie wir mittels ng-style in der Lage sind gebundene Styleparameter dann entsprechend setzen zu können.

AngularJS Grundkurs

Arbeiten Sie sich in AngularJS, einem JavaScript-Framework von Google, ein und sehen Sie, wie Sie mit MVC-Design-Pattern und Dependency Injection im HTML-Umfeld arbeiten können.

3 Std. 43 min (44 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!