AngularJS Grundkurs

Modul initialisieren

Testen Sie unsere 1983 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
AngularJS ermöglicht es, Module zu initialisieren sowie bestimmte Anweisungen und Befehle beim Initialisieren eines Moduls auszuführen.
04:39

Transkript

AngularJS bietet uns die Möglichkeit ein Modul zu initialisieren bzw. bestimmte Anweisungen und Befehle bei der Initialisierung eines Moduls ausführen zu lassen. Wie das Ganze funktioniert, möchte ich Euch hier im Folgenden gleich demonstrieren. Aber zunächst einmal ganz kurz das Grundprinzip, wofür das Ganze gut ist und wofür wir das nutzen können. Also AngularJS gibt uns eine Methode zur Hand. Diese Methode heißt run. Diese Methode erwartet von uns ein Callback Parameter. Mittels dieser Methode können wir einen Callback an ein Modul dranhängen, damit dann entsprechend der Callback automatisch aufgerufen wird, wenn das Modul fertig initialisiert ist und bereit ist zu arbeiten. Diesen Umstand können wir aber perfekt nutzen. Wenn wir eine AngularJS-Anwendung entwickelt haben, dass dann entsprechend das Applikationsmodul, das wir erzeugt haben, automatisch angestoßen wird, damit es dann beginnt zu arbeiten und damit unsere Anwendung beginnt zu arbeiten. In Java beispielsweise würde das Ganze auch mit einer Main-Methode einer Dokumentenklasse dann entsprechend verbunden sein oder vergleichbar sein. Lasst uns das Ganze einfach umsetzten. Dafür habe ich eine kleine HTML-Seite für uns vorbereitet. Die HTML-Seite macht keinen Hokuspokus. Sie initialisiert zunächst einmal die AngularJS Bibliothek innerhalb des body tags und lädt dann anschließend eine Moduldatei. Die Moduldatei selber beherbergt das Modul mit dem Namen app und dieses Modul mit dem Namen app haben wir hier in der index.html mittels der ng-app Direktive an unsere HTML-Seite gehängt. Das heißt, wenn diese HTML-Seite geladen ist und dann entsprechend auch hier die AngularJS Bibliothek und auch das Modul selber geladen wurde, sorgen wir dafür, dass mittels bootstrap diese HTML-Seite zu unserem AngularJS-Modul wird und zu unserer AngularJS-Anwendung. Damit wir dann entsprechend hier einen Prozess starten können, sobald die Anwendung fertig ist, also auch die Applikation vollständig fertig ist, machen wir nichts anderes als innerhalb des Moduls selber, das heißt mit der Modulinstanz die Methode run auszuführen, einen Callback zu definieren. Den Callback definiere ich jetzt als Parameter direkt hier rein. Hier soll nichts anderes passieren als ein console.log und app started als Ausgabe. Wenn ich das Ganze jetzt hier entsprechend ausgebe, sehen wir dann wunderbar, dass dann hier mein console.log auch da zu sehen ist. Natürlich kann ich dann entsprechend an der Stelle noch ganz andere Initialisierungen durchführen. Beispielsweise kann ich Business Logiken starten. Ich kann bestimmte Daten laden, die beim Start der Applikation notwendig sind usw. Ganz wichtig ist natürlich dass, wenn ich hier einen Callback definiere mittels run, dass dann in AngularJS selber eine dependency injection möglich ist. Das heißt, ich bin in der Lage dank AngularJS Objekte und auch im Modul definierte Konstanten, Variablen etc. in dieser Methode und vor allen Dingen in diesen Callback zu imitieren und dafür zu sorgen, dass dann im Callback direkt damit gearbeitet wird. Mein lieblingsindiziertes Objekt ist $log. $log ist nichts anderes als ein Objekt, das nichts anderes macht als ein console.log allerdings mit dem Unterschied, dass es dafür Sorge trägt, dass es zunächst überprüft, habe ich überhaupt eine Konsole hier, in der ich überhaupt loggen kann und nur dann entsprechend mittels console.log dann die Meldungen an die Konsole weitergibt. Würde ich das auf die Art und Weise nicht machen, kann es beispielsweise bei älteren IEs dazu kommen, dass es zu einer Ausnahme kommt, weil das Objekt Konsole nicht gefunden wurde. Deswegen mein Tipp hier, initiiert gleich direkt das $log, wenn Ihr console.log verwenden wollt und seid dann entsprechend glücklich. Das console.log könnt Ihr natürlich oder besser gesagt das $log Objekt könnt Ihr natürlich ebenfalls hier mit warn, error und info aufrufen und nicht nur mit log, so wie Ihr es von der Konsole selber gewohnt seid. Was wir also in diesem Video gelernt haben ist, wie wir sehr einfach in der Lage sind unsere Applikationsmoduleinheit mit einem run zu versehen und dafür zu sorgen, dass dann bestimmte Anweisungen bei der Initialisierung der Applikation oder beim Start der Applikation automatisch ausgeführt werden und in unserem speziellen Fall ist es nichts anders, als dass wir hier dafür Sorge tragen, dass dann app started im Konsolenlogfenster erscheint.

AngularJS Grundkurs

Arbeiten Sie sich in AngularJS, einem JavaScript-Framework von Google, ein und sehen Sie, wie Sie mit MVC-Design-Pattern und Dependency Injection im HTML-Umfeld arbeiten können.

3 Std. 43 min (44 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!