AngularJS Grundkurs

Controller definieren

Testen Sie unsere 1958 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Dieses Video zeigt die Vorgehensweise bei der Definition von Controllern in einem speziell dafür erstellten Modul sowie das anschließende Einbinden dieses Moduls im Hauptmodul.
04:34

Transkript

Lasst uns nun gemeinsam ein AngularJS Modul erstellen, das speziell für Controller da ist und in diesem auch einen Controller definieren. Das Ganze ist im Grunde genommen wie immer denkbar einfach. Ich beginne damit, dass ich jetzt erst mal einen Ordner Controller erstellen will und in diesem Ordner Controller dann hier auch einen Controller Datei erstellen möchte, indem ich dann das Modul ablegen möchte. Also erzeuge ich das hier, indem ich es einmal hier vorab in meine index.html lade. Dann kann ich hiermit schnell einen Ordner anlegen und in diesem Ordner dann entsprechend auch die Datei anlegen. Die Datei ist dann auch sofort an dieser Stelle da für mich. Als nächstes erzeuge ich dann ein neues Modul für mich und dieses Modul hat einen Namen. Ich nenne das Ganze app.ctrl. Es sind keine Abhängigkeiten in diesem Modul für mich da. Das heißt, jetzt ist das Modul an sich für mich existent. Ich speichere mir das Ganze dann auch noch in eine lokale Variable ctrl zwischen und kann nun hingehen und mit der Methode controller, die in AngularJS vorhanden ist, dann einen neuen Controller hinzufügen. Die Methode arbeitet ähnlich wie die service und factory Methode. Das heißt, als erstes erwartet sie von mir eine Zeichenkette, wie mein Controller heißen soll. Das ist dann in diesem Fall Controller und als zweites dann entsprechend eine Klasse bzw. direkt eine Funktionsdefinition, was dieser Controller dann entsprechend tun soll. Im Endeffekt würde das dann an dieser Stelle nichts anderes bewirken, als dass wenn ich dann an irgendeiner Stelle diesen Controller binde bzw. dann in einer View verwende, dann eine Instanz dieser Funktion erzeugt wird und in dieser Instanz kann ich dann natürlich Interaktionen jeglicher Form definieren, um dann damit arbeiten können. Wie wir diese Interaktion definieren wollen, werden wir aber noch zu einem späteren Zeitpunkt kennenlernen. Was ich Euch aber noch zeigen möchte ist, dass wir natürlich auch in der Lage sind, einen Konstruktor hier an Stelle des Controllers anzubinden. Das heißt, was ich hier machen kann, ist hier wirklich einfach eine Controller Klasse auch direkt zu erzeugen. In dieser Klasse auch beispielsweise Interaktionen zu erzeugen, indem ich zum Beispiel sage p.onClick = function und kann dann anschließend hingehen und statt einer Funktionsdefinition, wie ich sie jetzt hier habe, einfach hingehen und die Klasse direkt ansprechen. Das heißt, würde ich dann mit dem Zeichenkette Controller dann entsprechend einen Controller instanziieren wollen, wird dann auch wirklich direkt diese Klasse hier erzeugt und auch mehrfach erzeugt, falls es dann mehrere View-Elemente gibt, die mit diesem identischen Controller arbeiten würden. Das heißt, in diesem Kapitel haben wir jetzt gemeinsam gelernt, wie wir einen Controller erzeugen. Ganz wichtig, vergesst es bitte nicht! Ihr müsst natürlich auch dafür sorgen, damit der Controller dann auch später angesprochen wird, dass Ihr in Eurem Hauptmodul kommasepariert diese Abhängigkeit definiert, andernfalls stehen die Controller nicht zur Verfügung. Das heißt, erst ab diesem Moment, wo dieser Controller dann entsprechend hier in dem Hauptmodul als Abhängigkeit definiert wurde, wird auch dieses Controller Modul in die Applikation mithineingezogen und jetzt kann ich hier hingehen, kann das Ganze dann einfach hier öffnen und sehe dann, wunderbar, dass alle soweit funktioniert. Ich habe keine Fehlermeldung und alles läuft hier einwandfrei. Denkt bitte daran, dass einfach nur dieses Einbinden jetzt nicht automatisch dafür sorgt, dass diese Instanz erzeugt wird. Das heißt, würde ich jetzt hier ganz schnell ein console.log machen, ctrl. Speichere das. Mache hier ein Refresh, seht Ihr, dass hier keine Instanz vom Controller erzeugt wurde. Wie denn auch? Ich habe zu keinem Zeitpunkt irgendeine View mit diesem Controller dann entsprechend angebunden. Das heißt, bis hier hin ist alles vollkommen legitim und wir haben jetzt gelernt, wie wir in einem spezifischen Modul einen Controller definieren können. Dieses Modul dann anschließend in das Hauptmodul miteinbinden und dann in einem späteren Schritt in der Lage sind die Controller in Views dann einbinden zu können.

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!