AngularJS Grundkurs

Controller erstellen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Durch die Verwendung eines Controllers innerhalb eines HTML-Elements kann dieses in AngularJS mit einer JavaScript-Klasse kombiniert werden.
04:55

Transkript

Lasst uns in diesem Video das erste Mal mit einem Controller arbeiten. Ein Controller dient dazu, dass ich innerhalb eines HTML-Elements in der Lage bin, eine JavaScript Klasse zu kombinieren mit einem entsprechenden HTML-Element. Das Ganze mache ich dann entsprechend mit dem Attribut unter Direktive ng-controller. Hört sich alles wahnsinnig wild an, aber glaubt mir, das ist super einfach. Was wir also jetzt hier machen, ist im Grunde genommen nichts anderes, als dass wir einen Div-Knoten erstellen und in den Div-Knoten verwenden wir dann entsprechend ng-controller als Attribut und nennen an dieser Stelle den Controller MyFirstCtrl. Wichtig ist natürlich, dass wenn wir diesen Controller dann für dieses HTML-Element zuweisen, wir auch unbedingt darauf acht geben müssen, dass wir diesen Controller erstellt haben. Auch das möchte ich ganz schnell mit Euch gemeinsam tun. Es ist nämlich super einfach. Ich erzeuge hier entsprechend ein neues Script-Element vom Type javascript und als Quelle verwende ich dann entsprechend hier an dieser Stelle den Ordner js/ctrl/MyFirstCtrl. Muss dann natürlich auch dafür sorgen, dass ich hier an dieser Stelle sowohl die Ordnerstruktur als auch die Datei erzeuge und kann jetzt in dieser Datei selber nun dafür sorgen, dass ich dann entsprechend mit einer Funktion starte die MyFirstCtrl heißt. Jetzt kommen wir zu dem ersten Highlight eigentlich innerhalb der AngularJS Umgebung, nämlich dass ich hier in der Lage bin jetzt dependency injection durchzuführen und dependency injection bedeutet, dass ich in diesem Parameteraufruf meiner Funktion dann entsprechend dafür sorgen kann, dass ich bestimmte AngularJS Elemente einfach hier mit aufführen lasse und AngularJS begreift das Ganze und macht nun an dieser Stelle folgendes. Es initialisiert anhand des Div-Ctrl und anhand des Attributs, das ich hier gesetzt habe, automatisch eine Instanz von MyFirstCtrl, die ich hier definiert habe und wenn es das Ganze instanziiert, erwarte ich jetzt durch diesen Ausdruck $scope, dass ich den Gültigkeitsbereich dieses Elementes dann entsprechend dann hier in diesem Controller verwenden möchte. Dieser Gültigkeitsbereich ist nichts anderes als ein Objekt, in dem ich nun alle Funktionen und auch natürlich Variablen definieren kann, die innerhalb dieses HTML-Elementes anwendbar bzw. zugreifbar sind. Das Ganze sieht im weitesten Sinne super einfach aus. Ich muss nämlich jetzt anschließend innerhalb der Funktion nichts anderes machen, als dass ich sage, ich definiere jetzt meine erste Scope Variable. Das mache ich, indem ich das Objekt Scope nehme und das Objekt dann erweitere durch die erste Variable und das Ganze werde ich jetzt auch noch mit einem Wert versehen und habe dann somit jetzt innerhalb des Controllers, das den Gültigkeitsbereich jetzt kennt, dafür gesorgt, dass ich in dem Gültigkeitsbereich selber eine Variable definiert habe und einen Wert zugewiesen habe. Jetzt kommt ein wenig die Magie von AngularJS. Dadurch dass jetzt hier der Controller mit diesem Div-Elementen gebunden ist, kann ich jetzt hier nämlich wirklich einfach hingehen und kann hier mit den geschweiften Klammern, die ich doppelt verwende, eine Bindung erzeugen zu meinem Variablen, die es in den Scope dann entsprechend gibt, in den Gültigkeitsbereich gibt und die Bindung, die ich erzeuge, kann ich dann entsprechend zu dem variablen Wert myVariable machen und definiere das Ganze hier. Mache einen Refresh dann entsprechend und hier seht Ihr wunderbar, dass dann entsprechend automatisch der Wert, der in dem Controller definiert worden ist, mittels der Bindung, die ich dann durch die zwei geschweiften Klammern dann hier symbolisiere, dann entsprechend darstellen kann. Das kann ich auch machen, indem ich jetzt hier zum Beispiel sage angularJS rocks. Speichere das Ganze. Mache eine Aktualisierung und habe dann entsprechend hier direkt den Wert. Noch einmal zum Zusammenspiel. Ich habe meinen Div, den weise ich einen Controller zu. Der Controller hat einen eindeutigen Namen. Den Controller habe ich auch ebenfalls geladen und in den Controller selber habe ich per dependency injection das Scope eingebunden. In den Scope, also in den Gültigkeitsbereich habe ich eine Variable und einen Wert definiert und diesen Wert lasse ich einfach hier ausgeben. In diesem Video haben wir also gelernt, wie wir in der Lage sind mit sehr einfachen Mitteln den ersten AngularJS Controller einzubinden und in ein HTML-Element zu übergeben.

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!