1 00:00:04,070 --> 00:00:07,050 Okay, okay, ich höre, wie du es sagst. 2 00:00:07,050 --> 00:00:08,280 Lass uns damit weitermachen, 3 00:00:08,280 --> 00:00:09,835 zeig mir einen Code. 4 00:00:09,835 --> 00:00:13,440 In der Tat werden wir mit der Erstellung 5 00:00:13,440 --> 00:00:17,770 unserer Angular-Anwendung in dieser allerersten Übung beginnen. 6 00:00:17,770 --> 00:00:21,145 Wir verwenden die Angular Kommandozeilenschnittstelle, 7 00:00:21,145 --> 00:00:28,020 die Angular CLI, um unsere Angular-Anwendung in dieser Übung auszubauen. 8 00:00:28,020 --> 00:00:31,690 Dann, wenn wir die restlichen Übungen in diesem Kurs durchlaufen, 9 00:00:31,690 --> 00:00:36,180 werden wir unsere Angular-Anwendung Schritt für Schritt erstellen. 10 00:00:36,180 --> 00:00:44,195 Die Angular CLI ist eine sehr bequeme Möglichkeit, eine Angular-Anwendung zu erstellen. 11 00:00:44,195 --> 00:00:48,620 Die Angular Anwendung, die von der Angular CLI erstellt wurde, folgt den 12 00:00:48,620 --> 00:00:53,290 Styleguides, die von den Angular Framework-Entwicklern vorgeschlagen wurden. 13 00:00:53,290 --> 00:00:56,405 Wir können die Angular CLI verwenden, um 14 00:00:56,405 --> 00:01:00,980 viele Teile unserer Angular-Anwendung, einschließlich der Komponenten, 15 00:01:00,980 --> 00:01:04,275 die Dienste unserer Angular-Anwendung, zu Gerüst zu erstellen. 16 00:01:04,275 --> 00:01:08,480 Die Angular CLI kommt auch mit einem eigenen eingebauten Server, den 17 00:01:08,480 --> 00:01:14,405 wir verwenden können, um die Angular-Anwendung während wir sie aufbauen, bereitzustellen 18 00:01:14,405 --> 00:01:17,930 und dann unsere Angular-Anwendung 19 00:01:17,930 --> 00:01:22,870 im Browser als Live-Vorschau unserer Anwendung anzuzeigen. 20 00:01:22,870 --> 00:01:24,805 Wie wenn wir Änderungen vornehmen, 21 00:01:24,805 --> 00:01:28,940 werden die Änderungen sofort dem Browser widergespiegelt. 22 00:01:28,940 --> 00:01:33,650 Aus diesem Grund habe ich mich dafür entschieden, die Angular CLI als 23 00:01:33,650 --> 00:01:39,365 Ansatz für den Aufbau unserer Angular-Anwendung in diesem Kurs zu verwenden. 24 00:01:39,365 --> 00:01:43,100 Um zu beginnen, wechseln Sie zu einem geeigneten Speicherort auf 25 00:01:43,100 --> 00:01:46,490 Ihrem Computer und erstellen Sie einen Ordner mit dem Namen Angular. 26 00:01:46,490 --> 00:01:52,065 Also, ich werde anfangen, zu meinen Dokumenten Coursera Ordner zu wechseln. 27 00:01:52,065 --> 00:01:58,260 Dort speichere ich alle meine Dateien für meinen Coursera-Kurs, 28 00:01:58,260 --> 00:02:03,230 und dann werde ich einen Ordner 29 00:02:03,230 --> 00:02:08,955 namens Angular erstellen und dann in den Angular-Ordner verschieben. 30 00:02:08,955 --> 00:02:15,505 Jetzt werden wir unsere Angular-Anwendung in diesem Ordner erstellen. 31 00:02:15,505 --> 00:02:21,080 Der erste Schritt, den wir in dieser Übung tun, ist die Installation der Angular CLI. Geben Sie 32 00:02:21,080 --> 00:02:22,525 also an der 33 00:02:22,525 --> 00:02:32,700 Eingabeaufforderung npm install -g @angular /cli @ 6.2.1 ein. 34 00:02:32,700 --> 00:02:35,430 Jetzt, wenn ich ein NPM-Modul installiere, 35 00:02:35,430 --> 00:02:39,725 werde ich auch die genaue Version des NPM-Moduls angeben, das ich installiere. 36 00:02:39,725 --> 00:02:41,720 Ich möchte Sie dringend auffordern, 37 00:02:41,720 --> 00:02:44,930 genau die gleiche Version des NPM-Moduls zu installieren, damit Sie 38 00:02:44,930 --> 00:02:50,680 den Rest der Übungen ohne Probleme mit den Übungen durchlaufen können. 39 00:02:50,680 --> 00:02:55,700 Also, in diesem Fall installiere ich die 6.2.1-Version der Angular CLI. 40 00:02:55,700 --> 00:02:58,310 Nun, wenn Sie dies auf einem Mac oder Linux tun, 41 00:02:58,310 --> 00:03:02,565 vergessen Sie nicht das sudo vor der npm-Installation. 42 00:03:02,565 --> 00:03:05,095 Die Installation wird einige Zeit in Anspruch nehmen. 43 00:03:05,095 --> 00:03:08,095 Sobald die Installation abgeschlossen ist, 44 00:03:08,095 --> 00:03:13,655 wird die Angular CLI in Ihrer Befehlszeile verfügbar sein. 45 00:03:13,655 --> 00:03:15,750 Sobald die Installation abgeschlossen ist, 46 00:03:15,750 --> 00:03:18,885 können Sie überprüfen und sehen, dass die Angular CLI installiert ist. 47 00:03:18,885 --> 00:03:20,295 Nach der Installation 48 00:03:20,295 --> 00:03:25,190 müssen Sie möglicherweise Ihr Terminal neu starten, damit 49 00:03:25,190 --> 00:03:30,835 die Angular CLI-Tools an der Eingabeaufforderung verfügbar sind. 50 00:03:30,835 --> 00:03:35,390 Die Angular CLI ist verfügbar, indem Sie ng an 51 00:03:35,390 --> 00:03:39,910 der Eingabeaufforderung eingeben, gefolgt von einer Reihe zusätzlicher Anweisungen. 52 00:03:39,910 --> 00:03:46,105 Also, der erste Befehl, den wir ausprobieren werden, ist ng help, 53 00:03:46,105 --> 00:03:49,820 und dies wird eine Reihe von allen anderen Befehlen auflisten 54 00:03:49,820 --> 00:03:53,855 , die die Angular CLI uns erlaubt, auszuführen. 55 00:03:53,855 --> 00:03:56,720 Ng, wie Sie sehen, wird das Präfix für 56 00:03:56,720 --> 00:04:02,040 alle Angular CLI-Befehle sein, die Sie in diesem Kurs verwenden werden. 57 00:04:02,840 --> 00:04:09,685 Dies wird eine Reihe aller Optionen auflisten, die die Angular CLI für uns zur Verfügung stellt. 58 00:04:09,685 --> 00:04:15,895 Wir werden viele dieser Befehle lernen, während wir den Rest dieses Kurses durchlaufen. 59 00:04:15,895 --> 00:04:18,930 Um eine neue Angular-Anwendung 60 00:04:18,930 --> 00:04:21,545 zu erstellen, werde ich diese Anwendung 61 00:04:21,545 --> 00:04:25,660 im Angular Ordner in einem Unterordner namens ConFusion erstellen. 62 00:04:25,660 --> 00:04:29,210 Wenn Sie den vorherigen Kurs auf Bootstrap vier absolviert haben, 63 00:04:29,210 --> 00:04:35,000 würden Sie verstehen, warum ich diese Anwendung als ConFusion nenne. 64 00:04:35,000 --> 00:04:40,905 Geben Sie an der Eingabeaufforderung ng new conFusion ein, 65 00:04:40,905 --> 00:04:45,945 und dann würde ich sass als 66 00:04:45,945 --> 00:04:53,080 CSS-Styling-Framework für meine Angular-Anwendung verwenden. 67 00:04:53,080 --> 00:04:58,015 Also gebe ich Minus-Stil gleich SCSS an 68 00:04:58,015 --> 00:05:01,610 und drücke die Return und es dauert einige Zeit, 69 00:05:01,610 --> 00:05:05,750 bis die Angular-Anwendung im aktuellen Ordner erstellt wird. 70 00:05:05,750 --> 00:05:08,330 Sobald Ihre Anwendung installiert 71 00:05:08,330 --> 00:05:10,850 ist, lassen Sie uns den integrierten Server von 72 00:05:10,850 --> 00:05:16,100 der Angular CLI verwenden, um unsere Angular Anwendung zu kompilieren und mit der Bereitstellung zu beginnen. 73 00:05:16,100 --> 00:05:18,650 Wechseln Sie in den Ordner ConFusion, geben Sie 74 00:05:18,650 --> 00:05:22,495 an der Eingabeaufforderung ng serve ein, 75 00:05:22,495 --> 00:05:27,470 und warten Sie, bis der Angular Live Development Server 76 00:05:27,470 --> 00:05:33,115 gestartet ist, und erstellen Sie unsere Angular-Anwendung und starten Sie die Bereitstellung der Anwendung. 77 00:05:33,115 --> 00:05:35,175 Sobald es abgeschlossen ist, 78 00:05:35,175 --> 00:05:39,920 dann werden Sie feststellen, dass diese Anwendung verfügbar sein wird, indem Sie 79 00:05:39,920 --> 00:05:50,425 eine http://localhost:4200 in die Adressleiste unseres Browsers eingeben. 80 00:05:50,425 --> 00:05:53,975 Sie können den Entwicklungsserver kontinuierlich laufen lassen. 81 00:05:53,975 --> 00:05:57,020 Wenn Sie Änderungen an Ihrer Angular-Anwendung vornehmen, 82 00:05:57,020 --> 00:06:01,520 kompiliert der Server die Änderungen automatisch neu und 83 00:06:01,520 --> 00:06:06,320 startet dann die aktualisierte Angular-Anwendung in Ihrem Browser. 84 00:06:06,320 --> 00:06:13,370 Dies wäre also eine sehr gute Möglichkeit, die Änderungen, die Sie in 85 00:06:13,370 --> 00:06:16,760 Ihrer Angular-Anwendung vornehmen, live zu beobachten, die sofort 86 00:06:16,760 --> 00:06:21,265 in den Browser reflektiert werden, in dem Sie Ihre Angular-Anwendung anzeigen. 87 00:06:21,265 --> 00:06:28,610 Wenn Sie zum Browser gehen und auf die Angular-Anwendung unter localhost zugreifen: 4200, 88 00:06:28,610 --> 00:06:31,135 sehen Sie, dass die Anwendung beginnt 89 00:06:31,135 --> 00:06:36,835 zu arbeiten, und es wird diesen Satz von Wörtern in unserem Browser dienen. 90 00:06:36,835 --> 00:06:42,140 Also, dies ist eine sehr einfache Anwendung, die bare-bones Angular Anwendung, 91 00:06:42,140 --> 00:06:47,490 um Sie mit der Entwicklung Ihrer Angular-Anwendung zu beginnen. 92 00:06:47,490 --> 00:06:52,460 Wir werden auf dieser gerüsteten Anwendung von Angular CLI aufbauen, 93 00:06:52,460 --> 00:06:57,420 indem wir verschiedene Funktionen als Teil dieses Kurses implementieren. 94 00:06:57,420 --> 00:07:01,710 Wenn Sie planen, Git für Ihre Angular-Anwendung für die Versionierung 95 00:07:01,710 --> 00:07:03,680 zu verwenden, dann 96 00:07:03,680 --> 00:07:06,980 ist es möglicherweise eine gute Idee, Ihr Git-Repository zu initialisieren. 97 00:07:06,980 --> 00:07:12,620 Die Angular CLI führt automatisch die Initialisierung Ihres Git-Repositorys durch 98 00:07:12,620 --> 00:07:18,765 und damit das erste Commit mit der Nachricht initialen Commit an das Git-Repository. 99 00:07:18,765 --> 00:07:23,610 Lassen Sie uns den Status unseres Git-Repositorys überprüfen. 100 00:07:23,610 --> 00:07:28,310 Lassen Sie sich auschecken, indem Sie git log 101 00:07:28,310 --> 00:07:29,600 eine Zeile eingeben und Sie werden sehen, dass 102 00:07:29,600 --> 00:07:33,020 die anfängliche Einrichtung in unser Git-Repository übernommen wurde. 103 00:07:33,020 --> 00:07:36,920 Jetzt können wir mit der Arbeit an unserer Angular-Anwendung beginnen, die wir 104 00:07:36,920 --> 00:07:41,020 hier in diesen Ordner gerüstet haben. 105 00:07:41,020 --> 00:07:46,800 Sollten Sie sich entscheiden, Ihr Git-Repository mit einem Online-Repository zu synchronisieren, 106 00:07:46,800 --> 00:07:52,160 stellen Sie bitte sicher, dass Ihr Online-Repository ein privates Repository ist. Mit 107 00:07:52,160 --> 00:07:56,835 Bitbucket können Sie kostenlose private Repositories erstellen. 108 00:07:56,835 --> 00:08:01,580 Also, machen Sie weiter und richten Sie Ihr Git-Repository auf Bitbucket ein. 109 00:08:01,580 --> 00:08:04,350 Damit schließen wir unsere Übung ab. 110 00:08:04,350 --> 00:08:06,395 In dieser ersten Übung 111 00:08:06,395 --> 00:08:08,635 haben wir die Angular CLI installiert. 112 00:08:08,635 --> 00:08:14,060 Dann haben wir unsere Angular-Anwendung 113 00:08:14,060 --> 00:08:22,150 ausgearbeitet, an der wir uns im Rahmen der restlichen Übungen in diesem Kurs weiterentwickeln werden.