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

AngularJS 1.3 Grundkurs

Was ist AngularJS?

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
AngularJS stellt ein Framework für die Entwicklung von Single Page Applications dar. Damit erstellt ein Programmierer Webapplikationen, welche ausschließlich aus einer HTML-Seite bestehen.
05:49

Transkript

Hallo alle zusammen. Ich freue mich sehr euch in diesem Video AngularJS vorstellen zu dürfen. Viele von euch haben sich vielleicht gefragt, was ist eigentlich AngularJS? Nun im weitesten Sinne, wenn wir uns das einfach mal global betrachten, ist AngularJS nichts anderes, als ein Single Page Application Framework. Ein Single Page Application Framework selber definiert sich wie folgt: Ein Single Page Application Framework oder vielmehr eine Single Page Application ist eine Webanwendung, die aus einer einzigel HTML Seite besteht. Das bedeutet, im Grunde genommen nichts anderes als, dass Ihr niemals diese Seite verlasst. Bei normalen Anwendungen, die Ihr im Web habt, habt ihr eine HTML Seite oder habt Ihr Verlinkungen , Ihr klickt irgendwo drauf, verlasst die HTML Seite und wären da zu einer anderen HTML Seite indem Ihr euch dann entsprechend die Inhalte dann anschaut. Das ist bei Serverbasierten Websiten genau so, das heißt, er geht im Grunde genommen hin und wechselt immer die Seite wenn Ihr dann entsprechend was darstellen wollt. Eine Single Page Application, die zeichnet sich dadurch aus, dass sie die Seite niemals verlässt. Früher war das auch haüfig so, dass beispielsweise Flash als Single Page Application Framework wunderbar gedient hat oder als Plattform. Heute sind es unterschiedlichste Frameworks die im Grunde genommen zur Verfügung stehen und AngularJS weiht sich in diese Frameworks ein, wächst aber über die nochmal hinaus und hat euch viele andere, wirklich tolle Features noch zusätzlich zu bieten. Lasst uns aber einmal zurückkommen. Wenn eine Single Page Application aber im Grunde genommen niemals die Seite verlässt, wie um Himmels Willen schaft sie es dann aber immer wieder andere Inhalte zu zeigen. Die Frage beantwortet sich dadurch, dass Ihr euch das ganze so vorstellen müsst, dass durch daten- oder benutzergetriebene Interaktionen Inhalte ausgetauscht werden. Bedeutet zum Beispiel, klicke ich auf einer Shop-Seite auf irgendeine Kategorie passiert nichts anderes, als dass ich hingehe und einem Server eine Anfrage stelle und dann sage, hey schau mal bitte nach was für Artikel gibt es eigentlich in dieser Kategorie und entsprechend dann in der aktiven Seite das DOM Element in dem die Artikel dargestellet werden quazi aktuallisiere, indem ich die bisherigen Inhalte zum Beispiel lösche oder erzetze, animiere oder was auch immer. Damit dieser Austausch auch vernünftig funktioniert gibt es unterschiedliche Technologien um das zu machen. Klassischerweise ist das ganze dann also auf Basis von AJAX, JSON, REST, das dan quazi die Daten geholt werden und sehr häufig dann auch dann mit HTML-Templates, das dann entsprechend die Daten in diese Templates kleinzeitig allerdings gepackt werden damit das Ganze dann dargestellt wird. Weiterhin ist es aber dann so , dass ich natürlich ein großes Problem habe bei einer Single Page Application, und zwar ist es das Problem, dass ich im Grunde genommen nicht in der Lage bin, so wie bei anderen Anwendungen auf den Zurück Button zum Beispiel im Browser zu klicken. Um das ganze zu lösen, geht man hin und definiert Routings. Das hört sich unendlich kompliziert an. Ihr müsst aber im Grunde genommen nur folgendes vorstellen. Klicke ich beispielsweise auf die Kategorie Baumarkt, dann passiert nichts anderes, als dass in der Adresszeile dann über ein Raute versehen oder über andere Steuerzeichen zum Beispiel hingegangen wird und definiert wird, hey ich befinde mich jetzt in der Rubrik Baumarkt. Und in dem Moment wo ich dann auf History Back gehe, wird dann entsprechend die Adresszeile dann natürlich aktualisiert, in dem Bereich in dem ich vorher war. Das erkennt das Framework automatisch, schaut nach, was ist das eigentlich für ein Pattern, das heißt, was ist das für ein Muster und was müsste ich eigentlich anhand der aktuellen Adresszeile anzeigen. Und das ist im Großen und Ganzen schon der Trick. Das heißt, ich kann im Grunde genommen beliebig unterschiedliche Seitenelemente anzeigen, beziehungsweise Inhalte grundsätzlich anzeigen und in den Routing, das heißt in der Adresszeile stehen dann etsprechend unterschiedliche Dateninhalte, die das dann symbolisieren, beziehungsweise die das dann repräsentieren. Auf die Art und Weise bin ich also sehr schön in der Lage dann mit History Back und Co innerhalb einer Single Page Application auch ohne weiteres in die nächste View oder in die vorhergesehenen View zu wechseln. Lasst uns mal jetzt nun gemeinsam anschauen, wie AngularJS Single Page Applicationen realisiert. Nun, die Hauptbestandteile einer Single Page Application sind im Grunde genommen Vorlagen. Ich habe in AngularJS unterschiedliche Vorlagentypen, die ich dann entsprechend zur Verfügung habe und mit diesen Vorlagen bin ich dann in der Lage mein aktuellen HTML DOM entsprechend zu erweitern oder auf komponentenbasierte Art und Weise neue HTML Elemente hinzuzufügen. Weiterhin bietet mir AngularJS eine wirklich hervorragende Art und Weise an mit der ich in der Lage bin Datenbindungen und auch Dependency Injections duchzuführen. Datenbindungen bedeutet nichts anderes, als dass Ihr in der Lage seid Inhalte, die sich in einem Datenmodell befinden dann automatisch in euer Templates zu injizieren und dann entsprechend auch dort rendern zu lassen. Die Dependency Injections die dient euch dabei dafür, dass Ihr in der Lage seid abhängig von bestimmten Situationen, Funktionalitäten automatisch in euer Umgebund dann zur Vefügung gestellt zu bekommen von AngularJS, um zum Beispiel auf bestimmte Services zurückzugreifen zu können oder ähnliches. Weierhin ist das Wunderbare an AngularJS, dass es euch die Möglichkeit bietet mit einer komplett unabhängigen Backend–Technologie zu arbeiten. Das heißt,bei der Single Page Application, die Ihr mit AngularJS macht, kümmert sich AngularJS tatsächlich komplett um das Front-End und ist in dem Moment etwas, das im Grunde genommen von Server nur Daten empfängt und dann selbstsändig entscheidet was es mit diesen Daten anfängt, wie es diese Daten dann entsprechend anzeigt und wie es dann sauber gerendert werdern soll. Und das Tolle an der ganzen Sache ist, dass mir das Ganze wirklich nur ein einziges mal Framework bietet und in diesem Falle ist es das AngularJS Framework, dass es mir erlaubt dann solche Single Page Applications auf die Art und Weise wunderbar realisieren zu können. In diesem Video haben wir also gemeinsam gelernt, dass AngularJS im weitesten Sinne ein Single Page Application Framework ist, das es uns ermöglicht innerhalb einer einzigen HTML Seite den Kontext mit Hilfe von Templates und Ajax Call, also dynamische Aufrufe von Datenbindungen dann immer wieder zu aktualisieren und darzustellen

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!