AngularJS Grundkurs

Parameter hinzufügen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Es besteht die Möglichkeit, das Routing mit Parametern zu kombinieren. Dabei werden bestimmte Parameter in der Adressleiste übergeben und die Ausgabe wird entsprechend dieser wie gewünscht angepasst.
05:26

Transkript

Besonders spannend ist es, wenn wir das Routing in AngularJS nochmal kombinieren wollen mit Parameter. Ihr müsst Euch das Ganze so vorstellen, dass Ihr ein Deep Linking habt und das Deep Linking möchtet Ihr noch zusätzlich parametrisiert machen. Auch das hört sich wie vieles, wenn man theoretisch davon spricht, relativ komplex an. Aber was Ihr da machen müsst, ist nichts anderes, als in der Konfiguration des Routings schon vorab zu sagen, es werden irgendwelche Parameter in der URL in der Adressleiste zu finden sein und diese musst du dann entsprechend auch entgegennehmen, um die dann mittels dem routeParams dann entsprechend als dependency injection verarbeiten zu können. Bedeutet im Klartext nichts anderes, als dass ich mir jetzt hier einfach meine Routing entsprechend schnappe, das wir einmal definiert haben und in diesem Routing selber haben wir hier die Definition von about und contact und was ich machen möchte, ist noch zusätzlich hier einfach home hinzuzufügen. Home selber soll entsprechend home.html laden und auch einen HomeCtrl. Den HomeCtrl selber habe ich noch nicht angelegt. Das mache ich ganz schnell in meinem CtrlModule. Dupliziere das einfach nur ganz fix. Das ist der HomeCtrl und dupliziere das hier an dieser Stelle noch. Jetzt ist der HomeCtrl dann in dem Moment auch fertig. Bei dem Routing sorge ich dafür, dass home standardmäßig angesprungen wird. Home selber, wenn wir uns das in den Templates anschauen, ist nichts anderes als tatsächlich eine Willkommensseite. Aber die Willkommensseite bindet hier in dem aktuellen Scope die Eigenschaft username. Wenn wir das Ganze hier einfach initialisieren, indem wir das Routing deaktivieren, lande ich dann hier in der Homeseite. Jetzt habe ich irgendwo mich vertippt. Ich habe hier HomeCtrl verwenden wollen, habe aber vergessen, das auch HomeCtrl zu nennen. Jetzt geht das wunderbar auch. Das heißt, jetzt bin ich dann entsprechend im home und der HomeCtrl wurde initialisiert und entsprechend aufgeführt. Damit der User jetzt hier einen eigenen Wert bekommt, kann ich dann hier in dem Controller für den HomeCtrl einfach im Scope hingehen und kann sagen username = test. Machen wir ein Refresh, dann haben wir hier entsprechend den Testwert, der gebunden ist, automatisch mit dabei. Aber viel wichtiger für mich ist es, dass ich im Routing in der Lage sein möchte, quasi in der URL selber zu definieren, wer sich denn dort eigentlich gerade anmeldet. Also wenn ich jetzt hier schreiben würde home/Saban, dann möchte ich sehr gerne, dass dann entsprechend hier Saban und nicht mehr test steht. Damit ich das Ganze realisieren kann, mache ich etwas ganz einfaches. Im Routing selber sage ich, du wirst, wenn du entsprechend aufgerufen wirst, mit einem zusätzlichen Parameter versehen. Den Parameter musst du dann entsprechend entgegennehmen und der entgegengenommene Wert muss dann anschließend in dem routeParams als name Eigenschaft hinterlegt werden. Bedeutet nichts anderes, als dass alles, was hinter home ist, also alles, was ich jetzt hier eingetragen habe, in diesem Fall Kauderwelsch, so habe ich jetzt wieder Saban hin, diesem Fall also Saban, automatisch dann ausgelesen wird von AngularJS und in ein Objekt, das per dependancy injection eingebunden werden kann und routeParams heißt, wiederzufinden ist mit dem Eigenschaftsnamen name. Bedeutet nichts anderes, als dass ich hier im Controller selber eine dependancy injection auf routeParams mache und dann sage, dass der username selber routeParams.name ist. Testen wir das Ganze. Jetzt habe ich es aus Versehen gespeichert. Da ist es. War einfach nur gerade im Cache. Hier sehen wir hervorragend, dass wir dann entsprechend hier den Wert saban übergeben haben. Hätte ich hier beispielsweise peter übergeben, würde dann peter hier hinkommen oder wenn ich dann hier beispielsweise heike schreibe, dann entsprechend auch heike. Also je nachdem, was ich hier übergebe, wird das Ganze in den routeParams als Name übergeben und der Name kann dann entsprechend im Controller hier aufgerufen werden. Natürlich geht das auch von der reinen Theorie her mit einem Leerzeichen an dieser Stelle Das heißt Saban Ünlü wird hier übernommen, obwohl in der Adressleiste dasselbe natürlich URL encoded übergeben wird und dann entsprechend transkodiert wird. Im weitesten Sinne haben wir jetzt also gelernt, wie wir Paramater entsprechend übergeben können. Wir machen das Ganze nur schick, indem ich hier bei dem redirectTo statt einfach nur home sage home/Gast. Speichere das Ganze. Wenn das Ganze dann ohne jegliche Angaben von Werten dann übergeben bzw. gestartet wird, wird dann entsprechend home mit dem Wert Gast gestartet und ich habe hier auch die personalisierte Ansprache Willkommen Gast. In diesem Video haben wir also gemeinsam gelernt, wie wir in der Lage sind, Parameter im Routing zu übernehmen.

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!