AngularJS 1.3 Grundkurs

Manuelles Projektsetup

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Das manuelle Projektsetup stellt eine Methode dar, um ein Projekt zu initialisieren. Hierfür müssen zunächst die aktuellen Bibliotheken und Codes geladen und auf einer HTML-Seite eingebunden werden.
03:55

Transkript

Lasst uns nun mal gemeinsam anschauen, wie wir manuell ein Projektsetup erzeugen können. Nun das erste was wir machen müssen, ist später auf die Angular-Seiten zu surfen und dort erstmal via Download die aktuellen Bibliotheken und die JavaScript-Codes für AngularJS herunterzuladen. Als nächstes würden wir dann eine neue Ordnerhierarchie erstellen und in dieser Ordnerhierarchie dann eine HTML-Seite erzeugen, in dieser HTML-Seite würden wir dann die Angular-Bibliotheken einbinden und zu guter Letzt würden wir mittels ng-app, angular-ing das DOM-Modell mit aufnehmen und damit dann vollends dann initialisieren in unsere HTML-Umgebung. Um das ganze realisieren zu können, muss ich wie gesagt zunächst einmal via Download hier hin gehen und mir die aktuellste Version von Angular 1.3 als ZIP herunterladen. Ich könnte theoretisch auch die minified Version herunterladen. Ich lade bewußt die ZIP deswegen runter, um euch einfach nur zu zeigen, welche unterschiedlichen Module es alles in AngularJS gibt und euch ein ganz kurzen, groben Überblick dessen zu geben, was für Dateien nachher rumschwirren und was die für eine Bewandtnis haben. Ich habe den Download bereits vorab gemacht, wie ihr hier unten sehen könnt, deswegen erspar mir das noch mal und habe auch bereits einen neuen Ordner erstellt und in diesem neuen Ordner, den ich erstellt habe, möchte ich jetzt entsprechend dann dieser Angular-Setup initialisieren. Der Ordner ist wie ihr hier seht komplett leer und ich beginne jetzt erstmal mit einem Directory Names libs. Und in das libs-Directory füge ich jetzt einfach via Drag and Drop das gesamte entpackte Angular-Verzeichnis hier rein. Da haben wir es. Ihr seht, dass jetzt in diesem Angular-Ordner unterschiedliche Dateien drin sind, Die wichtigste Datei ist angular.js selber, den es einmal als minimiert und einmal mit einer map hier entsprechend dann noch zusätzlich gibt. Hier sind die gesamten Core-Komponenten beziehungsweise die Core-Programmierung und der Hauptbestandteil von AngularJS drin. Zusätzlich habt ihr aber noch Module, die ihr optional in euer Projekt mit einbinden könnt. Animate beispielsweise müsstet ihr per Script in eure HTML-Seite laden und anschließend in euer Applikations-Modul mit einbinden, wenn Ihr Animation realisieren wollt, Aria, um Accessibility zun bedienen, das heißt, um behindertengerechte Internetseiten zu machen, Cookies, wenn ihr mit Cookies arbeiten wollt, Loader, wenn ihr asynchron laden wollt, Messages, wenn ihr entsprechend technisch in der Lage sein wollt, Formulare mit Botschaften zu versehen, Mocks, wenn ihr end-to-end-test bzw. auch unit testing machen wollt Resource, wenn ihr Restschnittstellen verwenden wollt, Route, um Deep Linking und Rooting entsprechend zu realisieren, Sanitize, damit ihr in der Lage seit, auch beispielsweise HTML-Elemente reinzupacken, Scenario ebenfalls zum Testen und Touch, um dann wirklich touch-Interaktionen in eurer Angular-Anwendung direkt verwenden zu können. Das Nächste was ich machen muss, ist eigentlich relativ einfach. Ich erzeug jetzt meine HTML-Seite. So. Und würde dann in der HTML-Seite hier an dieser Stelle hingehen und via script entsprechend angular mit einbinden. Ich hab das jetzt mal in der unkomprimierten Version gemacht, dann ist es später beim Debugging etwas einfacher. Und weiter würde ich jetzt hier hin gehen und würde dann natürlich hier ng-app einfach dann entsprechend einbinden, damit ich dann Angular an dieser Stelle initialisieren würde. Damit ihr dann seht, dass auch Angular dann in diesem Setup dann schon mit drin ist, öffne ich das mal ganz schnell im Browser. Technisch sehe ich natürlich nichts, aber ich kann jetzt hier mal einen Konsolen-Log von einem Angular-Objekt machen. Und da seht ihr, dass Angular instanziiert wurde und das Angular ist dann entsprechend der Namensraum, in dem alle Angular-spezifischen Methoden und Funktionen zur Verfügung stehen, womit ich dann im Verlauf mein Anwendung erzeugen kann. Wir haben also in den vergangenen Minuten gelernt, wie wir in der Lage sind, erstmal die Dateien herunterzuladen und anschließend Angular dann in eine HTML-Seite mit einzubinden und das ist erstmal grundsätzlich ein nacktes manuelles Setup gewesen.

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!