1
00:00:00,000 --> 00:00:04,599
[MUSIK]

2
00:00:04,599 --> 00:00:09,853
Wir haben gerade unsere erste Angular Anwendung in der vorherigen Übung erstellt.

3
00:00:09,853 --> 00:00:13,758
Sie müssen sich fragen, wie sieht eine typische Angular-Anwendung aus?

4
00:00:13,758 --> 00:00:16,345
Was ist seine Struktur und Architektur und

5
00:00:16,345 --> 00:00:18,669
wie erstellen wir eine Angular-Anwendung?

6
00:00:19,800 --> 00:00:25,560
Lassen Sie uns Schritt für Schritt über diese Dinge sprechen, beginnend mit diesem Vortrag. Werfen Sie

7
00:00:27,390 --> 00:00:34,280
einen kurzen Blick auf den Anwendungsordner, in einem Editor.

8
00:00:34,280 --> 00:00:39,469
Sie bemerken sofort, dass die Angular CLI eine ganze Reihe von

9
00:00:40,530 --> 00:00:45,820
Dateien in verschiedenen Ordnern in unserer Anwendung erstellt hat.

10
00:00:47,260 --> 00:00:50,240
Was enthalten diese Dateien?

11
00:00:50,240 --> 00:00:53,930
Wie stellen sie eine Angular-Anwendung dar?

12
00:00:53,930 --> 00:00:58,832
Lassen Sie uns sie Schritt für Schritt untersuchen, um die typische Architektur

13
00:00:58,832 --> 00:01:00,556
einer Angular-Anwendung zu verstehen.

14
00:01:00,556 --> 00:01:03,688
Wie wir bereits erkannt haben,

15
00:01:03,688 --> 00:01:08,828
werden Angular-Anwendungen als eine Kombination

16
00:01:08,828 --> 00:01:13,727
aus HTML und entweder TypeScript oder JavaScript erstellt.

17
00:01:13,727 --> 00:01:18,735
In diesem Kurs werden wir TypeScript als Sprache der Wahl für die

18
00:01:18,735 --> 00:01:21,169
Erstellung unserer Angular-Anwendung verwenden.

19
00:01:21,169 --> 00:01:25,146
Angular selbst besteht aus mehreren Bibliotheken,

20
00:01:25,146 --> 00:01:30,585
von denen einige Bibliotheken genannt werden, und andere sind optionale Bibliotheken.

21
00:01:30,585 --> 00:01:35,389
Abhängig von der Art einer Angular-Anwendung, die Sie erstellen möchten,

22
00:01:35,389 --> 00:01:38,910
werden Sie einige davon in Ihre Anwendung aufnehmen.

23
00:01:38,910 --> 00:01:44,510
Wie wir bereits gelernt haben, ist Angular ein JavaScript-Framework und

24
00:01:44,510 --> 00:01:48,610
wir werden das nutzen, um unsere Anwendung zu erstellen.

25
00:01:49,715 --> 00:01:56,800
Zusammenfassend ist die Angular Anwendung modular in ihrer Natur und besteht aus

26
00:01:56,800 --> 00:02:03,160
mehreren Komponenten zusammen mit ihren Vorlagen, die die Anwendung umfassen.

27
00:02:03,160 --> 00:02:09,090
Nicht nur das, diese Komponenten und andere Teile der Angular-Anwendung,

28
00:02:09,090 --> 00:02:13,060
wie Dienste, werden in Modulen organisiert.

29
00:02:13,060 --> 00:02:18,892
Und diese Module werden wiederum von höheren Modulen verwendet.

30
00:02:18,892 --> 00:02:23,889
So können Sie eine Angular-Anwendung als modulare

31
00:02:23,889 --> 00:02:27,822
Architektur mit einem Root-Modul an der Spitze betrachten, das

32
00:02:27,822 --> 00:02:34,966
die Hilfe anderer Module übernimmt, die in Ihrer Modellierungshierarchie organisiert sind.

33
00:02:34,966 --> 00:02:41,170
Lassen Sie uns unsere Anwendung untersuchen, um zu verstehen, wie dies erstellt wird.

34
00:02:41,170 --> 00:02:45,550
Bevor wir fortfahren, wird das Root-Modul standardmäßig

35
00:02:45,550 --> 00:02:50,810
in Angular typischerweise als App-Modul bezeichnet.

36
00:02:50,810 --> 00:02:55,970
Gehen wir zu unserem Code, beginnen wir unsere Reise und index.html.

