AngularJS 1.3 Grundkurs

Yeoman anwenden

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Nach der Vorbereitung bestehen die weiteren Schritte in der Installation von Yeoman und der anschließenden Initialisierung eines Projektsetups mit Hilfe des AngularJS-Generators.
07:12

Transkript

Nachdem ihr nun alle notwendigen Komponnenten installiert habt, um Yeoman verwenden zu können, müsst ihr als nächster Schritt die Yeoman selber installieren und könnt dann im Anschluss eine Anwendung mit AngularJS oder mit dem AngularJS-Generator als Projekt-Setup initialisieren. Als allererstes müsst i hr zunächst einmal Yeoman installieren. Das macht ihr mit npm install das -g ist für global yo. Und wenn ihr das yo dann gemacht habt, und die Installation durchgelaufen ist, könnt Ihr als nächstes den Generator installieren, und das macht Ihr mit npm install global generator-angular. Anschließend ist das Ganze ja relativ einfach. Ihr geht einfach in einem Ordner, in dem ihr ein Angular-Setup machen wollt, und gibt ein yo, dann den Namen des Generator angular und anschließend den Namen der Anwendung, die ihr dann erstellen wollt. Die ganzen Informationen, wie dann anschließend weiter verfahren werden kann, nachdem ihr dann ein Projekt erstellt habt, so beispielsweise die Information, wie ihr dann anschließend in einem Testserver starten könnt, oder wie Ihr weitere Services Module und Co stellen könnt, findet Ihr auf der Webseite https:github.com/yeoman/generator-angular Einer der wichtigsten Befehle dabei ist grunt serve grunt serve macht nämlich folgendes: es startet über node.js an HTTP-Server, also eine virtuele Server Umgebung und öffnet dann automatisch den Standardbrowser von euch und zeigt euch die Webseite, an der ihr gerade arbeitet, also die AngularJS Anwendung im Browser an. Und das Tolle dabei ist, dass es das inklusive Livereload macht, das heißt, wenn ihr hingeht und und nun beispielsweise SASS-Dateien, CSS Dateien, JavaScript-Dateien oder ähnliches modifiziert, erkennt dieser Server über LiveReload und über den Watch und aktualisiert automatisch die Webseite ohne dass ihr euch darum kümmern müsst, und dementsprechend halt auch, zeigt es euch diese neuen Informationen und neuen Stand der Webseite direkt an. Weiterhin sehr interessantes grunt build, dies erzeugt euch ein Release-Build, und dieses Release-Build erzeugt das inklusive Minimieren von Bildern, inklusive Optimieren von JavaScript Dateien, in dem halt auch die JavaScript Datei minimiert wird, die CSS Datei minimiert wird, Copy-Prozesse gemacht werden, HTML-Seiten optimiert werden, die JavaScript Minimierung im Kontext von AngularJS sauber gemacht wird. Also ganz, ganz viele wahnsinnig tolle Sachen, die dann entsprechend im Bild-Prozess funktionieren. Und natürlich geht auch das Unit-Test mit Gummer, indem ich grunt test eingebe. Und das Ganze dann halt auch in der Konstellation, dass wir nicht mit dem Angular-Generator auch Services oder Controller erzeugen, dass dann automatisch alle Testdateien dann auch miterzeugt werden, so dass ich eigentlich nur noch Füllwörter dann hinzufügen muss, um das Ganze zu machen. Also alles in allem sehr, sehr spannend. Lasst uns das Ganze jetzt einfach mal testen! Dafür öffne ich hier ein Terminalfenster und bewege mich in einen leeren Ordner, den ich soeben ertellt habe, in dem ich jetzt mit yo ein Angular-Setup erstellen will für eine Applikation, die wir v2b beenden wollen. Anschließend bestätige ich das Ganze hier, und der Yeoman-Generator für Angular startet und fragt mich als aller erstes, ob ich gerne mit SASS arbeiten möchte, wenn ich CSS bedienen möchte. Das möchte ich. Ich möchte auch mit Bootstrap arbeiten, und selbstverständlich mit SASS arbeite, die SASS-Version von Bootstrap verwenden. Anschließend werde ich gefragt, welche Angular-Module ich mitinitialisieren möchte, also Animation, Cookie, Rest, Route, Sanitize und Touch. Möchte ich alles haben. Und jetzt beginnt da entsprechend zu arbeiten und let ganz viele unterschiedliche bower-Komponenten und Module entsprechend für mich runter. Muss ich ein klitzekleines bisschen Geduld haben. Und alles hat erfolgreich funktioniert. Jetzt kann ich einfach grant serve eingehen. Es startet daraufhin automatisch ein virtueller Server. Dieser virtuelle Server wird dann die Angular-Anwendung, die ich jetzt hier erstellt habe, dann automatisch für mich starten. Die Anwendung selber, wie ihr hier sehen könnt, die ist so aufgebaut, dass ich hier ein Router habe. Wenn ich auf "About" klicke, seht ihr, dass es hier "About" steht, "Contact" entsprechend, so kann ich dann hier hin und her toggeln. Und jetzt bin ich auch in der Lage, zum Beispiel, Webstorm hier zu öffnen. Und wenn ich jetzt im Webstorm-Kontext bin, gucken wir uns gleich auch mal an, was der hier alles für uns angeliegt hat. Aber zuvor erstmal möchte ich euch zeigen, dass wenn ich jetzt hier Webstorm auf die linke Seite packe und zum Beispiel, mir als Style die main.scss schnappe, dass ich in der Lage bin, beispielsweise hier zu sagen: body soll eine Background-Color haben. und die Background-Color soll "red" sein. Speichere das Ganze jetzt hier. Und im Hintergrund wird jetzt folgendes passieren: Und zwar erkennt im Idealfall der Server automatisch, dass ich was aktualiesiert hatte, und wird daraufhin die Seite automatisch neu laden mit der neuen Farbeinstellung, die ich hier habe, und dass dann entsprechend darstelle, das heißt, sollte ich jetzt JavaScript-Code oder CSS-Code automatisch generieren, wird dieser immer wieder direkt dann neu instanziiert und neu angeliegt, und dann entsprechend auch hier angezeigt. Wenn ich das jetzt mal wegmache, da schnell speichere, erkennt ihr hier, dass er dann wieder erkennt und sagt: "Hey, die mit compass wird das neu erzeugt und hier dann die neue Version dargeliegt. Ich persönlich lieber einige mich auf die Art und Weise die Yeoman die Projektsetup macht.Es gibt momentan im Angular-Generator nur ein einziges Problem. Die Arbeit nicht mehr konform dessen, wie jetzt neuerdings Google eigentlich vorschlägt, wie eine Projektsetup da sein soll, das heißt, ich habe hier mein Index-HTML und dann gibt es hier wirklich Ordner, wo die Views drin sind, Ordner, wo die Scripte drin sind. Und wenn ihr euch erinnert, dann es ist hier so, dass Angular eigentlich vorsieht, dass es jetzt nicht mehr einen Controller-Ordner gibt, indem meine Contoller drin sind, sondern es muss Modulordner geben, in dem die Module und modulabhängigen Contoller und Views dann alle drin sind, das jetzt nicht mehr der Fall ist. Yeoman und der Angular-Generator haben versprochen, dass die sehr bald nachliegen werden, und deswegen wollte ich es mir nicht nehmen lassen, dass trotzdem einmal ganz schnell zu zeigen, wie das Ganze funktioniert, weil neben dem, was wir jetzt gesehen haben mit dem Server-Seiting, habt ihr natürlich auch, wie bereits erwähnt, die Möglichkeit hinzugehen und sowas zu machen, wie beispielsweise, grunt build und der grunt build macht dann entsprechend folgendes: Jetzt wird hier automatisch im Hintergrund ein Build-Prozess gestartet, alle Builder werden optimiert, alle JavaScript-Dateien werden optimiert, die werden alle minimiert. Und ihr braucht euch im Grunde genommen nichts weiteres kümmern und habt dann zum Schluss einen dist-Ordner hier, und in diesem dist-Ordner habt ihr komplett optimierten Code,wo ihr euch nicht mehr drum kümmern müsst, wo dann alle Codeschnipsel mit vendor-Code alle optimiert da sind, im Grunde genommen wirklich perfekt angeliegt sind. Jegliche Image-Dateien sind für euch so optimiert, dass beispielsweise auch durch so Hashwert hindran gehen wird, so was vermieden wird, dass der Cash in irgendeine Form sich alte Daten wehrt. Im Grunde genommen ist das wahnsinnig sexy, was Yeoman da macht. Wir müssen nun bisschen Geduld haben, bis der Generator entsprechend den neuesten Stand hat, aber wisst ihr zumindest, wie es geht. Und grunt test macht im Grunde genommen jetzt hier nichts anderes als einen Test-Server zu starten und die hier in Test definierten Test mit phantonJS dann entsprechend durchführen zu lassen. Hier sind die ganzen Tests drin und dementsprechend wirklich ein wannsinnig spannendes Szenatrio mit Yeoman Projektsetups für Applikation zu machen.

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
Ihr(e) Trainer:
Erscheinungsdatum:19.11.2014
Laufzeit:4 Std. 15 min (74 Videos)

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!