Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

AngularJS 1.3 Grundkurs

Angular-seed anwenden

Testen Sie unsere 2013 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Dieses Video zeigt die Verwendung von Angular-seed, um die Initialisierung eines Projektsetups durchzuführen. Dabei erläutert der Trainer sämtliche relevanten Komponenten.
07:52

Transkript

Nachdem ihr ngs und git auf einem System initialisiert habt, seid ihr auch in der Lage direkt Angular-seed verwenden zu können Um das zu machen musst ihr nichts anderes machen als ein git clone und Angular-seed findet ihr über github angular/angular-seed.git Als nächstes in dem Ordner, indem ihr das geklont habt entsprechend reingehen und via npm Install alle Notmodulen installieren, die notwendig sind um entsprechend das Projekt testen und starten und entwickeln zu können Anschließend könnt ihr dann über npm start einen virtuellen Server starten, der es euch dann ermöglicht euch zu zeigen wie die Anwendung, an der ihr gerade arbeitet und dann entsprechend funktioniert oder über npm-test die uni test zu machen oder sogar über npm-run update-webdriver und über npm run protactor in der Lage seid dann tatsächlich n2n Test zu machen Lasst uns das Ganze einfach mal versuchen ich werde einfach mal jetzt den Finder schnell öffnen für uns in dem Finder will ich dann entsprechend in den jeweiligen Ordner gehen und zunächst einmal ein Fenster öffnen und über cd wechsele ich jetzt entsprechend in diesem Ordner und nun möchte ich dann über git-clone dafür sorgen, dass das Projekt entsprechend geklont wird ich verwende dann entsprechend git-clone hier an dieser Stelle Er hat hier durch copy und past das ganze Projekt direkt angefangen zu klonen Ich wollte eigentlich am liebsten einen anderen Namen als angular-seed dort eintragen so far so good, dann schauen wir uns mal an, was da drin ist Wir sehen den Applikationsordner, wir sehen den bower.json Datei, diese Datei beinhaltet alle Informationen darüber, was für dieses Projekt notwendig ist In diesem e2e Tests findet ihr die Information von dem Protactor und Scenarios zum testen des entsprechenden Projektes In dem karma.conf findet ihr die unit - Tests entsprechend in dem package.json entsprechend alle Informationen welche Nodmodul initialisiert werden soll Tut mir bitte den Gefallen lasst euch nicht ins Bockshorn jagen, wenn ihr noch nie getestet habt, dann ist das e2e und das karma.conf etwas, schaut mal ihr mal an, das hat nichts mit Grundlagenwissen zu tun ist unendlich spannend Aber lasst euch nicht ins Bockshorn jagen, wenn ihr hier ganz viele Dateien sehen, im Endeffekt ist es nämlich wichtig das Applikationsverzeichnis und hier seht ihr, dass es hier ein app.css gibt in der dann entsprechend unterschiedliche Versionen drin sind es gibt dann view –Modulen und in diesen view-Modulen ist es dann entsprechend ein Modul für view 1 mit der entsprechenden Kontrolle dazu, ein Modul für view 2 Damit wir das Ganze mal vernünftig betrachten können, starte ich das Ganze mal hier, innerhalb meiner Webstorm Umgebung Und dann sehen wir, dass wir innerhalb der index.html ein boilerplate Setup haben, das automatisch für uns angerichtet worden ist Seht ihr dann hier der normalize hier initialisiert wurde, main.css wurde hier angesprochen, die dann entsprechen in Boilerplate wird gebunden, dann die app.css damit dann hier in der css in der css alle relevanten applikations spezifischen css Dateien drin sind, als nächstes wurde dann hier modernizer noch hinzugefügt, um dann entsprechend dafür zu sorgen, dass wenn bestimmte funktionstechnische Einheiten das sind, damit sie auch dargestellt werden können und browsehappy ist hier, damit ich dann entsprechend in der Lage bin hier ohne Probleme auch bei den älteren Browsern einen Bahn-Hinweis anzuzeigen Die relevanten java.scripts Dateien wurden dann alle geladen ein ng-view wurde dann entsprechend abgerichtet Ng-view ist quasi der Container für Views und es gibt 2 Views Einmal gibt es hier die View 2 und die View 1 Und in dem Applikationsmodul selber seht ihr, dass dann entsprechend hier die unterschiedlichen Module initialisiert werden es wird eine route konfiguriert , ihr musst das alles in Dateien nicht verstehen aber einfach nur damit ihr unterschiedlichen Dateien hier einmal nur gesehen habt bitte nicht euch ins Bockshorn jagen lassen Wenn ihr sagt „Mensch, was mache ich hier, ich begreife das gerade nicht“ Wir werden das alles noch zu verstehen lernen, mir ist es nur wichtig, dass ihr wisst, was hier da eigentlich noch drin ist Das war’s im weitesten Sinne, hier sind alle meine Dateien Es sind hier noch unterschiedliche Karma- Konfigurationen die eben mal Testing machen möchte Kann ich hier einfach mal in meinem WebStorm ein Befehl eingeben, so wie im Grunde genommen schon zuvor gesagt worden ist, mit dem ich die Nodmodule installieren kann Diese Nodemodule werden dann anschließend in diesem Setup drin sein, dass kann ich auch im Webstorm machen, für den Fall, dass ihr nicht im Webstorm arbeitet, einfach in das Verzeichnis reingehen (cd-02-06… so) jetzt bin ich in dem Verzeichnis drin und kann npm-install eingeben Wenn ich npm-install eingebe werdet ihr gleich sehen, dass das hier ein Ordner erzeugt wird und in diesem Ordner der erzeugt wurde sind dann alle node-Module drin, die ich dann benötige, um dann anschließend das Projekt starten und testen zu können (so jetzt arbeitet er noch ein wenig) jetzt hat der Bower gestartet, über den Bower-Start werden alle relevanten Bibliotheken geladen und wenn wir uns das nochmal anschauen dann habt ihr das hier drin noch (Moment, jetzt habt ihr das geschafft) So dann haben wir hier die jeweiligen Nodmodule für das ganze Projekt und in der Applikation selber seht ihr dann entsprechende bower-components hinzugefügt worden sind, die html.bower- Komponente, Angular- route um Route definieren zu können, Mocks um testen zu können, Loader, und Angular selber, als Angulare-Modul Und jetzt kann ich ganz einfach im Ordner npm.start angeben, nach wenigen Sekunden startet dann auch der Server Und das, was jetzt besonders an dieser Stelle ist, ist dass der Server auf port 9999 läuft Das heißt ich kann jetzt hier einfach mal mein Chrome starten, so (localhost-9999) und kann direktiv an dieser Stelle jetzt meine Anwendung dann testen, ihr seht, dass diese Anwendung hier über eine Route verfügt, über 2 Seiten und dann entsprechend das Ganze auch wunderbar hier funktioniert Eigentlich kann ich natürlich auch mal hierhingehen, beispielsweise in dem neuen Fenster nom-test eingeben und dann startet Karma-Test, der macht alle unit-Tests und überprüft dann sagt Hey, alles ist wunderbar gewesen, funktioniert alles oder ich kann npm run protactor eingeben, wenn alles gut geht, sollte er gleich ein n2n Test machen Was wir aber auf jeden Fall innerhalb der letzten Minuten gelernt haben ist, ist, dass ich mit AngularJS-seed in der Lage bin, ein komplettes Projekt-Setup zu machen, , inklusive virtuelle Server, inklusive unit-Testing, alle meine Ordner sowie ich sie brauche, die ganzen Ordner die ganzen Ordner funktionieren und dann komplett auch ein e2e Test zur Verfügung steht Es funktionier alles nicht sehr wahrscheinlich, weil ihr seht, dass Zertifikaten-Service, dass ich die Sachen nicht parallel laufen lassen kann, entschuldigt bitte Aber im weitesten Sinne habt ihr ein komplettes Setup mit dem ihr im Grunde genommen genommen alle notwendigen Elemente habt, um schön entwickeln zu können und um euch nicht Sorgen zu machen um irgendwelche anderen Sachen So noch einmal zum Abschluss der Protractor- test auf Port 8000 läuft ich muss den Port nämlich bei mir umstellen aufgrund der Tatsache, dass ich hier bei mir den Port 8000 nicht verwenden konnte, (gebt mir 2 Sekunden, bitte) jetzt gehe ich hierhin und ändere das schnell Noch einmal den Run von Protractor, und ja er macht den Test Ok, das war’s im Grunde genommen Also was wir hier gesehen haben ist das Angular-seed und das gesamte Setup

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!