AngularJS 1.3 Grundkurs

Vorlagen einbinden

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Die Include-Direktive bindet extern ausgelagerte Vorlagen als Template in einer AngularJS-Applikation ein.
04:11

Transkript

In diesem Video möchte ich euch zeigen, wie simple es ist, auch im AngularJS-Kontext mit Vorlagen zu arbeiten, die extern ausgelagert sind. Nun, um euch das zu demonstrieren, mache ich etwas ganz ganz einfaches, und zwar möchte ich, dass dieser Block hier, der im Grunde genommen, beschreibt wie User-Informationen dargestellt werden sollen, wenn sie in einer Liste sich befinden, möchte ich jetzt gerne als eine Vorlage speichern. Ich entferne es dafür hier einfach, und werde entsprechend hier in Users eine neue HTML-Datei erzeugen, die ich user-info nenne, hier packe ich das HTML-Fragment jetzt wieder rein, und im Grunde genommen muss ich jetzt nur noch folgendes tun, und zwar werde ich im User-Controller definieren, dass ich eine Variable habe, template URL, und die verweist entsprechend auf scripts, users und user-Info.html. Das ist exakt der Fade, den ich hier habe, wenn ich bezüglich der index.html entsprechend in den Fade mir anschaue, das heißt, ich gehe in den Ordner scripts in Users, und dort ist dann die User-Info html. Und das habe ich mir jetzt mir in template URL gemerkt, muss dann jetzt nur noch hier die Direktive ng-include verwenden, und die ng-include Direktive wird sich entsprechend jetzt hier einfach die Information aus dem Scope holen. Die Scope-Information, die sich hier holt, wird es entsprechend dann verarbeiten und dafür sorgen, dass dann automatisch die template-Datei geladen wird. Lasst uns das einmal testen! Dann sehen wir, dass das Bild so ist es, dass wir hier eine wunderbare Liste haben, aber ich will euch auch beweisen, dass es auch wirklich geladen wurde, deswegen werde ich hier auf Network gehen, den Cache löschen und einmal nochmal reloaden, und dann werden wir jetzt hier sehen, dass er hier die JavaScript-Dateien geladen hat, und hier seht ihr, dass er das HTML-Fragment geladen hat. Das passiert so schnell, dass ihr das eigentlich im Hintergrung immer nicht mitbekommt. Das heißt, er hat hier das HTML-Fragment geladen, nachdem er das geladen hat, ist Angular so vorgegangen, dass es dann mit dem include dafür sorgt, dass in diesem Last-Item-Knoten hat er dann entsprechend hier die Panel-Information aus dem Template ausgelesen und dann hier direkt inkludiert. Und das ist die einfachste Möglichkeit, wie ich technisch in der Lage bin, eine Vorlage mir zu holen, und entsprechend im AngularJS- Kontext darzustellen. Ich werde übrigens auch ohne Probleme in der Lage, anstelle ich hier eine Eigenschaft im Scope zu verwenden, über eine Zeichenkette eine andere URL zu bestimmen. Ich möchte euch das ganz schnell zeigen, dafür dupliziere ich diese Datei mit der Endung 2 und werde dann hier NAME::: einschreiben, damit wir erkennen, dass es ein anderes Template ist, und in der Index HTML verweisen die nicht mehr auf die Scope Variable, sondern wir packen eins drin rein, zu info2, und testen wir das Ganze jetzt hier, seht ihr, dass ich auch durch den Stream dann in dieser Direktive, dann direkt hier ein Verweis marke. Übrigens ist dieses ng-include eine super Geschichte, um abhängigkeitsgetreu dafür zu sorgen, dass dann andere Templates verwendet werden, also würde ich ng-include zum Beispiel wieder mit einer Eigenschaft verbinden, die im Scope ist, dann hätte ich natürlich den riesen Vorteil, dass ich an dieser Stelle dafür sorgen will, dass wenn sich die TemplateURL Datei noch automatisch das ng-include dafür sorgt, dass das neue Template an dieser Stelle verwendet wird, und somit der alte Kontent hier verschwindet, also eine schöne Möglichkeit, um mit ng-include dann in der Lage zu sein, Vorlagen verwenden zu können.

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!