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

Java EE 7: Web Services

Webfrontend mit AngularJS und jQuery

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
In diesem Video befassen Sie sich intensiv mit dem Zusammenspiel von AngularJS und der eigentlichen Seite und gehen auf den Einsatz von jQuery ein.

Transkript

Einen Großteil der Logik von einer Single Page-JavaScript-Applikation bildet man, wie der Name vielleicht schon andeutet, auf der JavaScript-Ebene ab. Wir werden uns in diesem Video damit auseinandersetzen, wie wir an das Frontend einen AngularJS-Controller binden können, welche Funktionalitäten dieser Controller bereitstellt, wie die Komponenten des Frontends mit dem Controller interagieren können und wir werden ebenfalls einen kurzen Blick darauf werfen, wie wir mit jQuery bestimmte Komponenten manipulieren können. Der Großteil der Verarbeitungslogik unserer Applikation wird mit AngularJS abgebildet. Damit AngularJS überhaupt funktionieren kann, muss natürlich zunächst das entsprechende JavaScript in die Seite integriert werden. Nachdem dies erledigt und sichergestellt ist, kann auf einem beliebigen HTML-Element die Registrierung von Applikation und Controller stattfinden. Applikation und Controller sind AngularJS-Konstrukte. Meine Applikation wird als AngularJS-Modul definiert. Der Name, den wir hier angeben, muss mit dem Namen hier oben in der Registrierung der Applikation übereinstimmen. Ein AngularJS-Modul kann beliebig viele Controller besitzen Diese Applikation verfügt über genau einen Controller mit dem Namen 'start'. Dieser Controller ist für die Startseite verantwortlich und das ist ausgedrückt über die Registrierung des Controllers mit Hilfe des ng-controller-Attributs. Innerhalb von einer Seite kann es übrigens mehrere Controller geben. Aber das haben wir in diesem Fall nicht. Auf Controller-Ebene können Variablen definiert werden. Diese Variablen werden stets mit Hilfe des $scope-Konstruktes definiert. Dann wird durch einen Punkt getrennt der Variablenname angegeben. In diesem Fall haben wir hier eine Variable mit dem Namen customers, die ein Array von Kunden hält. Das ist jetzt hier fest verdrahtet. Dieses Array hält genau einen Datensatz. Es gibt eine weitere Variable, isLoading. isLoading wird dafür verwendet, um sicherzustellen, dass Komponenten später deaktiviert sind, wenn die Seite gerade Inhalte lädt. isEditMode wird verwendet, um anzugeben, ob die Seite sich gerade im Edit-Modus befindet. Ist dem nicht so, wird einfach nur die Übersicht der Daten angezeigt, nehme ich die Liste der Datensätze. Ist isEditMode auf true gesetzt, wird ein Eingabeformular angezeigt, indem ein Datensatz bearbeitet werden kann. Der Datensatz, der aktuell zu bearbeiten ist, befindet sich in der Variable currentCustomer. Darüberhinaus ist es möglich, dass wir Variablen deklarieren und benutzen können, ohne sie explizit auf Controller-Ebene einzusetzen. Das ist hier zum Beispiel innerhalb der Methode switchToEditMode der Fall. Und zwar definieren wir hier, dass der Methode currentAddress der Wert des aktuell übergebenen Objektes zugewiesen wird Ebenfalls an diesem Beispiel sehen wir, wie wir in AngularJS Methoden definieren können. Und zwar, indem wir sie auf Ebene des Scopes definieren und dann eine Function zuweisen. So eine Funktion kann keinen, einen oder mehrere Parameter haben. Deren Implementierung obliegt letztlich uns. Es sind ganz normale JavaScript-Methoden. Auf Variablen innerhalb des Controllers greifen wir auch aus diesen Methoden heraus immer mit $scope. Methoden beziehungsweise Variablenname zu. AngularJS verfolgt einen Zweiwege-Datenbindungsansatz. Dieser Zweiwege- Datenbindungsansatz besagt, dass eine Änderung, die in einem Eingabefeld im Frontend vorgenommen wird, sich sofort im Controller widerspiegelt. Wenn ich im Controller eine Änderung vornehme, wird das auch in das Frontend übergeben. Das macht man sich zunutze, wenn man zum Beispiel umschalten möchte zwischen Editiermodus und Nicht-Editiermodus. Wir wechseln nun einmal in die HTML-Seite und sehen uns an, wie dort die AngularJS- Interaktion sichergestellt wird. Voraussetzung ist, dass ng-app und ng-controller definiert sind. Wir sehen hier eine Tabelle. Diese Tabelle soll alle Kunden anzeigen. Diese Kunden befinden sich in der Customers Auflistung innerhalb des Controllers. Das ist diese jetzt von mir gerade hervorgehobene Variable. Mit AngularJS können wir mit Hilfe des ng-repeat Attributes auf einem Element aussagen, dass dieses Attribut für jedes Vorkommen eines Customers in der Customers-Auflistung wiederholt wird. AngularJS wird also das gesamte Element vom öffnenden bis zum schließenden Element für jeden Customer in der Auflistung ausgeben. Die Datenbindung der Eigenschaften des Customers raus ins HTML findet mit diesen doppelten geschweiften Klammern statt. Wir greifen hier dann immer auf eine Eigenschaft der Laufvariablen zu. Für jeden Durchlauf dieser Schleife wird das aktuelle Element in die Variable customer kopiert und auf deren Werte greifen wir dann über customer.id, customer.firstName, customer.lastName zu. und setzen das in geschweifte doppelte öffnende beziehungsweise schließende Klammern. Mit Hilfe des data-ng-click Attributs oder auch nur ng-click kann ich eine Methode aufrufen, und zwar wird die Methode aufgerufen, wenn jemand auf diese Table Row klickt. Die Methode, die aufgerufen wird, ist die Methode show details. Diese Methode befindet sich ebenfalls innerhalb des Controllers. Jetzt können wir hier etwas nach unten scrollen und werden dann irgendwann diese Methode finden. Hier haben wir diese Methode gefunden. Die Methode wird dann für jeden Klick aufgerufen. In dieser Methode werden nun die Adressdaten für einen Dummy Kunden erzeugt und gegebenenfalls zugewiesen und die Variable isEditMode wird auf true gesetzt. Ebenfalls wird der aktuell übergebene Datensatz, also der Customer, der gerade im Frontend aktiv war, als auf die Spalte geklickt wurde, hier rein übergeben und in der Variable currentCustomer gespeichert. Und wir speichern eine Kopie davon in der Variable currentCustomerOriginal um eine Undo-Funktionalität bereitzustellen. Denn die Zweiwege-Datenbindung wirkt sich sofort aus. Wenn der Scope nun mit Hilfe von isEditMode aussagt, dass wir den Editiermodus aktiviert haben, dann wird dieser Container hier deaktiviert. Dies wird ausgedrückt über das Attribut ng-hide. Hier wird wieder auf eine Variable des aktuellen Scopes verwiesen. Die Variable "isEditMode" gibt den Wert true zurück. ng-hide sorgt dafür, dass dann der komplette Container ausgeblendet wird. Hier ist ng-hide auf die Negation gebunden. Hier steht ja not isEditMode. Wenn also der Editiermodus eingeschaltet ist, wird hier der Wert Falsch zurückgegeben und dann wird dieser Container sichtbar. Vorher ist er unsichtbar. Innerhalb dieses Containers können wir nun die Eigenschaften des aktuellen Kunden bearbeiten. Und zwar machen wir das über input-Elemente beziehungsweise eine Liste von Adress-Elementen. Wir greifen dann auf Ebene des Input-Elementes über die ng-model Attribute auf das Feld, in dem Fall lastName, der currentCustomer Variable zu. ng-model sorgt auch wieder für eine Zweiwege-Bindung. Das bedeutet, sobald ich dort etwas eingebe und das Feld verlasse, wurde das auch in das Feld LastName der currentCustomer-Instanz geschrieben. Genau dasselbe gilt hier für currentCustomer.firstName. Der Ausdruck ng-hide nimmt immer einen Booleschen Wert entgegen. Ergibt dieser Boolesche Wert true, also wahr, wird das entsprechende Element, auf dem sich ng-hide befindet, versteckt. Das kann man sich zunutze machen, wenn man wie hier auch etwas komplexere Sachen umsetzen möchte. Und zwar haben wir hier einen span. Der ist dann nicht sichtbar, wenn die Adresse sich im Edit-Modus befindet. Der aktuelle Datensatz verfügt über eine entsprechende Eigenschaft, beziehungsweise wird sie im Zweifelsfall einfach on the fly inline erzeugt. Das ist nämlich mit JavaScript möglich. Hier haben wir die Datenbindung an die Eigenschaft street der aktuellen Adresse. Aber wie gesagt, dieser span-Bereich ist nur dann sichtbar, wenn die Adresse sich nicht im Editiermodus befindet. Das dahinter notierte Eingabeelement ist dagegen sichtbar, wenn die Adresse sich im Editiermodus befindet. Erkennbar an der Negation von ng-hide, die auf die Eigenschaft EditMode der Adresse zeigt. Hier ist ebenfalls eine Datenbindung und zwar auf die gleiche Eigenschaft wie in dem span. Ausgedrückt hier über ng-model. Das ist bei Eingabefeldern der gängige Weg, um sicherzustellen, dass diese die Zweiwege-Datenbindung, von AngularJS auch korrekt umsetzen können. Also wir verwenden das ng-model Attribut, um ein Eingabeelement, wie in diesem Fall ein input-Element, an ein Feld des Datensatzes zu binden. Jede Änderung wird dann beim Verlassen des Feldes automatisch in den Datensatz übernommen. Das Ganze gilt auch für Listen, die durchlaufen werden. Die ng-click Annotation dient dazu, um ein Element an eine Methode zu binden. Wenn nun in dieser Methode zum Beispiel das Flag isEditMode der Adresse wieder umgestellt wird, tritt die Datenbindung von AngularJS wieder in Aktion. Sofort werden alle Felder, die sichtbar sind, wenn isEditMode den Wert false hat, auf unsichtbar gesetzt und andersrum. Das geschieht sofort und ohne weiteres Zutun unsererseits. Das ist eine ganz große Stärke von AngularJS verglichen mit anderen JavaScript-Frameworks. Ohnehin besteht die große Stärke von Angular darin, dass sie uns das erste Mal so richtig im JavaScript-Umfeld eine Trennung der Zuständigkeiten ermöglicht. Nämlich eine Frontend-Seite zu haben, die sich primär um die Darstellung der Elemente kümmert, und einen Controller zu haben, der dann mit der Frontend-Seite agiert. Allerdings ohne dass er Komponenten der Frontend-Seite direkt kennen muss. Das unterscheidet AngularJS sehr stark von zum Beispiel jQuery. In jQuery ist es so, dass wir im Code-Bereich die IDs von Elementen kennen müssen. Das kann man sich auf der anderen Seite auch zunutze machen, indem man wie hier zum Beispiel nach dem Laden des Dokumentes ein bestimmtes Feld ausblendet und dessen Farbe zum Beispiel auf grün setzt. Man kann das auch mit AngularJS-Methoden kombinieren, in denen dann per jQuery bestimmte Elemente aus dem Code heraus explizit angesprochen und dann zum Beispiel eingeblendet und nach einer gewissen Zeit wieder ausgeblendet werden, so wie dies hier im markierten Code-Fragment der Fall ist. In diesem Video haben wir uns darüber unterhalten, wie wir mit einem Controller von AngularJS die Logik einer Seite implementieren können und wie wir die Seite mit Methoden, Funktionalitäten und Variablen des Controllers interagieren lassen können. Ebenfalls haben wir angesprochen, wo der Unterschied zwischen AngularJS und jQuery besteht und wir haben unsere Seite in einen Zustand versetzt, mit dem sie grundsätzlich arbeitsfähig ist. Allerdings, und das sei ganz klar angemerkt, haben wir es hier bisher mit Dummy-Implementierungen zu tun, die keinerlei Verarbeitungslogik in Richtung eines Servers haben, sondern lediglich lokal funktionieren.

Java EE 7: Web Services

Steigen Sie ein in die Java-Enterprise-Welt und lernen Sie, wie Nachrichten ausgetauscht und Dienste definiert werden.

5 Std. 13 min (30 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!