AngularJS Grundkurs

Verlinkungen

Testen Sie unsere 1961 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Verlinkungen können in einem Routing innerhalb einer AngularJS-Anwendung eingesetzt werden. Diese lassen sich als einfache HTML-Links definieren.
06:46

Transkript

In diesem Video möchte ich Euch gerne demonstrieren, wie Ihr in der Lage seid, Verlinkungen zu verwenden, wenn Ihr ein Routing, also ein Deep Linking, in Eure Anwendung dann entsprechend eingesetzt habt. Das ist im Grunde genommen relativ einfach, denn Ihr könnt zum einen natürlich auch Verlinkungen mit ganz normalen HTML-Links definieren und müsst natürlich in den Links nichts anderes machen, als dann dafür zu sorgen, dass der entsprechende Booting Index dann übergeben wird. Also wenn Ihr beispielsweise #about eingeben würdet von der reinen Theorie her, müsstet Ihr natürlich auch auf der About Seite landen, denn das Ganze ist dann ähnlich wie eine virtuelle Ordnerstruktur aufgebaut und müsste dann entsprechend perfekt funktionieren. Um Euch das Ganze zu beweisen, bin ich jetzt hier wieder auf meiner Homeseite. Die Homeseite ist bisher noch nackig und da möchte ich jetzt einen Link auf about definieren. Die Homeseite selber wird mit dem Home Template initialisiert. Da packe ich dann entsprechend meinen Link rein und sage, lade an dieser Stelle bitte hier #/about. Das ist genau das, was wir gerade uns vorgenommen haben. Dann machen wir dann Gehe zu Über uns als Linkbeschreibung. Löschen hier zwei-, dreimal den Cache, nur um sicherzugehen, dass wir dann auch wirklich die aktuellste Seite haben. Gehe zu Über uns klicke ich darauf und wir landen dann automatisch auch hier auf der Über uns Seite an dieser Stelle. Damit wir das bei Über Uns gleich schöner erkennen, werden wir dann das Lorem ipsum ein bisschen verkürzen, damit wir auch wirklich sehen, dass es wirklich Über Uns ist und dass wir einen Seitenwechsel gemacht haben. Analog hätte ich aber auch genauso gut in den jeweiligen Controller auch einen Click Handler mit ng-click auf einen Button definieren können. Das heißt, was ich hier als Beispiel demonstrieren möchte ist, dass ich Über Uns mir einen Button schnappe. Dem Button selber gebe ich die Bootstrap Klasse btn und mit ng-click definieren ich dann die Methode openContact. Die openContact Methode muss ich gleich in den Scope entsprechend hinzufügen. Das, was ich eintragen möchte, ist hier Kontakt und damit das Ganze auch noch schick ist, werde ich da auch noch ein Icon hinzufügen und zwar das Icon Inbox. Das war es dann im Grunde genommen schon. Auf die Art und Weise habe ich dann auf der Über Uns Seite einen kleinen Button, der dann entsprechend auf Kontakt verweist. Testen wir das Ganze, ist der Button entsprechend hier und die Kürzung des Lorem ipsum, damit ich es dann auch sehr schön erkennen kann. Jetzt muss ich also nur noch openContact in dem Über Uns Controller hinzufügen. Also öffne ich das CtrlModule und in Über Uns füge ich dann im Scope selber openContact ein. Bei openContact habe ich mich vertippt. Das möchte ich gerne gleich kurz in Ordnung bringen. Schauen wir noch einmal hier. Jetzt ist es in Ordnung gebracht und openContact selber wird diesen Link jetzt auf eine andere Art und Weise realisieren, nämlich indem ich in openContact an dieser Stelle jetzt so verfahre, dass ich mit der location Eigenschaft, die ich dependency injection mir hinzufügen will oder bzw. mit dem location Objekt arbeite. Das location Objekt packe ich mir per dependency injection also hier rein. In dem location Objekt bin ich unter anderem auch in der Lage zu eruieren, wo befinde ich mich, welche Parameter sind dort, welche Elemente sind hinzugefügt worden, sodass ich mich also quasi zurechtfinde in meiner eigenen Applikation. Die location hat eine Eigenschaft path und diese Eigenschaft path kann ich dann zum Beispiel verwenden, um einfach genauso wie ich im Routing die jeweiligen Elemente definiert habe, dann einfach zu sagen, wo ich hin möchte. Hier brauche ich also die # nicht mit zu definieren. Das übernimmt dann an der Stelle die location, die ich auch gerne einfach per log ausgeben möchte. Testen wir das Ganze also. Klicke ich auf Kontakt, lande ich entsprechend auf Kontakt und hier sehen wir dann das location Objekt. Das location Objekt verfügt über mehrere Informationen, über welchen Port, über welchen http, welchen URL aufgerufen worden ist und kann auf diese Art und Weise mir wirklich sehr viele Informationen darüber geben, wo ich mich gerade befinde und was eigentlich tatsächlich dann hier ausgeführt wurde und location path, die Methode, hat jetzt dafür gesorgt, dass ich dann das Ganze so erweitert habe, dass ich quasi Hash Contact aufgerufen habe. Ich hätte auch ohne Probleme eine Parametrisierung hinzufügen können, indem ich hier noch weitere Werte hinzufüge. Aber das ist natürlich in der Natur der ganzen Sache. Das Ganze mit der Parametrisierung funktioniert natürlich mit einem href. Dafür stehle ich mir jetzt hier schnell diese Zeilen, wandere zum Kontakt und im Kontaktformular selber möchte ich das dann entsprechend hier hinzufügen idealerweise vor dem form. Dann schreibe ich dann hier zurück zu home und verwende dann home mit dem Wert Saban. Speichere das Ganze. Mache ein Refresh. Dann haben wir hier ein zurück zu home und wenn ich dann darauf klicke, lande ich dann entsprechend auf der Homeseite. Auf diese Art und Weise kann ich also wirklich einmal komplett durch unsere Applikation durchnavigieren und das, was ich an diesem Routing so genial finde, ist, dass wirklich dann immer nur das Template und der Controller dann ausgetauscht wird in der Gesamtapplikation und ich dann auch nur wunderbare History Back Möglichkeit habe, um damit dann weiter agieren zu können und arbeiten zu können. In diesem Video haben wir gemeinsam gelernt, wie wir in der Lage sind, im Routing selber auch Verlinkungen zu definieren.

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!