Okay, okay, ich höre, wie du es sagst.
Lass uns damit weitermachen,
zeig mir einen Code.
In der Tat werden wir mit der Erstellung
unserer Angular-Anwendung in dieser allerersten Übung beginnen.
Wir verwenden die Angular Kommandozeilenschnittstelle,
die Angular CLI, um unsere Angular-Anwendung in dieser Übung auszubauen.
Dann, wenn wir die restlichen Übungen in diesem Kurs durchlaufen,
werden wir unsere Angular-Anwendung Schritt für Schritt erstellen.
Die Angular CLI ist eine sehr bequeme Möglichkeit, eine Angular-Anwendung zu erstellen.
Die Angular Anwendung, die von der Angular CLI erstellt wurde, folgt den
Styleguides, die von den Angular Framework-Entwicklern vorgeschlagen wurden.
Wir können die Angular CLI verwenden, um
viele Teile unserer Angular-Anwendung, einschließlich der Komponenten,
die Dienste unserer Angular-Anwendung, zu Gerüst zu erstellen.
Die Angular CLI kommt auch mit einem eigenen eingebauten Server, den
wir verwenden können, um die Angular-Anwendung während wir sie aufbauen, bereitzustellen
und dann unsere Angular-Anwendung
im Browser als Live-Vorschau unserer Anwendung anzuzeigen.
Wie wenn wir Änderungen vornehmen,
werden die Änderungen sofort dem Browser widergespiegelt.
Aus diesem Grund habe ich mich dafür entschieden, die Angular CLI als
Ansatz für den Aufbau unserer Angular-Anwendung in diesem Kurs zu verwenden.
Um zu beginnen, wechseln Sie zu einem geeigneten Speicherort auf
Ihrem Computer und erstellen Sie einen Ordner mit dem Namen Angular.
Also, ich werde anfangen, zu meinen Dokumenten Coursera Ordner zu wechseln.
Dort speichere ich alle meine Dateien für meinen Coursera-Kurs,
und dann werde ich einen Ordner
namens Angular erstellen und dann in den Angular-Ordner verschieben.
Jetzt werden wir unsere Angular-Anwendung in diesem Ordner erstellen.
Der erste Schritt, den wir in dieser Übung tun, ist die Installation der Angular CLI. Geben Sie
also an der
Eingabeaufforderung npm install -g @angular /cli @ 6.2.1 ein.
Jetzt, wenn ich ein NPM-Modul installiere,
werde ich auch die genaue Version des NPM-Moduls angeben, das ich installiere.
Ich möchte Sie dringend auffordern,
genau die gleiche Version des NPM-Moduls zu installieren, damit Sie
den Rest der Übungen ohne Probleme mit den Übungen durchlaufen können.
Also, in diesem Fall installiere ich die 6.2.1-Version der Angular CLI.
Nun, wenn Sie dies auf einem Mac oder Linux tun,
vergessen Sie nicht das sudo vor der npm-Installation.
Die Installation wird einige Zeit in Anspruch nehmen.
Sobald die Installation abgeschlossen ist,
wird die Angular CLI in Ihrer Befehlszeile verfügbar sein.
Sobald die Installation abgeschlossen ist,
können Sie überprüfen und sehen, dass die Angular CLI installiert ist.
Nach der Installation
müssen Sie möglicherweise Ihr Terminal neu starten, damit
die Angular CLI-Tools an der Eingabeaufforderung verfügbar sind.
Die Angular CLI ist verfügbar, indem Sie ng an
der Eingabeaufforderung eingeben, gefolgt von einer Reihe zusätzlicher Anweisungen.
Also, der erste Befehl, den wir ausprobieren werden, ist ng help,
und dies wird eine Reihe von allen anderen Befehlen auflisten
, die die Angular CLI uns erlaubt, auszuführen.
Ng, wie Sie sehen, wird das Präfix für
alle Angular CLI-Befehle sein, die Sie in diesem Kurs verwenden werden.
Dies wird eine Reihe aller Optionen auflisten, die die Angular CLI für uns zur Verfügung stellt.
Wir werden viele dieser Befehle lernen, während wir den Rest dieses Kurses durchlaufen.
Um eine neue Angular-Anwendung
zu erstellen, werde ich diese Anwendung
im Angular Ordner in einem Unterordner namens ConFusion erstellen.
Wenn Sie den vorherigen Kurs auf Bootstrap vier absolviert haben,
würden Sie verstehen, warum ich diese Anwendung als ConFusion nenne.
Geben Sie an der Eingabeaufforderung ng new conFusion ein,
und dann würde ich sass als
CSS-Styling-Framework für meine Angular-Anwendung verwenden.
Also gebe ich Minus-Stil gleich SCSS an
und drücke die Return und es dauert einige Zeit,
bis die Angular-Anwendung im aktuellen Ordner erstellt wird.
Sobald Ihre Anwendung installiert
ist, lassen Sie uns den integrierten Server von
der Angular CLI verwenden, um unsere Angular Anwendung zu kompilieren und mit der Bereitstellung zu beginnen.
Wechseln Sie in den Ordner ConFusion, geben Sie
an der Eingabeaufforderung ng serve ein,
und warten Sie, bis der Angular Live Development Server
gestartet ist, und erstellen Sie unsere Angular-Anwendung und starten Sie die Bereitstellung der Anwendung.
Sobald es abgeschlossen ist,
dann werden Sie feststellen, dass diese Anwendung verfügbar sein wird, indem Sie
eine http://localhost:4200 in die Adressleiste unseres Browsers eingeben.
Sie können den Entwicklungsserver kontinuierlich laufen lassen.
Wenn Sie Änderungen an Ihrer Angular-Anwendung vornehmen,
kompiliert der Server die Änderungen automatisch neu und
startet dann die aktualisierte Angular-Anwendung in Ihrem Browser.
Dies wäre also eine sehr gute Möglichkeit, die Änderungen, die Sie in
Ihrer Angular-Anwendung vornehmen, live zu beobachten, die sofort
in den Browser reflektiert werden, in dem Sie Ihre Angular-Anwendung anzeigen.
Wenn Sie zum Browser gehen und auf die Angular-Anwendung unter localhost zugreifen: 4200,
sehen Sie, dass die Anwendung beginnt
zu arbeiten, und es wird diesen Satz von Wörtern in unserem Browser dienen.
Also, dies ist eine sehr einfache Anwendung, die bare-bones Angular Anwendung,
um Sie mit der Entwicklung Ihrer Angular-Anwendung zu beginnen.
Wir werden auf dieser gerüsteten Anwendung von Angular CLI aufbauen,
indem wir verschiedene Funktionen als Teil dieses Kurses implementieren.
Wenn Sie planen, Git für Ihre Angular-Anwendung für die Versionierung
zu verwenden, dann
ist es möglicherweise eine gute Idee, Ihr Git-Repository zu initialisieren.
Die Angular CLI führt automatisch die Initialisierung Ihres Git-Repositorys durch
und damit das erste Commit mit der Nachricht initialen Commit an das Git-Repository.
Lassen Sie uns den Status unseres Git-Repositorys überprüfen.
Lassen Sie sich auschecken, indem Sie git log
eine Zeile eingeben und Sie werden sehen, dass
die anfängliche Einrichtung in unser Git-Repository übernommen wurde.
Jetzt können wir mit der Arbeit an unserer Angular-Anwendung beginnen, die wir
hier in diesen Ordner gerüstet haben.
Sollten Sie sich entscheiden, Ihr Git-Repository mit einem Online-Repository zu synchronisieren,
stellen Sie bitte sicher, dass Ihr Online-Repository ein privates Repository ist. Mit
Bitbucket können Sie kostenlose private Repositories erstellen.
Also, machen Sie weiter und richten Sie Ihr Git-Repository auf Bitbucket ein.
Damit schließen wir unsere Übung ab.
In dieser ersten Übung
haben wir die Angular CLI installiert.
Dann haben wir unsere Angular-Anwendung
ausgearbeitet, an der wir uns im Rahmen der restlichen Übungen in diesem Kurs weiterentwickeln werden.