37
00:02:55,970 --> 00:03:03,519
Also in dieser index.html Datei können Sie sehen, dass wir den typischen HTML-Code hier haben,

38
00:03:03,519 --> 00:03:09,079
zusammen mit dieser bestimmten Zeile, die app-root sagt.

39
00:03:09,079 --> 00:03:15,270
Sie erkennen sie sofort, dass dies nicht wie ein typisches HTML-Tag aussieht.

40
00:03:15,270 --> 00:03:20,130
Lassen Sie uns also beginnen, uns die Frage zu stellen, wofür das steht und

41
00:03:20,130 --> 00:03:25,970
warum ist das auf der Seite index.html enthalten?

42
00:03:25,970 --> 00:03:31,090
Wie wir bereits gesehen haben,

43
00:03:31,090 --> 00:03:35,490
ist eine typische Angular-Anwendung eine Hierarchie von Modulen mit einem Root-Modul.

44
00:03:35,490 --> 00:03:40,660
Ihre Angular-Anwendung wird durch Bootstrapping des Root-Moduls

45
00:03:40,660 --> 00:03:42,520
gestartet, um Ihre Anwendung zu starten.

46
00:03:42,520 --> 00:03:46,430
Wie booten wir eine Angular-Anwendung?

47
00:03:46,430 --> 00:03:53,566
Wir haben bereits die Seite index.html gesehen, und Sie haben dort ein Element namens app-root gesehen.

48
00:03:53,566 --> 00:03:58,306
Stellen wir uns also noch ein paar Fragen.

49
00:03:58,306 --> 00:04:03,102
Ein Begleiter der Seite index.html ist die Datei main.ts.

50
00:04:03,102 --> 00:04:07,602
Wenn Sie diese Datei öffnen, sehen Sie, dass sie eine Reihe

51
00:04:07,602 --> 00:04:12,790
von Importanweisungen in TypeScript enthält, wie hier geschrieben.

52
00:04:12,790 --> 00:04:16,460
Lassen Sie uns nicht zu viel in die Details eintauchen, aber

53
00:04:16,460 --> 00:04:20,160
ich werde zurückkommen, um dies in kurzer Zeit zu erklären.

54
00:04:20,160 --> 00:04:21,652
Aber insbesondere

55
00:04:21,652 --> 00:04:27,017
lassen Sie mich Ihre Aufmerksamkeit auf diese bestimmte Zeile in der Datei main.ts lenken.

56
00:04:27,017 --> 00:04:31,600
Was sagt PlatformBrowserDynamic () .bootStrapModule

57
00:04:31,600 --> 00:04:36,277
und notieren Sie dann den Parameter hier, der sagt (AppModule).

58
00:04:36,277 --> 00:04:41,075
Wie ich bereits erwähnt habe, ist das App-Modul früher der typische

59
00:04:41,075 --> 00:04:45,985
Name, der dem Root-Modul in einer Angular-Anwendung gegeben wird.

60
00:04:45,985 --> 00:04:48,643
Wenn Sie sich die Dateihierarchie ansehen,

61
00:04:48,643 --> 00:04:52,867
sehen Sie dort bereits eine Datei namens app_module.ts.

62
00:04:52,867 --> 00:04:57,131
Wir werden diese Datei in kurzer Zeit besuchen, um zu sehen, was sie enthält.

63
00:04:57,131 --> 00:04:59,877
Nun, wenn Sie auf diese Importe zurückkommen,

64
00:04:59,877 --> 00:05:05,250
können Sie sehen, dass wir das Beispiel des ersten Imports hier nehmen.

65
00:05:05,250 --> 00:05:10,330
Es sagt, Import EnableProdMode von '@angular /core'.

66
00:05:10,330 --> 00:05:15,740
Was das angibt, ist, dass wir dieses spezielle

67
00:05:15,740 --> 00:05:19,970
Modul aus der Angular Core-Bibliothek importieren.

68
00:05:19,970 --> 00:05:24,820
Und in ähnlicher Weise sehen Sie den zweiten, der sagt, platformBrowserDynamic

69
00:05:24,820 --> 00:05:28,040
von '@angular /platform-browser-dynamic' importieren.

70
00:05:28,040 --> 00:05:32,500
Also aus dieser Bibliothek importieren Sie dieses Modul an Ort und Stelle. Mit

