AngularJS Grundkurs

Applikationsmodul erstellen

Testen Sie unsere 1924 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Dieses Video zeigt die Erstellung eines AngularJS-Applikationsmoduls sowie das Verbinden dieses Moduls mit einer HTML-Website.
03:35

Transkript

Ich freue mich sehr nun gemeinsam mit Euch mein erstes Applikationsmodul zu erzeugen. Dieses Applikationsmodul, das ich in AngularJS brauche, dient dazu später applikationsrelevante Logiken, Controller und Modelleigenschaften zusammenzuhalten und zusammenzufügen. Ist dementsprechend signifikant notwendig, damit ich überhaupt eine AngularJS Applikation erstellen kann. Nun, wie ich so ein Modul erstelle, ist im Grunde genommen super einfach. Zunächst einmal brauche ich natürlich eine HTML-Seite, die das Modul später laden soll. Diese HTML-Seite habe ich hier vorbereitet, ist also an der Stelle auch kein Hexenwerk und das, was ich als erstes machen will, ist innerhalb des Bodyknoten dann entsprechend einen Scriptblock hier hinzuzufügen, in dem ich das AngularJS Framework selber nun erst mal lade. Dieses lade ich relativ, dementsprechend mache ich hier noch einmal einen relativen Link zu meiner Bibliothek. Als nächstes möchte ich dann entsprechend gleich mein Modul laden. Das Modul existiert noch nicht. Ich weiß aber jetzt schon, dass ich das später in einem Unterordner JavaScript haben möchte und das Ganze soll dann MainModule heißen. Das MainModule.js muss ich dann entsprechend hier erzeugen. Zunächst einmal erzeuge ich den Ordner und in dem Ordner dann entsprechend die JavaScript-Datei und hier sehen wie, dass dann in unserem Konstrukt dann auch entsprechend, dass dann die JavaScript-Datei da ist. Nun werden sich die einen oder anderen denken, was jetzt für eine Magie kommt, dass dann entsprechend das Modul erzeugt wird, was muss ich machen, um dann ein Modul zu erzeugen. Aber im Grunde genommen megaeinfach, das was ich hier an dieser Stelle eigentlich mache, ist nichts anderes als ein neues Modul zu erstellen, indem ich in Angular selber die Anweisung Module verwenden und diese Anweisung erwartet von mir als erstes einen String und dieser String ist ein Schlüsselwort, also ein Index dafür, wie mein Modul heißen soll. Mein Modul soll in diesem speziellen Fall einfach app heißen. Als nächstes bin ich jetzt auch in der Lage innerhalb dieses Moduls Abhängigkeiten zu anderen Modulen zu definieren, damit diese dann bei der Initialisierung des Moduls entsprechend dann angesprochen werden können. In diesem Fall, wo wir unser erstes Modul gemeinsam erstellen, brauchen wir diese Abhängigkeiten nicht. Deswegen lasse ich diese Liste leer. Später könnte ich aber beispielsweise hier sowas machen wie app.module oder auch sowas wie app.ctrl, um dafür zu sorgen, dass dann unterschiedliche Module, die, wie der Name es hier schon verrät, mit unterschiedlichen Aufgabengebieten dann geladen werden können. Jetzt bleibt eigentlich nur noch eine einzige Sache, die ich persönlich immer sehr gerne mache, nämlich das Modul selber, das hier an dieser Stelle zurückgegeben wird über angular.module dann in eine Variable zwischenzuspeichern, damit ich zu jedem Zeitpunkt auch in der Lage bin damit weiterzuarbeiten. Nun haben wir auch schon eigentlich den Großteil erledigt. Das einzige, was wir jetzt noch machen müssen, ist das Modul, das wir vorhin erstellt haben, zu kombinieren mit der HTML-Seite, die wir haben. Um das zu machen, wechsle ich schnell zu der HTML-Seite, um das Ganze jetzt miteinander zu vereinen, zu „verheiraten“. Da muss ich nichts Wildes machen. Ich benutze hier die Direktive ng-app und mit ng-app kann ich dann sagen, mit welchem Modul dann entsprechend die gesamte HTML-Seite, also die Applikation an dieser Stelle zusammenarbeiten soll und das ist in diesem Fall die App-Moduleinheit, die wir vor fünf Sekunden erstellt haben und damit wäre unser erstes AngularJS-Modul nun erstellt und mit der HTML-Seite verbunden.

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!