AngularJS 1.3 Grundkurs

Änderungen an Dependency Injections vornehmen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
AngularJS übernimmt bei der Minimierung einer Datei Informationen aus einer Dependency Injection standardmäßig nicht korrekt. Hierfür müssen einige kleine Änderungen durchgeführt werden.
04:33

Transkript

In diesem Video möchte ich euch einen Tipp geben oder vielmehr ein Rat geben, denn ihr werdet mit an Sicherheit grenzender Wahrscheinlichkeit Einsteiger als Einsteiger in die AngularJS Welt auf folgendes Problem stoßen. Ihr werdet, so wie es bisher gemacht habt, wunderbar, eure Elemente hier programmieren, und bei der Programmierung eurer Elemente werdet ihr darauf achten, dass wir hier Controller erzeugt etc., etc., etc. Dabei werdet ihr mit Sicherheit auch mal Dependency-Injection verwenden. Was sie aber auch erleben werdet, ist, dass ihr bei der Veröffentlichung eurer Applikation sehr häufig auch die Datei minimieren werdet. Und wenn ihr diese Dateien minimiert, dann passiert folgendes: hier wenn wir uns diesen Controller mal gucken, mit dem wunderbaren Scopeobjekt, dass wir hier haben, mit dem Elementenobjekt, wo auch hier, wenn wir uns es anschauen, alles wunderbar hier funktioniert, wird die Datei minimiert, wie folgt aussehen, und zwar, ich formatiere das einmal schnell für uns. Ist es so, dass ich hier den Code absolut optimiert habe oder Controller wird hier angeliegt, aber guckt mal hier, ich mache das mal hier parallel, dass wir uns gleichzeitig angucken können. Aus dem Controller, mit der Funktion, wo ich die Dependency-Injection mit "scope" und "element" gemacht habe, wurde auf einmal durch die Komprimierung aus dem Parameter ein "c" und ein "b". Das ist auch volkommen legitim, bitte lasst uns das hier festhalten. Das ist eine vollkommen legitime Art und Weise der Komprimierung dieser Datei. Nur mit dem Nachteil natürlich, dass Angular selber jetzt mit "c" und "b" überhaupt nichts anfangen werden wird. Das heißt, wenn ich jetzt hier an dieser Stelle die minimierte Datei hier mischend habe und dann verwenden wollen würde, bekomme ich die Information, hey, du versuchst hier irgendwas mit einem "c" zu machen, ich kenne aber kein "c". Und hier kommt ihr dann entsprechend ins Werk denn, um Controller oder halt auch Services, Factories, Direktive etc. verwenden zu können. Im AngularJS-Kontext, ohne dass die Dependency- Injection Information verloren geht, müsst ihr das ein winzig kleines bisschen anders schreiben. Das ist auch nicht wild, ehrenwort. Ich dupliziere das einfach mal, um das Original zu haben. So sah es mal ursprünglich aus. Und das, was ich jetzt hier eigentlich machen muss, ist folgendes: ich erzeuge, im Grunde genommen, wenn ich jetzt hier mit dem Objekt arbeiten möchte, nicht mehr direkt eine Funktion, sondern anstatt einer Funktion direkt zu erzeugen, erzeuge ich ein Array. Dieses Array selber hat dann die die ich in meiner Funktion habe, ebenfalls. Allerdings hat sie diese Information als Zeichenkette, schaut mal! Und anschließend, lasse ich die gesamte Funktionsinformation exakt so, wie sie ursprünglich war, muss nur noch daran denken bitte, dass sobald ich die Funktion hier beendet habe, ich auch dadran denken muss, dass ich mein Array schließen muss. Und habe ich das auf diese Art und Weise gemacht, ist folgendes passiert: das funktioniert, auch wie gesagt, mit Factory, Direktive, Services, alles Mögliche. Der Controller wird, wie gewohnt, diesmal hier über die ersten Parameter erstellt, wo der Name des Controllers definiert wird. Als zweiter Parameter erkennt nun Angular, hey, ich habe hier gar keine Funktion, sondern es wird mir eine Liste übergeben, und dabei besitzt AngularJS die Intelligenz, zu erkennen, dass in der Liste das letzte Objekt die Colbek Funktion ist, die ich sonst auch aufrufen würde. Und wenn es diese dann entsprechend aufruf, ruft es die Funktion mit den Parametern auf, die ich zuvor als Zeichenkette vorab definiert habe. Das heißt, selbst wenn durch die Minimierung hier Scope und Element optimiert werden würde, wird hier durch die Zeichenkette diese Minimierung nicht stattfinden. Und gucken wir uns das jetzt einfach mal an, in der minimierten Variante, dann werdet ihr kennen, dass ich hier wirklich den Controller habe, den "userCtrl", hier wurde der "Scope" und das "Element" definiert, ich habe hier mein "c" und mein "b", aber zur Laufzeit wird das "c" und das "b"dann mit dem Dependency-Injection für "" und "Element" dann gefiltert, weil ich entsprechend diese Parameter hier habe. Gucke ich mir das jetzt mal wieder an, dann werdet ihr sehen, dass die Anwendung ganz normal funktioniert, diesmal auch wirklich mit der minimierten Variante. Und das, auf Grund der Tatsache, dass ich hier mit dem Array gearbeitet habe.

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!