71
00:05:32,500 --> 00:05:37,896
dem PlatformBrowserDynamic-Modul können Sie nun

72
00:05:37,896 --> 00:05:44,100
Ihre Angular-Anwendung booten, indem Sie Ihr Root-Modul als Parameter verwenden.

73
00:05:44,100 --> 00:05:51,237
Offensichtlich gibt es viele andere Dateien in diesem Ordner und die Unterordner dort.

74
00:05:51,237 --> 00:05:55,534
Sorgen wir uns im Moment nicht zu sehr um sie.

75
00:05:55,534 --> 00:05:59,900
Wir werden über einige von ihnen lernen, während wir in diesem Kurs gehen.

76
00:05:59,900 --> 00:06:05,868
Nun hilft Angular CLI, diese Hierarchie von Ordnern und

77
00:06:05,868 --> 00:06:09,848
Dateien

78
00:06:09,848 --> 00:06:16,768
zu erstellen, mit den notwendigen Einstellungen, damit Sie Ihre Winkelanwendung booten und loslegen können.

79
00:06:16,768 --> 00:06:20,233
Dies von Hand zu tun ist eine etwas mühsame Aufgabe.

80
00:06:20,233 --> 00:06:24,811
So vereinfacht die Angular CLI die Vorbereitung

81
00:06:24,811 --> 00:06:29,460
des Ordners für Ihre Angular-Anwendung.

82
00:06:29,460 --> 00:06:36,210
Also wieder, gehen Sie zur Datei app_module.ts.

83
00:06:36,210 --> 00:06:41,820
Wie ich bereits erwähnt habe, ist dies das Root-Modul für Ihre Angular-Anwendung.

84
00:06:41,820 --> 00:06:47,912
Nun würde das Root-Modul normalerweise als app.module-Datei benannt werden,

85
00:06:47,912 --> 00:06:51,915
aber das ist nur ein empfohlener Name in Angular.

86
00:06:51,915 --> 00:06:57,627
Sie werden sehen, dass viele der Dateien, die eine Angular-Anwendung bilden,

87
00:06:57,627 --> 00:07:01,297
gibt es vorgeschlagene Möglichkeiten, diese Dateien zu benennen.

88
00:07:01,297 --> 00:07:05,889
Während wir den Kurs durchlaufen, werden wir spezifisch über jede dieser

89
00:07:05,889 --> 00:07:06,720
Dateien lernen. Wenn Sie

90
00:07:06,720 --> 00:07:11,032
also einen Blick auf den Inhalt von app_module.ts werfen,

91
00:07:11,032 --> 00:07:15,790
sehen Sie dort eine Reihe von Importanweisungen. Bei

92
00:07:15,790 --> 00:07:19,213
einem kurzen Blick auf sie heißt import {browserModule} von

93
00:07:19,213 --> 00:07:21,740
'@angular -platform-browser'.

94
00:07:21,740 --> 00:07:25,039
Importieren Sie {ngModule} aus '@angular /core'.

95
00:07:25,039 --> 00:07:29,550
Und NGModule ist ein Winkelmodul.

96
00:07:29,550 --> 00:07:34,070
Wir werden ein wenig mehr darüber erfahren.

97
00:07:34,070 --> 00:07:38,532
Darüber hinaus sehen Sie hier eine weitere Importanweisung,

98
00:07:38,532 --> 00:07:44,159
die heißt import {appComponent} von '. /app.component '.

99
00:07:44,159 --> 00:07:47,309
Und wenn Sie sich die Dateien hier ansehen,

100
00:07:47,309 --> 00:07:52,141
sehen Sie bereits eine app.component.tsfileware und

101
00:07:52,141 --> 00:07:58,863
dann mehrere andere Dateien hier, darunter eine app.component card.html,

102
00:07:58,863 --> 00:08:02,972
eine app.component.acss und andere Dateien.

103
00:08:02,972 --> 00:08:10,939
Nun gibt diese Anweisung an, dass dieses Root-Modul diese Komponente enthält

104
00:08:10,939 --> 00:08:17,640
und das Root-Kompliment Ihrer Angular-Anwendung bildet.

105
00:08:17,640 --> 00:08:22,450
Eine typische Angular-Anwendung besteht, wie wir gesehen haben, aus einer Reihe von

106
00:08:22,450 --> 00:08:27,330
Modulen mit dem Root-Modul als Primärmodul,

