Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

AngularJS 1.3 Grundkurs

AngularJS-Begrifflichkeiten

Testen Sie unsere 2013 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Die Erstellung einer Legende dient dazu, die wichtigsten Begrifflichkeiten bei der Arbeit mit AngularJS für zukünftige Referenzen zusammenzufassen.
07:21

Transkript

Im Folgenden möchte ich sehr gerne mit euch über die wichtigsten Begrifflichkeiten rund um die AngularJS-Welt sprechen , und eine Art Legende mit euch gemeinsam erarbeiten. Damit ihr immer die Möglichkeit habt, wenn ihr einen Begriff nicht mehr zuordnen könnt, in dieses Video zu schauen und dann noch mal den Zusammenhang zu sehen. Beginnen will ich dabei mit dem Template Das Template selber ist im weitesten Sinne nichts anderes als eine HTML-Vorlage. Ihr müsst euch vorstellen, dass ihr diese Vorlage entweder in eine Datei auslagern könnt, indem ihr in die Datei die DOM-Fragmente darei packt, oder natülcih seid ihr in der Lage, zum Beispiel, solche HTML-Vorlagen in Script-Login mit dem eindeutigen Identify abzulegen oder auch vorhandene HTML-Fragmente als Vorlage zu verwenden. Weiterhin sprechen wir häufig über Direktiven Eine Direktive ist eigentlich nichts anderes als die Erweiterung des HTMLs um Attribute und Knoten,das heißt, ihr seid in der Lage, eine Direktive zu erzeugen, Und diese Direktive könnt ihr auf ein vorhandenes HTML-Element anwenden,indem ihr der Direktive zugehörige Attribute an das HTML-Element dran hängt. Ein Beispiel dafür könnte zum Beispiel ng-click sein ng-click ist eine Direktive, die von AngularJS zur Verfügung gestellt wird, damit auf eine Klick-Interaktion auf einem HTML-Element reagiert werden kann. Weiterhin könnt ihr aber auch Attribute verwenden, die zu einer Direktive gehören, die nicht nur Interaktion in irgendeiner Form steuern, sondern halt auch komplett optisch etwas ändern, das heißt, beispielsweise,das vorhandene HTML-Element, auf das das Attribut angewendet worden ist, auszutauschen gegen eine andere HTML-Vorlage und dem entsprechend die komplette View zu reorganisieren. In dem Fall wird aber die Direktive auch häufig in Form eines benutzerdefinierten Knotens entsprechend definiert, so dass ihr tatsächlich in der Lage seid, dann eigene HTML-Elemente zu definieren. Es gibt einige Frameworks, die darauf schon basieren, zum Beispiel,das Ionic Framework. Ich persönlich liebe es, denn es gibt die Möglichkeit, dass ich sehr, sehr schnell im Kontext mit Cordova und AngularJS mobile Anwendung für iOS und Android machen kann. Weiterhin sprechen wir häufig über das Model Um es einfach einander zu bringen, ist das Model die Datenmenge, die der Benutzer sieht, und mit dem der Benutzer arbeitet, also interagieren kann. Das ist im Grunde genommen das Model, Und sehr häufig auch sprechen wir über Scope Und hier verstehen wir so ein wenig den Zusammenhang von dem Scope und dem Model, denn ihr müsst vorstellen, in dem Scope selber wird das Modell abgelegt, teils dann halt auch Businesslogik. Und nachdem dann in dem Scope das Model und die Businesslogik abgelegt sind, sind wir dann in der Lage, über diesen Scope mit den Controllern, Direktiven und Ausdrücken, die direkt auf das Model zugreifen zu können. Der Scope wird immer dann erstellt auf einem HTML-Element, wenn ich beispielsweise eine Direktive drauf anwende, wird dann automatisch der Scope im Hintergrund erstellt. Und so gibt es dann quasi mit dem Scope eine Brücke, zwischen der sichtbaren Welt und der Logikwelt. Weiterhin sprechen wir hier immer wieder mal von Ausdrücken. Diese Expressions sozusagen sind Ausdrücke, die Zugang auf Scope-Funktion und Variablen bitten. Das sind eigentlich nichts anderes als Zeichenketten. Wenn diese Zeichenketten definiert sind, wird dann geschaut, ob es in dem Scope zu diesen Zeichenketten Zugehörigkeiten gibt. Das können Funktionen sein oder auch Variablen,und Variablen werden in dem Fall natürlich dann Modeleigenschaften, weiter spricht man im AngularJS-Umfeld häufiger mal bom Compiler. Beim Kombinieren passiert eigentlich nichts anderes, als dass eine HTML-Vorlage gepasst wird. Zusätzlich dann eine Instanzierung von Direktiven, falls notwendig, oder auch Controllern und Scopes erzeugt und dann mit Ausdrücken entsprechend kompiliert wird, das heißt, ihr erzeugt mit dem Compiler die View, und die View, die ihr dabei erzeugt, hat dann alle Abhängigkeiten zu Logik, Instanz dann automatisch impementiert. Und mit einer Filter seid ihr ganz einfach in der Lage, Formatierung von Ausgaben durchzuführen und Ausgabewerten durchzuführen. Dabei kann eine Formatierung nicht nur in einer View angewendet werden, sondern auch losgelöst als eine Businesslogik verwendet werden. Weiter sprechen wir häufig von Views Und um es ganz einfach näher zu bringen, eine View ist im Grunde genommen das, was der Benutzer eigentlich sieht. Das Benutzerinterface ist unsere View. Und wenn wir von einem Data Binding sprechen, dann sprechen wir davon, dass das Model synchronisiert wird mit der View, das bedeutet, wenn ich über eine Expression, eine View über den Scope mit dem Model kombiniere, also verbinde, dann ermöchlicht mir das Data Binding, was das Ganze synchron gehalten wird Ändert sich also das Datenmodel, wird dann automatisch auch die View aktualisiert, weil durch den Ausdruck erkannt wird: "Hey,hier wurde auf eine Variable Und ich muss entsprechend natürlich dafür sorgen, dass ich die View aktualisiere, und zum Beispiel den aktuallen Benutzernamen anzeige. Ein Controller hingegen ist eigentlich die Businesslogik einer View, die wir im Kontext von AngularJS haben, das heißt, in einem Controller packe ich all das rein, was in irgendeiner Form mit Interaktionen zu tun hat, sei es, ob es Benutzer oder datengetriebene Interaktion sind. Und kann damit dann die gesamte Logik abbilden. Häufig werden auch über die Dependency Injection sprechen. Die Dependency Injection ist im Grunde genommen nichts anderes als eine abhängigkeitsgebundene Objektinstanziierung und -zuweisung. Hört sich ganz wild, aber bedeutet, eigentlich nichts anderes als dass hier Umfeld von AngularJS, zum Beispiel, in beliebigen Funktionen durch eine Zeichenkette definieren kann, dass ich über eine bestimmte Obejktdistanz verfügen möchte. Das ist zum Beispiel häufig der Scope und dann automatisch der Parameter der Funktion im Angular-Umfeld dann gefüllt wird mit dem gültigen Scope, der für diese View zuständig ist, so dass ich mich eigentlich nicht drum kümmern muss, dass ich das zugehörige Scope eines HTML-Elementes herausfinden muss, sondern ich bekomme es per Injection quasi immer in dem Kontext, wo ich es auch brauche und muss mich um Weiteres nicht kümmern. Und das Ganze dann halt auch als Singelton, so dass ich nie sorgen machen muss dass ich irgendwie Überschneidung von irgendwelchen Instanzen habe. Solche Dependency Injections wären im Übrigen auch in Injector als Container dann entsprechend gesammelt und gespeichert. Zu guter Letzt Modul Ein Modul ist ein Container für Anwendungsbestandteile. Stellt euch das so wenig vor wie eine Black-Box. Und in diesem Container befinden sich Controller, Services, Filter, Directiven und Injectoren. Und damit seid ihr dann entsprechend in der Lage, wirklich bestimmte Bestandteile oder Web-Anwendungen in Module auszugliedern oder auch bestimmte Loginen. Wenn also ein Loginprozess immer wieder in unterschiedlichen Projekten von euch identisch verläuft, dann könnt ihr ein Login-Modul machen, und in dieses Login-Modul packt ihr alle Bestandteile rein, die für das erfolgreiche Einlogin in eure Web-Applikation entsprechen funktionieren. Und wenn ihr in irgendeiner Anwendung ein Login voll füllen wollt, müsst ihr nichts anderes machen als dieses Modul innerhalb der AngularJS-Anwendung miteinzubinden. Und ab diesem Moment verfügt ihr über all diese Controller und Services und seid hervorragend losgelöst und könnt entsprechend dann sehr schön arbeiten insbesondere in größen Teams. Also so kann man sagen: "Hey, Peter, der macht das Login, der Detlew macht die Registrierung, und der Kurt macht die Produktanzege!" Und da gibt es dann unterschiedliche Module, die werden dann einfach dann zum Schluss in der End-Applikation zusammengepackt, und alles sind sie glücklich. Weiterhin werden wir über Services sprechen. Services sind eigentlich nichts anderes als wiederverwendbare Business-Logiken, die aber komplett unabhängig sind von einer View, das heißt, ein Services wird zum Beispiel dafür verwendet, um irgendeiner von etwas zu realisieren, wie beispielsweise ein Request oder das Filtern von bestimmten Ausgabewerten, und das hat dann nicht zwingend immer was mit einer View zu tun. Und dann kann ich so ein Service einfach per Dependency Injection dann initieren in die jeweilige Umgebung, wo ich es gerade brauche und muss mich darum nicht kümmern. In diesem Video haben wir gemeinsam über die wichtigsten Begrifflichkeiten rund um die AngularJS- gesprochen.

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!