Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

AngularJS Grundkurs

Routing

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Das Routing, welches einem Deep-Linking-Verfahren ähnelt, stellt ein weiteres Vorlagenkonzept dar. Dieses Video zeigt die Vorgehensweise bei der Initialisierung eines Routing in einer AngularJS-Anwendung.
10:20

Transkript

Eines der aufregendsten Vorlagenkonzepte von AngularJS Anwendungen ist das Routing. Das Routing erlaubt Euch sowas wie ein Deep Linking. Das heißt, Ihr müsst Euch vorstellen, Ihr habt eine ganz normale HTML-Seite, die später Eure AngularJS Anwendung sein soll. Die haben wir jetzt hier. Diese HTML-Seite soll beispielsweise in dem Container selber den Inhalt about, also Über Uns anzeigen. Wenn wir das hier einfach aktualisieren. Das soll immer dann passieren, wenn ich hier in die Adresszeile einfach about eintippe. In dem Moment soll dann about da sein. Ich könnte aber auch theoretisch dann auch hier contact machen und dann soll eine Kontaktseite sich entsprechend initialisieren und angezeigt werden. Damit jetzt dieser Container hier allerdings keine statischen Elemente hat, sondern im Deep Linking überhaupt funktioniert, muss ich folgendes machen. Zum einen entferne ich natürlich die Inhalte und packe sie in Template-Dateien ab. Die Template-Dateien beinhalten einfach nur das, was quasi in diesem Container später initiiert werden soll. Also in diesem Container werden dann diese Inhalte geladen und einfach hineingestoßen. Damit das Ganze funktionieren kann, verwende ich die ng-view Direktive. Die ng-view Direktive müsst Ihr Euch jetzt wie folgt vorstellen. Die ng-view Direktive zeichnet jetzt diesen Div Container mit der Klasse Container dazu aus, Inhalte des Routings entsprechend darstellen zu können. Sie direkt quasi dann ab dem Moment als Target, also als Ziel, für die Indizierung der jeweiligen Vorlagen. Als nächstes muss ich also jetzt nur noch dafür sorgen, dass ich dann, wenn ich ein bestimmtes Routing hier eingebe, dann automatisch auch dann die richtige HTML-Template Datei geladen wird. Wichtig ist, dass das Routing dann zusätzlich aber noch an dieser Stelle berücksichtig, dass es funktionelle Änderungen geben wird. Das ist so was Ähnliches auch ein bisschen wie eine State Machine. Das heißt, er weiß ganz genau, dass bei Über Uns andere Funktionalitäten notwendig sind, also wird es dafür sorgen, dass es die Applikation selber dann auch an dieser Stelle mit einem anderen Controller versehen wird, damit das dann in diesem Controller dann sauber abgearbeitet werden kann. Ich muss also jetzt zwei Sachen vorbereiten. Das erste ist, ich muss das Routing vorbereiten. Das zweite ist, ich muss zwei Controller vorbereiten. Ich beginne jetzt einfach mit dem Controller, weil ich das CtrlModule grundsätzlich hier schon habe. Da habe ich auch schon zwei grundsätzliche Controller angelegt, den AboutCtrl und den ContactCtrl, der ganz wichtig noch hier nirgendwo eingebunden ist. Auch keines der Template bindet diese Controller in irgendeiner Form ein. Die Controller selber, dass die Lebenszeichen von sich geben, werde ich jetzt einfach mit einem log versehen und der log soll nichts anderes sagen, als ein kurzes Feedback darüber, welcher Controller denn just in diesem Moment angefangen hat zu arbeiten. Als nächstes werde ich jetzt dafür sorgen, dass ich das Routing selber programmiere. Das Routing programmiere ich in einer separaten Datei, die ich Routing nenne. Die erzeuge ich jetzt hier auf die Schnelle. Das Ganze Routing kann ich darüber erzeugen, indem ich eine Konfiguration des Applikationsmoduls mache. Schaut mal, ich habe hier ein Applikationsmodul selber. Das Applikationsmodul initialisiert die App-Variable und dieses Applikationsmodul lädt den jeweiligen Controller hier an dieser Stelle. Anschließend wenn alles fertig initialisiert ist, beginnt es hier mit dem run. Das sehen wir auch hier wunderbar mit diesem run app. Jetzt bin ich aber auch in der Lage, diese Applikation, bevor dieses run beginnt, mit einer Konfiguration zu versehen. Das wird dann ausgeführt, bevor das run gemacht wird als allerersten initialisierenden Schritt für die Applikation selber, denn da ist unser Hauptmodul. Ich kann das Ganze machen, indem ich mir also jetzt hier an dieser Stelle mein App schnappe und wenn ich diesen App dann geschnappt habe, kann ich die Methode config verwenden. Die Methode config ist quasi eine Konfigurationsmethode für meine App und die App habe ich hier im MainModule dann entsprechend initialisiert und ich sorge auch hier an dieser Stelle dafür, dass es dann auch von der Reihenfolge her sauber initialisiert wird, dass ich dann entsprechend sicher gehen kann, dass erst das MainModule initialisiert wird und dann erste das Routing. Die Konfiguration selber erwartet von mir ein Parameter. Dieses Parameter muss in Form einer Liste übergeben werden. Das liegt daran, dass die Konfiguration zu einem Zeitpunkt läuft, wo die dependency injection von AngularJS noch nicht greift. Ich kann auch nicht auf alle Elemente der dependency injection zurückgreifen. Ihr müsst also Euch so vorstellen, dass ich das, was ich injecten will, in Anführungszeichen definieren muss und das was ich injecten will, ist dann der routeProvider. Die Liste selber kann ich jetzt beliebig erweitern. Ich könnte hier also nicht n Elemente packen. Achtet darauf, dass die dependency injection wirklich sehr bedingt ist noch in der Konfiguration, also jetzt nicht übermütig werden. Als nächstes kann ich dann anschließend eine Funktion definieren und diese Funktion wird dann bei einem Funktionsaufruf mit den Parametern versehen, die ich hier als String übergeben habe. Das heißt, der Provider wird mittels String an Angular übergeben. Er überprüft dann anhand der Namenskonvention, ob es tatsächlich ein Objekt hat und startet dann diese Funktion dann entsprechend mit dem ersten Parameter, den routeProvider, falls er diesen auch gefunden hat. Den Provider selber könnte ich jetzt hier in dem Funktionsaufruf selber beliebig benennen, zum Beispiel rp oder sonst irgendetwas. Der Einfachheit halber, damit ich auch immer weiß, über welches Objekt ich spreche, nenne ich diesen Parameter eigentlich auch genauso, wie ich ihn injected habe, also Route Parameter. Anschließend bin ich dann in der Lage hier ganz normal zu arbeiten. Eines der Arbeiten, die ich hier machen möchte, möchte ich Euch zeigen, nämlich den console.log, das ich jetzt die Konfiguration machen möchte. Wenn ich das jetzt einmal hier aktualisiere, könnt Ihr wunderbar sehen, dass vor dem run die Konfiguration abgearbeitet wird und dann entsprechend greifen kann. In der Konfiguration selber schnappe ich mir den routeProvider und der routeProvider unterstützt mich mit unterschiedlichen Methoden, die es mir bereitstellt. Eine der Methoden ist die when Methode. Die when Methode erwartet als ersten Parameter, mit welcher Zeichenkette ich das Deep Linking oder das Routing machen will und das ist in dem Falle about für die Über Uns Seite. Anschließend erwartet es ein Objekt von mir. Dieses Objekt muss einmal die templateUrl besitzen. Die templateUrl selber ist templates/about.html und als nächstes erwartet es von mir die Eigenschaft controller und der controller ist der aboutCtrl, den ich zuvor initialisiert habe. Wenn wir also das Ganze jetzt hier einfach ausprobieren, dann sehen wir hier noch gar nichts. Wenn wir aber an dieser Stelle about eingeben, seht Ihr, dass das hervorragend funktioniert hat. Es ist erst die Konfiguration, danach die run und danach wird der aboutCtrl initialisiert, weil dann in ng-view entsprechend das Template geladen und abgelegt wurde und dann entsprechend angepasst wurde. Analog kann ich jetzt auch das Routing für den Kontakt entsprechend initialisieren. Damit ich diese Konfiguration vornehmen kann, dupliziere ich hier einfach die Zeile und sage dann entsprechend, dass Routing soll dann entsprechend auf contact verweisen und das HTML-Template heißt ebenfalls contact, also contact und der Controller heißt contact, also schnappe ich mir diesen ContactCtrl auch noch mal. Das war es dann eigentlich schon. Eine ganz wichtige Sache. When selber gibt dem routeProvider wieder zurück als Rückgabewert. Das heißt, ich bin in der Lage zwei when hintereinander zu verwenden, muss aber natürlich daran denken, dass ich das dann hier von der Syntax her so machen muss, dass ich dann quasi das zweite when hier hinten dranhänge mit einem Punkt dazwischen, denn when gibt den routeProvider zurück und muss ein zweites when dann entsprechend aufrufen. Also darf ich diesen Punkt hier nicht vergessen, der dann entsprechend dafür sorgt, dass ich dann hier when erneut verwenden kann. Analog dazu kann ich jetzt einfach einen Test fahren lassen. Das heißt, wir haben hier das normale about und wenn ich jetzt entsprechend statt about einfach contact eingebe, dann seht Ihr wunderbar, dass dann auch der ContactCtrl initialisiert wird. Der Kontakt selber wird dann auch entsprechend hier dargestellt und dann auch visualisiert. Anders wieder about und dann ist entsprechend wieder about da. Wichtig, wenn ich jetzt hier überhaupt nichts eingebe, passiert auch überhaupt nichts, weil ich in der Konfiguration natürlich nichts definiert habe, was passieren soll, wenn weder about noch contact greift. In dem Moment kann ich aber auch ganz einfach hier in dem Routing selber die Methode otherwise verwenden. Die otherwise Methode wird vom routeProvider bereitgestellt und erwartet von mir als Parameter ein Objekt und dieses Objekt muss eine redirectTo Eigenschaft haben und in redirectTo sagen ich dann einfach, welche Routing verwendet werden soll, wenn quasi irgendetwas angegeben worden war, was kein gültiges Routing ist. Das ist zum Beispiel dann der Fall, wen ich überhaupt kein Routing definiere und dann seht Ihr wunderbar, dass dann automatisch dann entsprechend das about Routing dann aktiviert wird. Hätte ich jetzt hier entsprechend Kauderwelsch eingegeben, würde er dann ebenfalls wieder dann hier an der Stelle das about initialisieren. Würde ich dann an der Stelle contact dann entsprechend wiedeingeben, wird er Kontakt initialisieren. Bei den logs seht Ihr wunderbar, dass die Applikation sich dabei nur ein einziges Mal initialisiert. Es wird also wirklich immer nur wieder die view gewechselt und anhand der neuen view dann auch der neue Controller initialisiert und das, was wirklich traumhaft bei dieser Konstellation ist, ist, dass ich dann ohne Probleme dann auch hier in der Lage bin in der History wieder vor- und zurückzugehen und auf diese Art und Weise wunderbar die jeweiligen views wiederaufzubauen. In diesem Video haben wir gemeinsam gelernt, wie wir in der Lage sind, das Routing innerhalb AngularJS Anwendung zu initialisieren.

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...
 
Hersteller:
Software:
Exklusiv für Abo-Kunden
Ihr(e) Trainer:
Erscheinungsdatum:27.06.2013
Laufzeit:3 Std. 43 min (44 Videos)

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!