107
00:08:27,330 --> 00:08:31,360
das Ihnen hilft, Ihre Angular-Anwendung zu booten.

108
00:08:31,360 --> 00:08:38,970
Das Root-Modul ist ein Angular-Modul mit einem Feature oder eine Klasse.

109
00:08:38,970 --> 00:08:44,690
Hier sehen Sie also die Verwendung einer TypeScript-Klasse hier.

110
00:08:44,690 --> 00:08:49,380
Wenn Sie also unten in das rote Modul unten unten gehen, sehen Sie

111
00:08:49,380 --> 00:08:53,485
diese Anweisung namens Exportklasse AppModule.

112
00:08:53,485 --> 00:08:59,550
TypeScript fügt Klassen zu Ihrem typischen JavaScript-Code hinzu.

113
00:08:59,550 --> 00:09:03,085
Wenn Sie nur mit ES-5-JavaScript vertraut sind,

114
00:09:03,085 --> 00:09:06,873
wurden dort noch keine Klassen eingeführt, aber

115
00:09:06,873 --> 00:09:11,942
die neueren Versionen von JavaScript werden Unterstützung für Klassen einführen.

116
00:09:11,942 --> 00:09:14,971
TypeScript bietet auch Unterstützung für Klassen.

117
00:09:14,971 --> 00:09:18,651
Wenn Sie also Erfahrung mit objektorientierter Programmierung haben,

118
00:09:18,651 --> 00:09:21,139
sind Sie bereits mit Klassen vertraut.

119
00:09:21,139 --> 00:09:27,106
So wird diese Art von Ansatz in JavaScript mit der Einführung

120
00:09:27,106 --> 00:09:31,750
von Klassen in TypeScript und zukünftigen Versionen von JavaScript gebracht.

121
00:09:31,750 --> 00:09:37,028
Außerdem werden Sie feststellen, dass dieser Klasse

122
00:09:37,028 --> 00:09:42,314
einen Ngmodule Dekorator zugeordnet ist.

123
00:09:42,314 --> 00:09:47,312
Ein Dekorator ist also wieder eine Funktion,

124
00:09:47,312 --> 00:09:51,874
die JavaScript-Klassen ändert.

125
00:09:51,874 --> 00:09:59,254
Wir werden die Verwendung von Dekorateuren an vielen Stellen in unserer Angular Anwendung sehen.

126
00:09:59,254 --> 00:10:00,980
Dies ist ein Ngmodule. Mit

127
00:10:00,980 --> 00:10:05,850
dem Dekorator können Sie einige Details zu diesem

128
00:10:05,850 --> 00:10:06,797
App-Modul angeben.

129
00:10:06,797 --> 00:10:12,398
Diese Decorator-Funktion benötigt also einen bestimmten Satz

130
00:10:12,398 --> 00:10:18,295
von Metadaten, um Ihnen zu helfen, dieses Modul zu beschreiben.

131
00:10:18,295 --> 00:10:23,232
Dieses Metadatenobjekt enthält hier, wie Sie sehen können,

132
00:10:23,232 --> 00:10:28,430
Deklarationen, Importe, Provider, Bootstrap.

133
00:10:28,430 --> 00:10:33,080
Und enthält auch Exporte, wenn dieses Modul etwas exportiert, das

134
00:10:33,080 --> 00:10:35,110
von einem anderen Modul verwendet werden kann.

135
00:10:35,110 --> 00:10:41,734
Da dies das Root-Modul ist, haben wir keinen Export von diesem Modul.

136
00:10:41,734 --> 00:10:47,418
Stattdessen haben wir nur Deklarationen, Importe, Provider und Bootstrap.

137
00:10:47,418 --> 00:10:52,243
Also hier ist dieser ziemlich einfach zu verstehen.

138
00:10:52,243 --> 00:10:57,280
Es gibt an, dass, um diese Angular-Anwendung zu booten,

139
00:10:57,280 --> 00:11:00,713
müssen wir die AppComponent booten.

140
00:11:00,713 --> 00:11:07,008
Die AppComponent ist also die Stammkomponente unserer Angular-Anwendung.

141
00:11:07,008 --> 00:11:13,595
Darüber hinaus gibt der Import-Teil die Eigenschaften an,

142
00:11:13,595 --> 00:11:22,040
da alle diese Module importiert werden müssen, um mit diesem App-Modul verwendet werden zu können.

143
00:11:22,040 --> 00:11:25,770
Dieses App-Modul hängt nun von diesen anderen Modulen ab.

