Install Node & the Angular CLI

Kursleiter: Für diesen Kurs benötigen wir also einige Tools, die wir Schritt für Schritt installieren und hinzufügen werden. MongoDB wird zum Beispiel etwas später hinzugefügt werden. Was wir auf jeden Fall brauchen, ist Node. js. Zum einen, weil wir Node schreiben und ausführen werden. js-Code, unsere serverseitige Logik, aber auch, weil selbst Angular sie benötigt, selbst wenn wir keine eigene Node-App erstellen würden. Nicht, weil Angular Node verwendet. js-Sprachfunktionen, sondern weil Angular eigentlich ein Framework ist, das einen komplexeren Build-Workflow hat. Also der Teil, wo wir unseren Quellcode nehmen, wie wir ihn als Entwickler schreiben, und ihn in Code umwandeln, der gut im Browser läuft, das ist ein bisschen komplexer mit Angular, weil Angular für den Typ Skript eines Benutzers einen Supersatz zu JavaScript hat. Also eine andere Sprache, die stark auf JavaScript basiert, und das ist wichtig, die nicht im Browser läuft. Und damit es läuft, müssen wir es kompilieren und es wird für uns erledigt. Keine Sorge. Aber der Task-Runner, der die Kompilierung durchführt, ist letztendlich Node. js, zum Beispiel. Dies wird sich also durch den gesamten Entwicklungsprozess ziehen. Dafür brauchen wir keinen Code zu schreiben, aber das sind einige Dinge, die hinter den Kulissen passieren. Und nicht nur die TypeScript-JavaScript-Kompilierung, auch der Angular-Code selbst muss gebündelt und optimiert werden, und wir müssen die Codegröße reduzieren, indem wir ungenutzten Code entfernen und ihn minifizieren. Und all diese Aufgaben werden von Node. js auf unserem Rechner, während wir die Anwendung entwickeln, oder wenn wir sie im Grunde fertigstellen. Und Node. js wird auch dafür verwendet werden. Wir brauchen sie also aus diesen beiden Gründen, für den Node. js-Code, den wir für unser Backend schreiben, und für den Angular-Build-Workflow. Und wenn Sie mehr über Angular und den Angular-Workflow und seine Funktionsweise erfahren möchten, sollten Sie sich unbedingt einen Kurs zu Angular ansehen. Denn obwohl ich in diesem Kurs einige Angular-Grundlagen behandeln werde, erwarte ich, dass Sie die Grundlagen von Angular kennen. Dies ist kein Kurs für Sie, wenn Sie noch nie mit Angular zu tun hatten. Nachdem das nun geklärt ist, laden Sie Node. js von Node. js. org und wählen Sie dort die neueste Version 10. 1 in meinem Fall, wenn Sie Probleme damit haben, greifen Sie auf die ältere Version zurück. Im Allgemeinen wird jedoch empfohlen, 10 zu verwenden. 1 oder die neueste Version, die Sie gerade sehen. Klicken Sie einfach darauf, und es wird ein Installationsprogramm heruntergeladen, durch das Sie gehen können. Es ist sowohl für Mac OS als auch für Windows und Linux verfügbar und sollte Ihnen automatisch den richtigen Download anbieten. Nach der erfolgreichen Installation durch das Installationsprogramm können wir über das Einrichten einer Angular-Anwendung nachdenken, denn damit werden wir in diesem Kurs beginnen. Dafür verwenden wir ein anderes Tool, nämlich das Angular CLI. CLI steht für Command Line Interface (Befehlszeilenschnittstelle) und ist die fehlerhafte Methode zur Erstellung von Angular-Anwendungen. Aufgrund des erwähnten komplexeren Build-Workflows benötigen wir eine Vielzahl von Tools, die unseren Code kompilieren und optimieren, und all das selbst einzurichten ist ziemlich mühsam und fehleranfällig. Mit der CLI können wir ein Projekt einrichten, bei dem all das erledigt ist und wir uns auf das Schreiben unseres Angular-Codes konzentrieren können. Unsere Logik. Das CLI wird wie folgt installiert und verwendet NPM, den Node-Paketmanager, um das CLI-Tool global auf unserem Rechner mit diesem ersten Befehl hier zu installieren. NPM, der Node-Paketmanager, wird zusammen mit Node installiert. js automatisch. Wenn Sie also die Node. js, haben Sie NPM. Installieren wir also nun das CLI. Ich habe bereits Node. js installiert, so dass ich einfach zu diesem Schritt übergehen kann. Um das CLI zu installieren, sollten Sie Ihr Terminal oder die Eingabeaufforderung auf Ihrem Rechner öffnen und dann NPM ausführen, diesen Node-Paketmanager-Befehl, der mit Node verfügbar ist. js. Install-g für global, denn wir wollen das Angular CLI global auf unserem Rechner installieren, damit wir es von überall auf unserem Rechner nutzen können. Und der Name des CLI-Pakets ist @angular-cli. Achten Sie darauf, dass Sie sich nicht vertippen, die Namensgebung ist wichtig. Sie können ein @latest hinzufügen, um unbedingt die neueste Version abzurufen, aber es sollte Ihnen standardmäßig diese Version liefern. Unter Windows sollte dieser Befehl folgendermaßen funktionieren. Auf Mac und Linux müssen Sie eventuell ein sudo davor setzen, um die richtigen Berechtigungen zur Ausführung dieses Befehls zu erhalten. Drücken Sie anschließend die Eingabetaste und geben Sie Ihr Passwort ein, wenn Sie dazu aufgefordert werden. Danach wird das CLI-Paket aus dem NPM-Repository heruntergeladen und auf Ihrem Rechner installiert. Das kann ein paar Sekunden bis Minuten dauern, und ich komme zurück, sobald es erledigt ist. Die Installation ist also abgeschlossen, und in meinem Fall sind zwischendurch ein paar Fehler aufgetreten, aber das ist kein Problem, solange es mit einer Ausgabe endet, in der der Paketname und die Version genannt werden und in der steht, dass acht Pakete aktualisiert oder hinzugefügt wurden, oder die Anzahl der Pakete kann sich tatsächlich unterscheiden. Wenn Sie also so etwas sehen, ist es gelungen. Zwischenzeitlich aufgetretene Fehler können ignoriert werden, da das System in der Lage war, diese zu beheben. Sobald dies installiert ist, können wir ein neues Angular-Projekt mit der CLI erstellen und im Laufe des Kurses Node, Mongo und Express zu diesem Projekt-Setup hinzufügen. Aber beginnen wir mit dem Frontend, denn so können wir schnell etwas auf dem Bildschirm sehen. Lassen Sie uns also ein neues Projekt erstellen und dazu in den Ordner navigieren, in dem Sie das Projekt erstellen möchten. Sobald Sie sich in diesem Ordner befinden, können Sie ihn mit dem CD-Befehl auf Ihrem Rechner aufrufen. Erstellen Sie ein neues Projekt mit ng new, einem Befehl, der durch dieses CLI-Paket nun verfügbar ist, ng ist im Grunde ein Befehl, der durch dieses Paket verfügbar gemacht wird. Und dann der Name des Projekts, und ich werde es mean-course nennen, aber Sie können natürlich jeden Namen wählen, den Sie wollen. Achten Sie nur darauf, dass er nicht mit einer Zahl beginnt und nicht test heißt, das ist verboten. Aber alles andere ist in Ordnung. Mean-course sollte funktionieren und sobald Sie die Eingabetaste drücken, wird das Projekt eingerichtet. Es wird dort eine Menge Dateien erzeugen. Die meisten von ihnen sind Konfigurationsdateien für diesen Arbeitsablauf. Wir brauchen uns keine Sorgen um sie zu machen. Außerdem erhalten wir damit eine kleine Dummy-App, mit der wir beginnen können. Es werden auch alle Abhängigkeiten, wie das Angular-Framework und andere Abhängigkeiten, von denen das Framework abhängt, installiert. Aber auch eine Reihe von gebauten oder Workflow-Abhängigkeiten. Also Abhängigkeiten, die den TypeScript-Code kompilieren, die Abhängigkeiten, die den Code optimieren, solche Dinge. Das kann also eine Weile dauern, und ich melde mich wieder, wenn es fertig ist. Sobald dies geschehen ist, können Sie mit cd in den neu erstellten Ordner navigieren und dann den Namen des Ordners eingeben. Führen Sie dort einfach ng serve aus, um einen reinen Entwicklungsserver aufzurufen. Und dies ist kein Server, den Sie zur Bereitstellung verwenden werden. Ich werde Ihnen gegen Ende des Kurses zeigen, wie Sie diese Anwendung einsetzen können. Dies ist ein reiner Entwicklungsserver, der Ihnen eine Vorschau Ihrer Anwendung ermöglicht. Ein Doppelklick auf die NX-HTML-Datei wird nicht funktionieren, da das Dateiprotokoll und nicht das HTTP-Protokoll verwendet wird und daher viele Funktionen, die wir benötigen, nicht aktiviert sind. Damit haben wir einen echten Webserver, der auf unserem Rechner unter dieser Adresse läuft. Sie sehen hier standardmäßig Http://localhost:4200, und Sie können dann einen Browser aufrufen und einfach den lokalen Host 4200 besuchen. Und auf dieser URL sollten Sie so etwas wie diese Startseite für Dummies sehen, die Ihnen das CLI standardmäßig anzeigt. Jetzt wollen wir natürlich an unserem Code arbeiten, und dafür brauchen wir eine IDE oder einen fortgeschrittenen Texteditor, der das einfacher macht. Jetzt können Sie jede beliebige IDE wie Sublime, Atom, WebStorm verwenden. In diesem Kurs werde ich Visual Studio Code verwenden. Richten wir es nun ein und öffnen unser Projekt in der nächsten Vorlesung.