AngularJS 1.3 Grundkurs

Controller erzeugen und anbinden

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Dieses Video erläutert die Vorgehensweise, um einen Controller innerhalb eines Moduls zu registrieren und diesen anschließend an ein HTML-Element zu binden.
04:03

Transkript

In der AngularJS Welt kann ich super einfach einem Viewelement Businesslogik übermitteln. Dafür kann ich einfach einen Controller erstellen und diesem Controller binde ich dann via NG Kontrol einfach an ein HTML Element. Anschliesend erzeugt Angular automatisch ein Scope. Das ist ein Gültigkeitsbereich und dieser Gültigkeitsbereich ermöglicht dann entsprechend den Austausch zwischen Controeller und Viewelemet, indem es dann entsprechend Funktionalitäten und Eigenschaften bereitstellt. Lasst uns das Ganze einfach mal machen, damit ihr seht wie einfach das ist. Ich werde hierfür zunächst einmal hingehen und einen Bereich erstellen, den ich als Section definiere und in der Section selber werden wir jetzt einen User entsprechend hier definieren. Als nächstes möchte ich ein Usermodul erzeugen. So! User und das Usermodul, das mache ich hier dann als use strict. Mache ich hier eine gekapselte Funktion. So wunderbar! Und verwende dann entsprechend hier Users als Modul. Registriere das app.usersmodul. Das befindet sich in keiner Abhängigkeit. Und jetzt kommen wir dazu den ersten Controller zu definieren und zwar kann ich hier einfach von dem Modul selber die Methode .Controller verwenden. Ich hätte jetzt natürlich auch theoretisch einfach hier Users.Controller schreiben können. Das ist im Grunde genommen der gleiche Spaß. Ich hab einfach an dieser Stelle lediglich dafür gesorgt, dass ich direkt, ohne dass ich ein Semikolon setzte, die Controllerfunktion da hinterher gehängt habe,denn Angular Modul gibt mir ja entsprechend das Modul zurück. Cotroller würde es mir übrigens auch zurück geben. Controller selber erawartet jetzt von mir ein String oder ein Object, welches dann entsprechend der Name für den Controller sein soll und weiterhin erawrtet es eine Konstrukterfunktion von mir, die dann entsprechend automatisch aufgeruft wird in dem Moment, wo ein DOM-Element mit diesem Controller verbunden werden soll. Und hier verwende ich dann entsprechend den Namen User Controller und als Funktion benutze ich dann jetzt hier entsprechend mit der Konsole Log die Information, dass der Controller hier für den User fertig ist. Wunderbar, OK. Perfekt, jetzt müssen wir nur noch in die Index HTML zurück und können dan über ng-controll dafür sorgen, dass der User Controller dort drangehängt wird. Der User Controller ist jetzt entsprechend da. Wunderbar, ist vernünftig verbunden. Und wenn ich mich jetzt nigendwo vertippt haben sollte, sollten wir jetzt hier einen schnellen Test machen können. Oh, da ist ein Fehler und lasst mich kurz überlegen. Ach das ist die typische Tücke. Ich erzähle es 100 mal und wenn ich das als Abhängigkeit hinzufüge wird dann natürlich auch der Controller zu verfügung stehen. So,Perfekt! Testen wir das nochmal und dann sehen wir dann, dass dann entsprechend der User Controller sich hier ordnungdgemäß initialisiert hat. Und ich habe hier ein kleines Plugin für Chrome instaliert. Das zeigt mir jetzt hier wunderbar, dass ein Scope erstellt worden ist. Und dieses Scope wurde dann entsprechend hier für User erstellt. Ich habe hier noch ein zweites Puligin. Das zeigt dann ebenfalls, dass ich dann hier zwei unteschiedliche Scopes habe. Der erste Scope ist der Woodscope und der zweite ist der Scope, der für diesen User Controller angelegt worden ist, damit ich damit arbeiten kann. In diesem Video haben wir also gelernt, wie wir in der lage sind relativ schnell einen Controller zu erzeugen und dann anschliesend an ein HTML Element dranzuhängen.

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!