144
00:11:25,770 --> 00:11:30,917
Dies sind also die Module, die als

145
00:11:30,917 --> 00:11:36,494
Teil der Hierarchie in das App-Modul importiert werden, daher der Grund, warum wir diese Module hier oben importiert haben.

146
00:11:36,494 --> 00:11:38,451
Wenn Sie also die Module importieren,

147
00:11:38,451 --> 00:11:43,324
geben Sie hier an, dass das App-Modul dieses Modul nutzen wird.

148
00:11:43,324 --> 00:11:48,462
Die import-Eigenschaft gibt also jene Module an, die importiert werden müssen, oder

149
00:11:48,462 --> 00:11:53,040
jene Module, von denen dieses spezielle Modul abhängig ist.

150
00:11:53,040 --> 00:11:58,398
Die Deklarationen hier, die Deklarationseigenschaft,

151
00:11:58,398 --> 00:12:02,940
ist die Eigenschaft, die die Ansichtsklassen deklariert

152
00:12:02,940 --> 00:12:06,910
, die zu diesem bestimmten Modul gehören.

153
00:12:06,910 --> 00:12:10,584
Die Ansichtsklassen im Falle eines Angular-Moduls

154
00:12:10,584 --> 00:12:15,018
wären also in Form von Komponenten, Direktiven und Pipes.

155
00:12:15,018 --> 00:12:20,789
Wir werden ein wenig später in diesem Kurs über Direktiven und

156
00:12:20,789 --> 00:12:24,416
Pipes sprechen, wir werden in der nächsten Lektion über Komponenten sprechen.

157
00:12:24,416 --> 00:12:28,590
Die Anbieter geben alle Dienste an, die dieses

158
00:12:28,590 --> 00:12:31,753
spezielle Modul nutzen wird.

159
00:12:31,753 --> 00:12:36,592
Dienstleistungen, über die wir im

160
00:12:36,592 --> 00:12:39,235
Modul der nächsten Woche etwas ausführlicher sprechen werden.

161
00:12:39,235 --> 00:12:42,510
Wir werden mehr Details über Dienste sprechen, wie wir sie erstellen

162
00:12:42,510 --> 00:12:46,810
und wie wir sie mit unserer Angular-Anwendung nutzen können.

163
00:12:46,810 --> 00:12:52,091
Um zusammenzufassen, was wir bisher gelernt haben, erkennen wir, dass ein Modul

164
00:12:52,091 --> 00:12:57,373
in einer Angular-Anwendung aus einer Reihe von Komponenten und

165
00:12:57,373 --> 00:13:02,671
Diensten bestehen könnte, die von diesem Modul benötigt werden, indem sie sie importieren.

166
00:13:02,671 --> 00:13:09,461
Und diese werden mit der Deklarationseigenschaft

167
00:13:09,461 --> 00:13:15,220
des Ngmodule Dekorators in unserem App-Modul deklariert.

168
00:13:15,220 --> 00:13:19,845
Nun können diese Komponenten selbst von

169
00:13:19,845 --> 00:13:24,178
anderen Komponenten oder Diensten oder Direktiven oder

170
00:13:24,178 --> 00:13:29,115
Pipes abhängig sein, wie wir im Rest dieses speziellen Kurses sehen werden.

171
00:13:29,115 --> 00:13:37,212
Damit haben wir eine grobe Vorstellung davon, wie eine typische Angular-Anwendung strukturiert ist. Wenn

172
00:13:37,212 --> 00:13:42,247
Sie zu unserem Code zurückkehren, ist es jetzt an der Zeit,

173
00:13:42,247 --> 00:13:48,691
diese Datei app.component.ts und die Datei app.component.html zu untersuchen. Das

174
00:13:48,691 --> 00:13:53,502
deklariert die Vorlage für unsere Komponente,

175
00:13:53,502 --> 00:13:57,022
und die app.component.ts Datei,

176
00:13:57,022 --> 00:14:02,547
die den TypeScript-Teil unserer Komponente angibt.

177
00:14:02,547 --> 00:14:08,157
Nun werden wir das in der nächsten Lektion tun, wo wir uns mit Komponenten beschäftigen und

178
00:14:08,157 --> 00:14:13,436
wie wir neue Komponenten erstellen und sie zu unserer Angular-Anwendung hinzufügen können.

179
00:14:13,436 --> 00:14:16,815
( MUSIK)