AngularJS 1.3 Grundkurs

AngularJS-Konzept

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Dieses Video bietet einen detaillierten Überblick über das grundsätzliche Konzept und erläutert die Funktionsweise von AngularJS.
03:44

Transkript

Lasst uns gemeinsam mal über das Konzept von AngularJS schauen. Und wie AngularJS funktioniert. Im weitesten Sinne verwendet AngularJS Vorlagen. Diese Vorlagen, kompiliert es, um daraus die View zu generieren. Die View ist das Benutzerinterface, das der User sieht und bei der Kompilierung wird dafür gesorgt, dass dann entsprechend die View mit einer Businesslogik bereichert wird, welche als Controller zu verfügung gestellt wird. Und der Scope ist der Gültigkeitsbereich, der dann dafür sorgt,dass dann die View mit dem Controller komunizieren kann. Ein weiterer Bestandteil des Scope ist das Model. Das Model ist im Grunde genommen, etwas was nicht explizit in dem Scope definiert wird, sondern das Model sind die Eigenschaften, die in der View dargestellt werden. Innerhalb der Scopes hinterlegt und representiert dann nur die Daten, die der Benutzer, dann noch tatsächlich sehen kann. Das heißt wir haben jetzt eine wunderbare Brücke zwischen View und Model. Diese Brücke wird immer wieder aktualisiert über einen Singlesource Das bedeutet das Model ist unique. Es ist also eine Singleton. Ich muss mir keine Sorgen machen, dass dann irgendeiner Form, beispielsweise AngularJS im Hintergrund hingeht und das Model dubliziert und dann an Hand von Änderungen des Originals zu überprüfen, ob ich jetzt die View neu rendern muss oder sonst was. Stattdessen arbeitet AngularJS wie folgt. Ich habe jetzt meine View und ich habe mein Model. Und in dem Moment, wo ich mit einem Ausdruck in meiner View sage, dass ich mich dafür interessiere, dass wenn Modeländerungen sattfinden, die View aktualisiert wird, wird ein Watcher generiert. Ein Watcher ähnelt so ein wenig dem Observer. Müsst euch das vorstellen, wie ein Beobachtungsprinzip. Das heißt ich kontrolliere immer wieder, wie der Status einer Eigenschaft im Model ist. Und bei dieser Kontrolle, das passiert innerhalb eines Lebenszykluses, wird einfach nur geschaut, ist diese Eigenschaft geändert worden innerhalb eines neuen Lebenszykluses um einen Updateprozess . Und falls diese dann entsprechend geändert worden ist, weiß ich dann, dass ich ein neues Rendering anstoßen muss und dann die View aktualisieren muss. Das Ganze funktioniert also in der Form, dass ich zum Beispiel durch Viewinteraktionen das Model aktualisieren kann. Stellt euch hier einfach vor ihr habt ein Input Feld in eurer View angelegt und habt dieses Input Feld mit Tetiretiv NG Model und dem Ausdruck zum Beispiel Username mit dem Model verbunden. Dann würde in dem Moment, wo ihr in das Input Feld etwas eintragt, automatisch im Model die Eigenschaft Username aktualisiert werden, mit dem Wert den ihr im View hinterlegt habt. Gleichzeitig ist es aber so, dass ich nicht nur auf Benutzerinteraktion reagieren kann, sondern ich kann auch auf datengetriebe Interaktionen reagieren. Würde sich also zum Beispiel durch das Laden eines Asikonnenkalls oder Http Request, innerhalb des Models eine Valiable ändern, eine Eigenschaft ändern, die ich mit einem Ausdruck an ein View gebuneden habe, hätte dies zur Folge, dass bei der Änderung des Models automatisch AngularJS dafür sorgt, dass auch die View aktualisiert wird. Und so haben wir einen wunderschönen Zyklus hier, wo die View und das Model in einer [unaudiable] Kursexistenz. Und das heißt ich verwende einfach nur Expressions, also Ausdrücke in der View und kann dadurch dann eine wunderschöne Bindung zu meinem Model erzeugen und bin dann in der Lage sowohl durch Benutzerinteraktion als auch durch datengetriebene Aktionen das View oder die Modelschicht zu aktualisieren. Und dazwischen liegt noch der Controller, der beispielsweise sowas wie Benutzerinteraktionen, wie Klickinteraktion oder ähnliches zu verfügung stellt, der ebenfalls dann in der Lage wäre, beispielsweise Modeleigenschaften zu ändern. In diesem Video haben wir also also gemeinsam gelernt, wie wir in der Lage sind zu erkennen, wie die Vorlage, die View, das Model und das Aktualisierungszyklus in AngularJS zusammenspielen.

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!