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 1.3 Grundkurs

Zugriff auf HTML-Elemente

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Es besteht die Möglichkeit, einen Controller einem HTML-Element hinzuzufügen und über diesen Informationen aus dem Element auszulesen.
03:33

Transkript

Wir sind hier in der Lage, einem HTML-Element mittels ng-Conrtoller einen Controller hinzuzufügen, quasi die Business-Logik des Views. Wenn wir uns den Contoller jetzt mal hier anschauen, dann werden wir auch sehr schnell erkennen, dass der Controller selber, der dann hier gebunden worden ist, in dem Modull app.users existiert, mit dem Methode Controller initialisiert worden ist und dass in der Funktion selber mit dem Scope als Dependency Iinjection kommuniziert werden kann, d.h. der Scope ist quasi die Brücke jetzt zwischen der Business-Logik und der View auf der anderen Seite. Damit wären wir in der Lage, z.B. diese Bindung hier zu erzeugen, die ich hier angezeigt habe, wir sind aber auch in der Lage, die Dependency Injection nicht nur in den Scope, sondern auch das Element selber zu erfragen. Das mache ich mit $element, welches ich mir hier schnell mal ausgeben lassen möchte, und wenn ich mir die HTML-Element-Seite dafür mal anschaue, dann sehen wir, dass ich in den logs hier unten die section.ng-scope habe, selektierte ich denn hier mit der Maus mal entsprechend diesem Bereich, dann sehen wir wunderbar, dass dann auch auf der linken Seite der wichtigen Sectionbereit markiert wurde. Sehr interessant an dieser Stelle zu sehen ist, dass ng log hingegangen ist, und zusätzlich zu der Section einen ng-scope hinzugefügt hat als Klasse. Und das finde ich persönlich deswegen so interessant, weil ich damit jetzt sehen kann, schaut mal hier, dass meine ich ng-scope als Klasse. Und das finde ich deswegen so interessant, weil im Originall haben wir das nämlich gar nicht gemacht. Das ist dadurch entstanden, dass ich im ng-Controller dran gehingt habe, wurde an dieses HTML-Element hier von Angular automatisch einen Scope entsprechend initialisiert und das erkennt man da entsprechend dann hier über die Klasse ng-scope. Ihr könnt übrigens diese Information, dass im Grunde genommen nichts anderes ist als eine Debug-Information, mit der auch z.B. so Extensions und Erweiterung innerhalb von Chrome die Angular Seite entsprechend auslesen können, könnt ihr deaktivieren. Zu guter Letzt haben wir also jetzt gesehen, dass wir ohne Probleme in der Lage sind, auf das Element zurückzugreifen, mit dem ich dann hier kommuniziere. Das Element selber, mit dem ich hier dann entsprechend zu tun habe, ist ein jQuery Light Objekt. Das jQuery Light Objekt wird interpretiert das nicht mit dem echten jQuery. Das hat aber zumindestens grundsätzlich die Funktionalität, mit dem man z.B. so was machen kann, wie Text hinzufügen oder Bindungen hinzufügen mit bind oder on und mit dann entsprechend Bindung rauszunehmen oder beispielsweise auch CSS-Elemente da entsprechend dann anzupassen. So bin ich z.B. ohne Probleme dann auch in der Lage, die Methode append zu verwenden. Und die Methode append, die wollen wir jetzt mal einfach mit $element hier nutzen, und zwar .append, und fügen dann hier ein h2 hinzu, und dieses h2 soll dann einfach schreiben Hello World. Speichern das Ganze! Gucken uns das Ganze jetzt wieder mal im Browser ab! Und seht ihr jetzt wunderbar, dass dann innerhalb der Section nun zusätzlich "Hello World" hinzugekommen ist. Würde ich das also hier markieren, sieht ihr dann ganz wunderbar, dann entsprechend einen Sectionbereich ist, der dann hier einfach erweitert worden ist durch das "Hello World". Kann ich mir auch hier in den Elementen dann auch wunderbar angucken, dass dann via h2 das "Hello World" hinzugefügt worden ist. Und das habe ich einfach damit gemacht, dass ich mit dem $element gearbeitet habe, indem ich dann auf das $element des jQuery Light Objektes mit dem Methode append dann ein Element hinzugefügt habe.

AngularJS 1.3 Grundkurs

Legen Sie mit AngularJS moderne, anspruchsvolle Webprojekte auf der Basis von HTML, CSS und JavaScript an.

4 Std. 15 min (74 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Hersteller:
Software:
AngularJS AngularJS 1.3
Exklusiv für Abo-Kunden
Erscheinungsdatum:19.11.2014

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!