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

AngularJS 1.3 Grundkurs

Hauptfunktionen von AngularJS

Testen Sie unsere 2015 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Die Kernfeatures von AngularJS umfassen Funktionalitäten, um Model-Daten in einer View zu binden, DOM-Fragmente zu injizieren, zu wiederholen und als Komponenten zu gruppieren sowie Controller für DOM-Elemente zu definieren.
06:48

Transkript

Lasst uns mal Gemeinsam über die Kernfeature, also die Hauptfunktionsweise und die Hauptfunktionen von AngularJS sprechen. Nun, was kann AngularJS eigentlich? Im weitesten Sinne ist AngularJS eigentlich dadurch besonders ausgezeichnet, dass es mit sehr einfachen Mitteln erlaubt eine Bindung zwischen Daten in einem Modell und einer View zu realisieren. Das heißt, Ihr seid in der Lage innerhalb eines Views, einer Viewvorlage, einer HTML Seite bestimmte Ausdrücke zu Verwenden und ab diesem Moment weiß AngularJS, hey in diesem Template, an dieser Stelle muss ich entsprechend eine Eigenschaft aus dem Datenmodell hineininjizieren und rendern. Und dabei muss ich darauf achten, dass wenn sich im Datenmodell diese Eigenschaft ändern sollte, dass ich auch dafür Sorge trage muss, dass sich dann dieser Bereich auch automatisch aktuallisiert, das heißt, ein Update und ein neues Rendering des HTML Elementes dann mit den neuen Daten erfolgen muss. Das macht AngularJS wirklich auf eine wunderschöne, sehr einfache Art und Weise, so dass ich im Grunde genommen überhaupt nicht programmieren muss und ohne jegliche Probleme dadurch das Modell mit dem View verbinden kann. Das kann ich auch so machen, dass es bidirektional ist, also zum Beispiel, dass wenn ich ein Input Feld hebe dass während ich noch eintippe, das Modell sich aktualisiert um an einer anderen Stelle dann die Aktuallisierung verarbeitet wird und dargestellt wird oder aber auch, ich kann das Ganze so machen, dass ich hier zum Beispiel um Performance zu sparen, dass ich sagen soll,es soll nur ein einziges Mal gebunden werden also in dem Moment, wo die Daten das erste Mal da sind, zum Beispiel ein Logo. Ein Logo, das muss nicht permanent gebunden werden. Ob Server das überprüft, hat sich ein Eigenschaft geändert, denn das Logo wird sich nicht ändern, das Logo wird immer da sein. Dann kann ich hingehen und kann sagen, das soll nur einmalig gebunden werden und kann damit einfach dann Performance sparen, indem ich dann nicht permanent auf das Datenmodell achten muss. Weiterhin erlaubt es mir DOM-Fragmente zu injizieren und zu wiederholen. Zu injizieren und zu wiederholen bedeutet nichts anderes als ich kann hingehen und bestimmte HTML Elemente zum Beispiel sagen, du wiederholst dich so lange, solange es Einträge innerhalb einer Liste gibt. Und das wars, also ich muss mich da gar nicht drum kümmern. Diese Wiederholung macht es dann und ich kann damit super einfach Listen zum Beispiel darstellen. Und injizieren bedeutet einfach nur, dass ich in der Lage bin dann entsprechend bestimmte HTML Elemente aus einem anderen Kontext heraus in meiner aktiv HTML Seite injizieren kann, in dem Moment wo ich es dann tatsächlich brauche. Ein weiteres, für mich unfassbar tolles Feature, ist, dass ich Businesslogik und View super trennen kann. Und das ich das machen kann das realisiert AngularJS dadurch, dass es sagt, hey es gibt einen Controller und du bist in der Lage in den Controller Businesslogiken dann hineinzufügen, womit du dann zum Beispiel Daten oder Benutzergetriebene Interaktionen verwalten kannst. Und dann bist du in der Lage diesen Controller jetzt einem HTML Element zuzuweisen und ab diesem Moment sind diese beiden Elemente miteinander verheiratet und das HTML Element weißt dann automatisch welche Funktionalität es hat, weil es einfach weiß zu welchem Controller es gehört. Dazwischen gibt es noch eine kleine Brücke, die nennt sich Scope, da kommen wir noch später zu aber das realisiert das wunderbar dann an dieser Stelle, das heißt, ich bin in der Lage dann Funktionalität von Optik wunderbar zu trennen. Weiterhin bin ich damit auch in der Lage DOM-Fragmente als Komponente zu gruppieren so kann ich zum Beispiel innerhalb eines Attributs, dass ich selbst definiere oder den DOM erweitere oder eine CSS Klasse oder sogar mit komplett eigenen HTML Elementen hingehen und Funktionalität in Gruppierungen packen, so dass ich zum Beispiel so was machen kann wie: Ich erfinde dann ein HTML Knotenliste und erweitere, dass in diesen HTML Knotenliste List Item dann entsprechend vorhanden sein sollen. Und was ich dann machen kann ist, dass ich ohne weitere Probleme dann zum Beispiel hingehen kann beispielsweise Listen darsteller, aber im Hintergrund geht AngularJS hin und weiß, hey das ist eine Komponente, die ist kopiert, ich muss die mit Templates ersetzen und ersetzt dann entsprechend die Listenknoten die natürlich der Browser nicht in irgendeiner Form vernünftig darstellen kann, aber dann durch UL und LE Knoten, und kann das dann auf die Art und Weise wirklich super schnell dann entsprechend Daten anzeigen. Diese Komponentenbasierte Arbeitsweise die uns AngularJS bietet ist zum Beispiel auch ein Bestandteil dessen geworden, dass es mittlerweile Frameworks gibt, die auf AngularJS basieren und die eigentlich nur noch ihr eigenen HTML DOM-Element hinzugefügt haben, mit dem ich dann sehr schnell in der Lage bin U ICE zu erstellen. Eines meiner Lieblingsframework ist dabei Ionic Framework. Das ist noch in Beta Phase, ich hoffe bald entgultig dann Realise und mit dem Ionic Framework bin ich in der Lage mobile Anwendungen zu machen und diese mobilen Anwendungen basieren auf Cordova und AngularJS und es ist wirklich ganz toll damit zu arbeiten. Weiter bin ich mega einfach damit in der Lage hinzugehen und dafür zu sorgen, dass ich wirklich sehr sehr einfach Formulare verarbeiten kann und auch Formulare dann validieren kann und damit dann aufzupassen, dass dann entsprechend vernünftig Daten verarbeitet werden in meiner HTML Anwendung. Weiterhin kann ich damit wunderbar Routing und Deeplinking machen, das heißt, AngularJS ist in der Lage zu erkennen anhand der Adressleiste im Browser, was muss eigentlich dargestellt werden, und kann dann etsprechend statusbasiert die Finite State Machine, andere Templates dann darstellen und dann in dem Moment rendern und wenn ich dann Aktualisierung mache und in einen anderen State wechsele, ändert sich die Adressleiste, das ist dann automatisch dann vom Browser registriert und so kann ich auch History, Back und Forward verwenden und natürlich auch Deeplinking. Das bedeutet nichts anderes, als dass ich in der Adressleiste eingeben kann, in welchem State meiner Application ich hineinspringen möchte, in welchem Status meiner Application ich hineinspringen möchte. Kleines Beispiel: Ich schreibe einfach in die Adressleiste hashartikel und dann /1234 und es würde nichts anderes Bedeuten, als dass ich direkten Deepling mache und den Artikel mit der Artikelnummer 1234 anzeigen lassen konnte. Weiterhin es das die perfekte Entkopplung zwischen App-Logik und DOM-Darstellung und ich habe eine Umgebung, mit der ich perfekt Fat-Clients entwickeln kann. Fat-Client bedeutet, ich entlaste mein Backend, indem ich den Backend jetzt nicht mehr noch zusätzlich aufbürde, dass es in irgendeiner Form HTML Seiten zusammenschustern muss, die ich dann innerhalb einer Anwendung darstellen möchte, sondern ich sage im Backend nur noch, gib mir Daten und nachdem ich die Daten habe, entscheide ich als Client mit AngularJS was dargestellt werden soll und wie. Dabei ist es extremst schwierig AngularJS im Grunde genommen zu sagen, hey das ist eigentlich das Pattern keine Ahnung was. Bis vor kurzem haben sich noch ganz viele drüber gestritten. Am Anfang hieß es, hey Angular JS ist ein MVC Patter oder so ein Model View Controller, der andere hat gesagt, nee, das ist ein MVVM. Google hat da jetzt ein Strich durch die Rechnung gemacht und sagt jetzt einfach hey wir sind ein Model-View.Whatever. Eigentlich kann man uns nicht in ein klassisches Muster hineindrücken, denn die machen eigentlich drumherum noch so viel und sind davon losgelöst, dass man nicht mehr sagen, dass wir ein Model-View-Controller sind. Am ehesten würde ich persönlich sagen, es ist ein Model-View-View-Model das heißt MVVM, aber wir lassen uns nicht mehr da reinpressen und deswegen dieses Whatever. Dieses Whatever bedeutet aber nicht, dass die Jungs nicht wissen was sie tun, sondern einfach nur ich glaube dass die es Leid waren immer diese Diskursion zu führen, was seid ihr eigentlich für Pattern, wonach richtet Ihr euch. Last but not least, bietet mir AngularJS wirklich eine mega coole Umgebung, um Unit Testing und End-2-End zu machen, so dass ich dann meine Anwendung jederzeit noch vernünftig überprüfen kann. In diesem Video haben wir gemeinsam also gelernt, was AngularJS im Grunde genommen kann und was die Kernfunktionen von AngularJS sind.

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
Ihr(e) Trainer:
Erscheinungsdatum:19.11.2014
Laufzeit:4 Std. 15 min (74 Videos)

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!