AngularJS Grundkurs

Manueller Bootstrap

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Der Bootstrap einer AngularJS-Anwendung kann ebenfalls manuell durchgeführt werden. Dabei wird das gesamte Framework von AngularJS manuell gestartet.
07:12

Transkript

In den kommenden Minuten möchte ich Euch sehr gerne zeigen, wie wir in der Lage sind eine AngularJS-Anwendung manuell zu bootstrapen. Bedeutet also manuell dafür zu sorgen, dass AngularJS und das gesamte Framework von AngularJS beginnt zu arbeiten und das ist normalerweise ein Prozess, um den wir uns bislang nicht kümmern mussten. Das ist nämlich automatisch passiert. Lasst uns zunächst einmal, also bevor wir hingehen und schauen, wie wir das manuell regeln können, einmal schauen, wie das Ganze überhaupt automatisch realisierbar war. Nun im Grunde genommen relativ einfach. Ich habe hier an dieser Stelle mein Framework initialisiert bzw. einfach nur geladen und dann das Ganze dann mit einem Modul versehen. Das heißt, die HTML-Seite mit einem Modul versehen, das auf Basis von AngularJS nichts anderes gemacht hat, als ein Modul app zur Verfügung zu stellen und dann beim Start des entsprechenden Moduls dann die run Callback Anweisung in diesem Falle einfach einen primitiven Log dann auszuführen. Das Ganze habe ich dann so gemacht, dass ich dann entsprechend mit der ng-app Direktive meine HTML-Seite mit dem soeben erstellen Modul quasi verheiratet habe. Im Gesamtkonstrukt passiert also folgendes. Ihr müsst Euch vorstellen, dass in dem Moment, wo das AngularJS hier dann entsprechend das Framework geladen wird und zur Verfügung steht, wir dann automatisch ein document ready eingebunden von dem AngularJS Framework und dieses document ready macht nun folgendes. Es wartet darauf, dass alles, was in dem Dokument definiert wurde, zu Ende geladen und zu Ende initialisiert ist und dementsprechend dann auch zur Verfügung steht und sobald dann dieser Prozess abgearbeitet wurde und das dom Objekt des Dokumentes komplett zur Verfügung steht, sucht es dann in dem Dokument selber nach der Direktive ng-app. Wenn es dann das getan hat, schaut es dann, welcher Wert dann für dieses Attribut definiert wurde und schaut dann anschließend innerhalb des Angular-Objektes, ob entsprechend mit dem gleichen Begriff ein Modul angelegt wurde. Wenn das der Fall ist, wird natürlich dann automatisch dieses Modul instanziiert, also Instanz von diesem Modul erzeugt und in dem Moment wird dann auch das run ausgeführt. Auf diese Art und Weise sorgt das AngularJS dafür, dass man ohne bestimmte JavaScript-Anweisung automatisch eine Applikation initialisieren kann. Jetzt möchte ich das sehr gerne manuell machen. Das heißt, diesen Bootstrap möchte ich manuell machen. Wenn wir also jetzt hier ganz kurz schauen. Wenn ich hier einen Reload von einer HTML-Seite mache, dann bekomme ich app started, genauso wie wir es hier definiert haben in dem Modul und wenn ich jetzt an dieser Stelle diese Direktive hier rausnehme, also dieses Attribut ng-app entferne, und dann ein Reload mache, kommt das Ganze nicht mehr, weil entsprechend das Modul auch nicht mehr initialisiert wurde, weil der Bootstrap der AngularJS-Anweisung nicht gestartet wurde. Was ich als jetzt als nächstes machen möchte, ist dafür zu sorgen, dass das Bootstrap manuell stattfindet und damit das Ganze manuell stattfinden kann, möchte ich natürlich als allererstes sicherstellen, dass auch das doc ready ist. Damit das doc ready ist, erzeuge ich eine ganz kleine Helferdatei. Die nennt sich main.js und innerhalb der Helferdatei werde ich mittels Intervall, deswegen erzeuge ich hier eine intervalD, überprüfen, ob in dem Dokument selber der readyState of loaded oder completed ist. Das Ganze muss ich dann also so machen, dass ich in einem regelmäßigem Intervall, das ich mir in der intervalID merke, setInterval, function, dann entsprechend überprüfe alle zwei Sekunden, ob dann entsprechend der ready state der HTML-Seite fertig ist. Damit ich das Ganze überprüfen kann, werde ich das Ganze hier dann einfach mit einem regulären Ausdruck machen, den ich vorbereitet habe. Dieser reguläre Ausdruck macht also nichts anderes als zu schauen, ob in der document.readyState Eigenschaft entsprechend der Wert loaded oder completed ist und sollte das der Fall sein, weiß ich dann an dieser Stelle, dass dann die Applikation fertig geladen ist. Dafür werde ich jetzt hier eine console.log machen. doc ready. Dann lasst uns einmal ganz schnell schauen, ob das doc ready hier kommt. Noch nicht. Jetzt ist es da. doc ready. Also nach zwei Sekunden Wartezeit seht Ihr, es ist natürlich ein bisschen suboptimal. Warum ich die zwei Sekunden eingestellt habe, werden wir aber gleich ganz schnell sehen. Denn wir werden jetzt hier in die HTML-Seite gehen und werden dann hier eine zweite Überschrift, eine Unterüberschrift machen. Dann werden wir sagen lade daten. Machen ein Refresh. Da haben wir das lade daten, doc ready kommt jetzt und jetzt möchte ich dann in doc ready selber den manuellen Bootstrap machen. Das heißt, das was sonst das Attribut ng-app für mich gemacht hat. Dafür schnappe ich mir das Angular-Objekt und in dem Angular-Objekt gibt es die Methode bootstrap. Die Methode bootstrap erwartet von mir ein HTML-Element, das kontrolliert werden soll bzw. das verwendet werden soll für den Bootstrap und das, was verwendet werden soll, ist das Document selber. Ist also genauso als hätte ich auf HTML selber dann aufs ng-app gesetzt und das Modul, das darauf initialisiert werden soll, übergebe ich dann mittels der Liste und den String nämlich app und ab diesem Moment habe ich also gewährleistet, dass dann hier an dieser Stelle, sobald das doc ready ist, dass dann automatisch ein Bootstrap auf das Angular app Modul entsprechend ausgeführt wird und wenn wir dann jetzt hier ganz kurz warten, dann sehen wir dann, dass app started kommt. Dieses app started kommt eben hier aus dem Angular-Modul selber und ich kann das jetzt auch auf 10 ms stellen und dann werdet Ihr sehen, dass dann natürlich der Intervall deutlich schneller geht und dass app started dann hier wunderbar hier durchläuft. Was Ihr auch seht ist, dass dieses app started immer wieder kommt, weil ich das Modul immer wieder hier dranhänge. Was ich also jetzt hier machen muss, ist ein clearInterval entsprechend mit der intervalID zu versehen. Im weitesten Sinne muss es das gewesen sein. Ich werde jetzt das app started nur ein einziges Mal bekommen. Das, was ich jetzt hier dann noch zusätzlich im run mache, ist ein document.getElementById und in der Indexseite gebe ich dem Ganzen jetzt hier ein id noch, preloader und was ich mit dieser id dann entsprechend mache ist, dass ich es anspreche, das in einer HTML definiere und sage fertig. Ab diesem Moment beginnt meine Applikation direkt zu laden und ich habe einen manuellen Bootstrap durchgeführt. Das heißt, ab jetzt bin ich in der Lage auch wenn ich jetzt unterschiedliche Ladeprozesse hätte, dann dafür zu sorgen beispielsweise im Preloader zu zeigen und sobald alle notwendigen Elemente dann geladen sind, bin ich dann auch in der Lage hier mittels dem manuellen Bootstrap die Applikation per Hand loszutreten.

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!