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

Template-Datei als Vorlage

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Die ng-include-Direktive bietet in AngularJS eine weitere Möglichkeit, um Vorlagen zu verwenden. Hierbei wird eine Template-Datei an eine URL gebunden und beim Laden automatisch in einem HTML-Element eingebettet.
05:39

Transkript

Ein weiterer sehr besonderer Ansatz bzw. eine weitere sehr besondere Möglichkeit, um Vorlagen in AngularJS zu verwenden, ist mittels der ng-inlude Direktive. Die ng-include Direktive müsste Ihr Euch so vorstellen, bindet sich an eine URL zu einer Templatedatei und sobald sich diese URL ändert durch die Bindung, sorgt es dafür, dass es dann innerhalb eines bestimmten HTML-Knotens eingebettet wird. Das heißt, dieses Template wird geladen und automatisch dann in das HTML-Element eingefügt. Hört sich immer wahnsinnig kompliziert an, wenn man das Ganze im realen Leben sieht man, dass das Ganze sehr überschaubar ist. Schaut mal, was wir hier haben. Ich habe hier eine kleine HTML-Seite. Diese HTML-Seite verfügt über einen Container und der Container wiederum verfügt über einen Content. Der Content ist zum einen die Überschrift, die wir hier auf der rechten Seite sehen und zum anderen der ganz normale Inhaltstext. Wenn wir also hier mit der Direktive arbeiten wollen würden, hätten wir das ng-include, das wir hier anwenden können. Das ng-include könnten wir so anwenden, dass wir zum Beispiel sagen könnten templates/test.html. Dann würde ich hier entsprechend einen Ordner templates anlegen müssen. Dann würde ich entsprechend hier einfach eine neue Datei anlegen wollen, die sich test.html nennt. In die test.html würde ich den Inhalt hier entsprechend einfügen und damit wir auch gleich wirklich sehen, dass es funktioniert hat, würde ich dann hier schreiben Included Header und es hat funktioniert. Das, was jetzt also passiert an dieser Stelle, ng-include ist gebunden mit einem String, der sich nicht ändern kann, weil ich einfach noch nicht im Scope irgendetwas hinterlegt habe. Dieser String wird dann automatisch in das ng-include übernommen. Das bedeutet, dass diese URL, die ich hier definiert habe, dazu benutzt wird, dass dann vollautomatisch in diesem Container Knoten der Inhalt der test.html eingebettet wird. Würde ich jetzt also hier ein Refresh machen, könnt Ihr wunderbar sehen, dass das Ganze funktioniert, obgleich in der index.html selber nur ein Pfad definiert ist. Normalerweise würde das anders laufen. Normalerweise würden wir in dem Controller uns den Scope schnappen und in den Scope würden wir beispielsweise schreiben temp = und dann nehmen wir eine home URL und diese home URL habe ich auch ein bisschen vorbereitet. Das heißt, ich schnappe die hier und habe quasi einfach schönere Templates vorbereitet, die ich jetzt hier schnell hineinkopieren möchte. Die home URL ist nichts anders, als dass dann entsprechend hier Willkommen mit einem Usernamen kommt, der am Anfang noch nicht definiert ist. Ein kleiner lorem ipsum Test, um dann entsprechend hier noch eine Schaltfläche, auf die ich klicken möchte und sobald ich dann hier drauf geklickt habe, möchte ich, dass dann entsprechend auf die Kontaktseite gewechselt wird. Die Kontaktseite selber ist hier ein Formular. Alles in allem aber einfach keine HTML-Seite, sondern tatsächlich nur Fragmente. Das sind also einzelnen Elemente. Das habe ich jetzt hier wunderbar in den Controller als temp hinterlegt als URL. Muss also in meiner index.html nichts anderes sagen, als dass dann der Wert aus dem Scope temp dann übernommen werden soll. Mache ich ein Refresh, sehen wir dann hervorragend, dass wir dann ab jetzt hier den lorem ipsum Text haben, den wir zuvor in dem home Template gesehen haben. Wenn ich auf Kontakt klicke, soll etwas Bestimmtes passieren, nämlich es soll dann die Funktionalität aufgerufen werden openContact. Die Funktionalität muss ich natürlich noch im Controller hier hinzufügen, indem ich sage im Scope füge openContact als Funktion hinzu. Was ich dann möchte ist, dass dann einfach die Scope Variable temp angepasst wird und statt der home soll dann einfach contact geladen werden. Wenn wir das aktualisieren nochmal, dann sehen wir, dass ich mich irgendwo vertippt haben muss. Schaue ich einmal ganz schnell. Ich sollte auch function schreiben. One more time. Contact und schon bin ich dann entsprechend hier an dieser Stelle in meinem Formular drinnen und in dem Formular bin ich dann direkt in dem Kontaktformular gelandet. Das heißt, ich bin wirklich in der Lage dann die Templates unterschiedlich zu initialisieren und zu laden. Bitte achtet unbedingt darauf, wenn Ihr das macht, dass Ihr Euch in einer local host Umgebung, also das heißt, auf einem virtuellem host befindet oder auf einem Server befindet. Das liegt schlicht und ergreifend daran, dass je nachdem auf welchem Browser Ihr seid, es sonst zu Sicherheitsverletzungen im Browser kommt. Das heißt, er würde eventuell die Templates nicht laden. Ich bin hier auf Nummer Sicher gegangen und habe einfach auf die Schnelle meine Testdateien in meinem local host abgelegt, damit mir genau hier keine Probleme entstehen können. Wenn wir dann auch im Netzwerkprotokoll einfach schauen wollen, dann sehen wir auch, dass dann entsprechend die jeweiligen Elemente wirklich einzeln nachgeladen werden und einzeln nachgeladen dann auch in den Container, den ich hierfür vorgesehen habe, dann hinzugefügt werden und inkludiert werden. So bin ich wirklich sehr flexibel, um Inhalte gebunden an ein Scope entsprechend austauschen zu können. In diesem Video haben wir gemeinsam die ng-include Direktive kennengelernt und wie wir die ng-include Direktive verwenden können.

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!