1
00:00:00,000 --> 00:00:04,965
[MUSIC]

2
00:00:04,965 --> 00:00:10,050
In dieser Übung

3
00:00:10,050 --> 00:00:14,397
werden wir uns ansehen, wie wir das Routing-Modul des Angular nutzen können, um mehrere Komponenten zu unterstützen und in

4
00:00:14,397 --> 00:00:19,830
der Lage zu sein, zu einer dieser Komponenten in unserer Angular-Anwendung zu navigieren. Werfen Sie

5
00:00:21,690 --> 00:00:26,280
einen kurzen Blick auf den Stand unserer Anwendung.

6
00:00:26,280 --> 00:00:29,647
Am Ende der letzten Übung

7
00:00:29,647 --> 00:00:36,135
haben wir bereits bemerkt, dass

8
00:00:36,135 --> 00:00:42,520
wir in dieser Anwendung, in der Kopfzeile, Links zu vier verschiedenen Zitaten haben, unquote Seiten hier.

9
00:00:42,520 --> 00:00:47,334
Jetzt in Angular Begriffen würde dies durch die Verwendung

10
00:00:47,334 --> 00:00:52,371
verschiedener Komponenten unterstützt werden, wie wir in dieser Übung sehen werden.

11
00:00:52,371 --> 00:00:55,706
Also hier sehen wir, dass, wenn wir auf die Startseite klicken,

12
00:00:55,706 --> 00:01:01,840
wollen wir in der Lage sein, die Details zu sehen, was auf der Startseite vorhanden sein sollte.

13
00:01:01,840 --> 00:01:07,182
Und ähnlich, die Über und das Menü natürlich sehen Sie es bereits direkt dort,

14
00:01:07,182 --> 00:01:12,608
und dann der Kontakt, wahrscheinlich zeigt einige Informationen über den Inhalt für

15
00:01:12,608 --> 00:01:15,040
dieses spezielle Restaurant.

16
00:01:15,040 --> 00:01:18,450
Wie sollen sie so etwas unterstützen?

17
00:01:18,450 --> 00:01:23,490
Erstens, wenn wir einen kurzen Blick darauf werfen, sehen wir, dass das Menü

18
00:01:23,490 --> 00:01:28,470
bereits unterstützt wird, indem die Informationen über das Menü hier angezeigt werden, und

19
00:01:28,470 --> 00:01:32,720
dies wird bereits mit der Verwendung der Menükomponente erleichtert.

20
00:01:32,720 --> 00:01:37,720
So sehen wir, dass die Menükomponente zwischen der Kopfzeile und

21
00:01:37,720 --> 00:01:42,270
der Fußzeile gegenübergestellt wird und die Informationen direkt dort angezeigt werden können.

22
00:01:42,270 --> 00:01:48,270
Wie können wir nun die Verwendung des Angular Router-Moduls nutzen, um es

23
00:01:48,270 --> 00:01:54,270
uns zu ermöglichen, diese verschiedenen Komponenten zu unterstützen und zwischen ihnen zu navigieren.

24
00:01:54,270 --> 00:01:58,810
Nun, um zu beginnen, benötigen wir zuerst natürlich mehrere Komponenten,

25
00:01:58,810 --> 00:02:04,370
jede von ihnen zeigt ihre jeweilige Ansicht, so dass wir zwischen den Ansichten navigieren können.

26
00:02:04,370 --> 00:02:09,390
Lassen Sie uns also drei weitere Komponenten zu unserer Angular-Anwendung hinzufügen,

27
00:02:09,390 --> 00:02:13,300
die Startseite, die Über und den Kontakt.

28
00:02:13,300 --> 00:02:17,500
Sie wissen bereits, wie das geht, also gehen wir zum nächsten Schritt. Geben Sie

29
00:02:17,500 --> 00:02:22,959
an der Eingabeaufforderung ng g component

30
00:02:22,959 --> 00:02:28,616
home ein, um die Home-Komponente zu erstellen.

31
00:02:28,616 --> 00:02:33,094
In ähnlicher Weise erzeugen

32
00:02:33,094 --> 00:02:38,362
Sie die über Komponente und

33
00:02:38,362 --> 00:02:43,100
auch während wir dabei

34
00:02:43,100 --> 00:02:48,641
die Kontaktkomponente sind.

35
00:02:48,641 --> 00:02:53,031
So haben wir jetzt drei Komponenten zusammen mit der neuen Komponente hinzugefügt, die wir

36
00:02:53,031 --> 00:02:53,903
bereits haben.

37
00:02:53,903 --> 00:02:58,445
Die Datenträgerdetailkomponente wird bereits in den Menükomponenten verwendet, so dass

38
00:02:58,445 --> 00:03:00,833
wir sie im Moment nicht berücksichtigen.

39
00:03:00,833 --> 00:03:05,652
Aber wir haben jetzt zu Hause, über, Kontakt und Menükomponenten, und

40
00:03:05,652 --> 00:03:08,339
wir brauchen eine Möglichkeit, zwischen ihnen zu gehen.

41
00:03:08,339 --> 00:03:09,882
Also, wie machen wir das?

42
00:03:09,882 --> 00:03:14,806
Also, hier verwende ich das Angular Router-Modul.

43
00:03:14,806 --> 00:03:20,618
Um mit dem Router-Modul zu beginnen, damit wir

44
00:03:20,618 --> 00:03:26,225
zwischen diesen Komponenten navigieren können, fügen wir ein neues Angular-Modul hinzu.

45
00:03:26,225 --> 00:03:32,012
Jetzt ist dieses Muster der Verwendung des Router-Moduls etwas, das für

46
00:03:32,012 --> 00:03:35,841
etwas komplexere Angular-Anwendungen vorgeschlagen wird, aber

47
00:03:35,841 --> 00:03:41,735
wenn wir das als Standardpraxis machen, geht es weit, um uns in Zukunft zu helfen.

48
00:03:41,735 --> 00:03:46,653
Also beginne ich sogar die einfache Anwendung damit,

49
00:03:46,653 --> 00:03:52,032
das Router-Modul in ein eigenes separates Modul zu setzen.

50
00:03:52,032 --> 00:03:58,470
Das umfasst alle unsere Routing-Anforderungen in einem separaten Modul.

51
00:03:58,470 --> 00:04:04,170
Um zu beginnen, verwenden wir erneut die Angular CLI, um

52
00:04:04,170 --> 00:04:10,450
ein anderes Modul zu erstellen, und wir werden dieses Modul als App-Routing aufrufen.

53
00:04:10,450 --> 00:04:15,237
Dieses App-Routing-Modul, das wir erstellen werden, wird

54
00:04:15,237 --> 00:04:20,599
das Angular Slotting Modul nutzen, um Routing-Funktionen für unsere Anwendung bereitzustellen.

55
00:04:20,599 --> 00:04:26,296
Und dann werden wir das in unserem App-Modul nutzen, um Routing zu ermöglichen.

56
00:04:26,296 --> 00:04:30,927
Um ein neues Modul namens app routing zu erstellen, geben Sie

57
00:04:30,927 --> 00:04:35,814
an der Eingabeaufforderung ng g module app-routing ein,

58
00:04:35,814 --> 00:04:40,960
und das sollte ein App-Routing-Modul erstellen und

59
00:04:40,960 --> 00:04:49,211
eine app-routing.module.ts Datei in diesen bestimmten Ordner dort ablegen.

60
00:04:49,211 --> 00:04:52,635
Jetzt ist dieses App-Routing-Modul einfach dort gelassen.

61
00:04:52,635 --> 00:04:58,138
Wir müssen das explizit in unser App-Modul aufnehmen,

62
00:04:58,138 --> 00:05:01,662
also muss es in der Lage sein, es zu nutzen. Wenn wir

63
00:05:01,662 --> 00:05:06,669
zum Editor gehen, sehen wir nun, dass wir jetzt einen anderen Ordner hier

64
00:05:06,669 --> 00:05:12,328
namens app-routing haben und innerhalb dessen wir ein ApproutingModule hier haben,

65
00:05:12,328 --> 00:05:18,374
wählen wir ein generisches Angular Modul, das die Angular CLI für uns generiert hat.

66
00:05:18,374 --> 00:05:22,034
Dies hat momentan nichts Spezifisches über Routing als solches,

67
00:05:22,034 --> 00:05:24,737
aber wir werden diese Funktionen dort hinzufügen.

68
00:05:24,737 --> 00:05:30,633
Aber bevor wir das tun, verwenden wir dieses ApproutingModule in unserem app.module,

69
00:05:30,633 --> 00:05:34,028
dem Root-Modul für unsere Angular-Anwendung.

70
00:05:34,028 --> 00:05:38,271
Um dies zu tun, öffnen Sie das app.module, und

71
00:05:38,271 --> 00:05:44,452
während wir hier sind, lassen Sie mich ein wenig aufräumen.

72
00:05:44,452 --> 00:05:48,489
Ich neige dazu, keinen disorganisierten Code

73
00:05:48,489 --> 00:05:52,407
zu mögen, also werde ich diesen ganzen Code für

74
00:05:52,407 --> 00:05:57,040
die Komponenten an einem Ort dort verschieben und

75
00:05:57,040 --> 00:06:02,650
dann habe ich meine Dienste unten hier unten benötigt.

76
00:06:02,650 --> 00:06:09,180
Jetzt haben wir ein neues Modul, das wir

77
00:06:09,180 --> 00:06:13,846
vom ApproutingModule bekommen,

78
00:06:13,846 --> 00:06:17,764
das wir gerade erstellt haben und

79
00:06:17,764 --> 00:06:22,614
dann werde ich das

80
00:06:22,614 --> 00:06:27,108
ApproutingModule in mein,

81
00:06:34,609 --> 00:06:37,040
Route-Modul oder das AppModule hier benötigen.

82
00:06:37,040 --> 00:06:43,080
Also, ich füge das ApproutingModule ein, indem ich es zuerst dort importiere.

83
00:06:43,080 --> 00:06:47,625
Und danach gehe ich in die Importe hinein und

84
00:06:47,625 --> 00:06:50,880
füge dann das ApproutingModule hinzu.

85
00:06:53,440 --> 00:06:56,970
Genau da, ApproutingModule.

86
00:06:56,970 --> 00:07:01,380
Damit

87
00:07:01,380 --> 00:07:05,640
ist mein App-Modul, das Root-Modul, jetzt behoben, um das ApproutingModule zu nutzen.

88
00:07:05,640 --> 00:07:11,420
Jetzt gibt es mir die Freiheit, meinen Routing-Teil in

89
00:07:11,420 --> 00:07:18,540
meinem ApproutingModule mit voller Zuversicht zu entwickeln, dass es von meinem App-Modul verwendet wird.

90
00:07:18,540 --> 00:07:21,370
Also lassen Sie uns die Änderungen am App-Modul speichern, und

91
00:07:21,370 --> 00:07:25,357
dann gehen wir zurück und öffnen Sie das ApproutingModule hier.

92
00:07:26,400 --> 00:07:30,470
Und hier werden wir

93
00:07:30,470 --> 00:07:34,050
das Router-Modul nutzen, das Angular für uns bereitstellt.

94
00:07:34,050 --> 00:07:37,749
Also hier lassen Sie mich das,

95
00:07:41,156 --> 00:07:46,174
RouterModule hier und auch das

96
00:07:46,174 --> 00:07:51,608
Begleitmodul Routes importieren, das von Angular erhältlich ist.

97
00:07:51,608 --> 00:07:56,428
Und dann werde ich das aus Angular

98
00:07:56,428 --> 00:08:00,320
und dann RouterModule hier importieren.

99
00:08:00,320 --> 00:08:04,540
Aus der Winkel-Router-Bibliothek importiere ich sowohl das RouterModule als auch

100
00:08:04,540 --> 00:08:06,120
das Route-Modul.

101
00:08:06,120 --> 00:08:14,590
Also, sobald ich das mache, muss ich natürlich in der Lage sein, das RouterModule hier einzubinden.

102
00:08:14,590 --> 00:08:21,015
Also, zusätzlich zu dem CommonModule, das ich dort importiert

103
00:08:21,015 --> 00:08:25,330
habe, muss ich hier auch das RouterModule verwenden.

104
00:08:25,330 --> 00:08:28,803
Jetzt werde ich es an diesem Punkt belassen.

105
00:08:28,803 --> 00:08:33,835
Wir entwickeln die Routen für unsere Angular-Anwendung und

106
00:08:33,835 --> 00:08:38,054
kommen dann wieder und korrigieren diese etwas später.

107
00:08:38,054 --> 00:08:44,225
Lassen Sie mich also die Änderungen am App-Routing-Modul speichern.

108
00:08:44,225 --> 00:08:49,925
Und was ich tun werde, ist, nur um meinen Code sauber und

109
00:08:49,925 --> 00:08:56,574
organisiert zu halten, werde ich alle Routen für meine Anwendung in einer anderen Datei definieren.

110
00:08:56,574 --> 00:09:00,673
Aber ich werde im App-Routing-Ordner erstellen und

111
00:09:00,673 --> 00:09:03,863
dann werde ich es als routes.ts5 benennen.

112
00:09:03,863 --> 00:09:08,601
Jetzt, in dieser Datei, werde ich alle Routen erstellen, die ich brauche.

113
00:09:08,601 --> 00:09:12,994
Also, hier werde ich importieren,

114
00:09:15,508 --> 00:09:23,255
Die Routen von, @angular /router,

115
00:09:23,255 --> 00:09:29,570
und dann verwenden, um die Routen für meine Anwendung zu konstruieren.

116
00:09:29,570 --> 00:09:33,453
Jetzt muss ich außerdem in der Lage sein, alle

117
00:09:33,453 --> 00:09:37,745
Komponenten zu importieren, die ich in meiner Anwendung habe.

118
00:09:37,745 --> 00:09:41,303
Weil ich in der Lage sein möchte, zu allen Komponenten zu navigieren.

119
00:09:41,303 --> 00:09:44,158
Wo habe ich also die Liste aller Komponenten?

120
00:09:44,158 --> 00:09:46,780
Ich habe sie im app_module.

121
00:09:46,780 --> 00:09:48,475
Also lassen Sie mich zum app_module gehen.

122
00:09:50,917 --> 00:09:58,300
Ich versuche, Dinge nicht so weit wie möglich zu tippen, um die Dinge unter Kontrolle zu halten.

123
00:09:58,300 --> 00:10:03,720
Also gehe ich zum app_module und kopiere dann alle Komponenten, die ich habe.

124
00:10:03,720 --> 00:10:08,681
Ich brauche die AppComponent nicht, weil ich nicht direkt dazu in meiner

125
00:10:08,681 --> 00:10:11,925
Anwendung navigiere, sondern die restlichen, die ich brauche.

126
00:10:11,925 --> 00:10:18,441
Also werde ich einfach alle diese kopieren und

127
00:10:18,441 --> 00:10:25,510
sie dann in meine Routendatei einfügen, hier.

128
00:10:25,510 --> 00:10:30,080
Also jetzt habe ich die MenuComponent, das Dishdetail, Header, Fuß.

129
00:10:30,080 --> 00:10:33,190
Eigentlich brauche ich auch nicht die Kopf- und FooterComponent.

130
00:10:33,190 --> 00:10:34,516
Ich brauche nicht die

131
00:10:34,516 --> 00:10:39,040
Kopf- und FooterComponent, weil ich nicht mit Routen zu ihnen navigieren werde.

132
00:10:39,040 --> 00:10:43,322
Lassen Sie mich also die Kopf- und Fußzeilenkomponenten löschen.

133
00:10:43,322 --> 00:10:46,842
Ich brauche nur das Menü, Home, Über, Kontakte.

134
00:10:46,842 --> 00:10:53,532
Ich habe das Dishdetail aufgenommen, dazu werden wir in einer der späteren Übungen kommen.

135
00:10:53,532 --> 00:10:57,949
Nun, da wir all diese eingeschlossen haben, ist der nächste Schritt für

136
00:10:57,949 --> 00:11:02,289
mich, die verschiedenen Routen zu definieren, die hier verfügbar sind.

137
00:11:02,289 --> 00:11:06,884
Ich werde hier eine Konstante definieren, die

138
00:11:06,884 --> 00:11:12,247
Routen vom Typ Routen genannt wird.

139
00:11:12,247 --> 00:11:17,908
Jetzt siehst du also, warum ich wichtige Routen vom Angular-Router dort habe.

140
00:11:17,908 --> 00:11:23,148
Dadurch kann ich ein Array definieren,

141
00:11:23,148 --> 00:11:28,651
das die verschiedenen Routen angibt, die Teil meiner Anwendung sind.

142
00:11:28,651 --> 00:11:32,940
Lassen Sie mich hier alle Routen angeben.

143
00:11:32,940 --> 00:11:37,854
Wenn Sie nun Routen in Ihrer

144
00:11:37,854 --> 00:11:42,776
Angular-Anwendung angeben, geben Sie den Pfad an.

145
00:11:42,776 --> 00:11:48,303
Was ich mit der HomeComponent beginnen werde,

146
00:11:48,303 --> 00:11:53,139
und wenn ich dann zum Home-Pfad navigiere,

147
00:11:53,139 --> 00:11:59,368
ist die entsprechende Komponente die HomeComponent.

148
00:12:00,630 --> 00:12:05,940
Also, wenn meine URL home enthält,

149
00:12:05,940 --> 00:12:08,930
dann navigiere ich zur HomeComponent.

150
00:12:09,930 --> 00:12:14,905
In der Vorlesung zuvor haben wir bereits gesehen, wie wir den HTML

151
00:12:14,905 --> 00:12:21,513
PushState () verwenden, um die interne

152
00:12:21,513 --> 00:12:27,010
Navigation zu erkennen, indem wir die HTML-Unterstützung für den PushState () verwenden.

153
00:12:27,010 --> 00:12:33,481
Das ist also, was ich hier nutze, um diese verschiedenen Routen hier zu definieren.

154
00:12:33,481 --> 00:12:38,003
Also, wenn ich localhost sage: 4200/home,

155
00:12:38,003 --> 00:12:43,387
dann zeigt das auf die HomeComponent, hier.

156
00:12:43,387 --> 00:12:48,850
So navigiere ich zur HomeComponent.

157
00:12:48,850 --> 00:12:55,909
Ebenso können wir für die anderen Komponenten in unserer Anwendung definieren.

158
00:12:55,909 --> 00:13:03,213
Der nächste Pfad, den ich definieren werde, ist zur MenuComponent.

159
00:13:03,213 --> 00:13:09,006
Für diese Übung werde ich nur diese beiden definieren.

160
00:13:09,006 --> 00:13:14,119
Die restlichen werden im Rahmen

161
00:13:14,119 --> 00:13:21,371
einiger der nachfolgenden Übungen und Aufgaben ausgefüllt.

162
00:13:21,371 --> 00:13:25,791
Also haben wir zwei von ihnen eingerichtet, Home und Menu.

163
00:13:25,791 --> 00:13:29,400
Jetzt sollte ich auch die Standardroute hier angeben.

164
00:13:29,400 --> 00:13:35,379
Wenn der Benutzer also zu localhost navigiert: 4200,

165
00:13:35,379 --> 00:13:40,670
dann landen Sie am Standardspeicherort.

166
00:13:40,670 --> 00:13:46,054
In diesem Fall werde ich den Benutzer einfach zur HomeComponent umleiten,

167
00:13:46,054 --> 00:13:50,828
was in der Angular-Anwendung angezeigt wird. Um das

168
00:13:50,828 --> 00:13:58,748
zu tun, werde ich die Eigenschaft RedirectTo eingeben.

169
00:13:58,748 --> 00:14:03,838
Und dann definieren Sie das zu /home.

170
00:14:03,838 --> 00:14:10,507
Das bedeutet, dass Sie, wenn Sie navigieren, ohne dort einen URL-Pfad

171
00:14:10,507 --> 00:14:16,708
anzugeben, automatisch zur HomeComponent navigieren würden,

172
00:14:16,708 --> 00:14:20,490
und dies sollte hier voll übereinstimmen.

173
00:14:20,490 --> 00:14:25,023
Also diese drei, werde ich für die Routen hier liefern, für den Moment.

174
00:14:25,023 --> 00:14:26,610
Die restlichen

175
00:14:26,610 --> 00:14:31,580
werden, wie gesagt, als Teil der restlichen Übungen hinzugefügt werden.

176
00:14:31,580 --> 00:14:36,658
Nun, offensichtlich siehst du diese roten zerquetschigen

177
00:14:36,658 --> 00:14:40,889
Linien da, weil die alle in sind

178
00:14:40,889 --> 00:14:46,011
../Also lass mich die reparieren.

179
00:14:46,011 --> 00:14:50,232
Also, jetzt, aus der Datei routes.ts,

180
00:14:50,232 --> 00:14:55,721
bereiten wir diese Routenkonstante hier vor und

181
00:14:55,721 --> 00:14:58,971
machen sie dann verfügbar.

182
00:14:58,971 --> 00:15:04,111
Jetzt, da dies für uns bereit ist, werden wir zum app-routing.module zurückkehren.

183
00:15:04,111 --> 00:15:09,282
Und im app-routing.module

184
00:15:09,282 --> 00:15:15,141
werde ich die Routenkonstante importieren,

185
00:15:15,141 --> 00:15:17,908
Routenkonstante.

186
00:15:17,908 --> 00:15:24,542
Wenn Sie sagen möchten, dass als Routen, Routen Konstanten, und verwenden Sie es hier.

187
00:15:24,542 --> 00:15:26,516
Wie kann ich es hier nutzen?

188
00:15:26,516 --> 00:15:31,451
Nun nimmt das RouterModule

189
00:15:31,451 --> 00:15:36,029
als Parameter für die ForRoot,

190
00:15:38,737 --> 00:15:42,261
Der Parameter ist die Routenkonfiguration.

191
00:15:42,261 --> 00:15:50,154
Also werde ich die Routen als Parameter dafür bereitstellen, das RouterModule.

192
00:15:50,154 --> 00:15:56,520
Okay, damit behebt unsere Routing-Konfiguration für unsere Anwendung.

193
00:15:56,520 --> 00:16:01,480
Eine letzte Änderung, die wir beheben müssen, ist, dass

194
00:16:01,480 --> 00:16:05,360
wir vom app-routing.module aus in der Lage sein wollen, das RouterModule in unser app-Modul zu exportieren

195
00:16:05,360 --> 00:16:07,120
, damit es es auch nutzen kann.

196
00:16:07,120 --> 00:16:11,796
Dies ist, wo wir die

197
00:16:11,796 --> 00:16:16,346
Exporteigenschaft in unserem NGModule Dekorator verwenden.

198
00:16:16,346 --> 00:16:22,907
Und stellen Sie unser RouterModule für das AppModule zur Verfügung.

199
00:16:22,907 --> 00:16:27,990
Also lassen Sie uns die Änderungen auch bisher speichern.

200
00:16:27,990 --> 00:16:30,845
Wenn Sie nun zu einem dieser Teile weiterleiten,

201
00:16:30,845 --> 00:16:36,040
unabhängig davon, welche Ansicht Sie für die jeweilige Komponente anzeigen.

202
00:16:36,040 --> 00:16:40,260
Wir haben momentan nichts in unserer Bewerbung.

203
00:16:40,260 --> 00:16:45,124
Wenn Sie sich die Datei AppComponent.html ansehen.

204
00:16:45,124 --> 00:16:49,961
Hier haben wir standardmäßig nur die app-header, app-menu

205
00:16:49,961 --> 00:16:52,107
und die app-footer hier.

206
00:16:52,107 --> 00:16:54,780
Nun zum Glück

207
00:16:54,780 --> 00:17:00,127
bietet uns das Angular RouterModule

208
00:17:00,127 --> 00:17:06,483
eine Direktive namens Router-Steckdose.

209
00:17:06,483 --> 00:17:11,635
Also, wenn Sie diese Direktive als angeben,

210
00:17:14,802 --> 00:17:18,192
Das Tag in Ihrer Vorlagendatei.

211
00:17:18,192 --> 00:17:23,355
Dann verwendet Ihre Angular-Anwendung

212
00:17:23,355 --> 00:17:30,545
dies automatisch als den Ort, an dem die entsprechende Ansicht eingefügt werden muss.

213
00:17:30,545 --> 00:17:36,725
Also, indem Sie das Router-Outlet in der Vorlagendatei meiner AppComponent angeben.

214
00:17:36,725 --> 00:17:44,537
Jetzt werde ich in der Lage sein, jede dieser Informationen an diesem bestimmten Ort anzuzeigen.

215
00:17:44,537 --> 00:17:48,747
Also haben wir Änderungen am App-Routing-Modul,

216
00:17:48,747 --> 00:17:54,573
der Datei AppComponent.html, vorgenommen, wo wir das Router-Outlet hinzugefügt haben.

217
00:17:54,573 --> 00:17:59,416
Wir haben die Routen in der Routes.ts-Datei definiert und

218
00:17:59,416 --> 00:18:06,074
dann haben wir das AppModule, wo wir im ApproutingModule

219
00:18:06,074 --> 00:18:12,350
als einen der Importe dort hinzugefügt haben, nachdem wir es hier oben importiert haben.

220
00:18:12,350 --> 00:18:15,110
Lassen Sie uns nach all diesen Änderungen

221
00:18:15,110 --> 00:18:21,890
einen Blick darauf werfen, was unsere Angular-Anwendungen im Browser zeigt. Wenn wir

222
00:18:21,890 --> 00:18:26,710
zu unserem Browser gehen, können wir jetzt sehen, dass in unserem Browser

223
00:18:26,710 --> 00:18:31,830
die Standardsache, die hier gezeigt wurde, zu Hause funktioniert.

224
00:18:31,830 --> 00:18:40,060
Aus Ihrem Wissen, wie die Komponente, die von Angular CLI generiert wird, funktioniert.

225
00:18:40,060 --> 00:18:46,840
Sie erkennen bereits, dass dies in der Vorlage für die Home-Komponente enthalten sein muss.

226
00:18:46,840 --> 00:18:53,040
Werfen Sie auch einen Blick auf die URL im Adressteil des Browsers.

227
00:18:53,040 --> 00:18:56,860
Sie sehen, dass es localhost sagt: 4200/home.

228
00:18:56,860 --> 00:18:59,682
Wenn ich einfach localhost: 4200 tippe,

229
00:18:59,682 --> 00:19:04,996
wird sich dies automatisch zu localhost umleiten: 4200/home.

230
00:19:04,996 --> 00:19:12,923
Weil wir diese spezielle Route in unserer Routenkonfiguration hier einrichten.

231
00:19:12,923 --> 00:19:16,889
Jetzt haben wir keine Möglichkeit, zu den restlichen Modulen zu gehen, also

232
00:19:16,889 --> 00:19:22,167
wie stellen wir die Verknüpfung bereit, damit wir zum verbleibenden Modul navigieren können.

233
00:19:22,167 --> 00:19:26,901
Um das auszufüllen, müssen wir gehen und in der Lage sein, zusätzliche

234
00:19:26,901 --> 00:19:31,358
Informationen in den Header-Komponenten-Vorlagendateien hinzuzufügen

235
00:19:31,358 --> 00:19:36,640
, so dass es zwischen diesen verschiedenen Komponenten navigieren kann.

236
00:19:36,640 --> 00:19:43,350
Kommen Sie zurück zu unserem Editor, lassen Sie mich die Datei HeaderComponent.html öffnen.

237
00:19:43,350 --> 00:19:49,010
In dieser HeaderComponent-Datei sehen wir, dass wir diese Schaltflächen

238
00:19:49,010 --> 00:19:56,110
hier oben haben, die es uns ermöglichen sollten, zu diesen bestimmten Komponenten dort zu navigieren.

239
00:19:56,110 --> 00:20:02,050
Also hier nehmen wir die Hilfe einer anderen Attribut-Direktive,

240
00:20:02,050 --> 00:20:08,370
die das Routing-Modul für uns als RouterLink zur Verfügung stellt.

241
00:20:08,370 --> 00:20:13,289
Dazu liefern wir

242
00:20:13,289 --> 00:20:17,984
RouterLink als /home.

243
00:20:17,984 --> 00:20:22,968
Was bedeutet, dass für diesen speziellen Button,

244
00:20:22,968 --> 00:20:26,171
der Home-Link in unserer Werkzeugleiste.

245
00:20:26,171 --> 00:20:30,334
Wenn wir darauf klicken, sollte mich das automatisch nach Hause leiten.

246
00:20:30,334 --> 00:20:36,640
Auf diese Weise weiß meine Angular-Anwendung, wohin ich mich an dieser Stelle schicken soll.

247
00:20:36,640 --> 00:20:40,090
Das ist also für Zuhause da.

248
00:20:40,090 --> 00:20:44,420
Nun ähnlich, lassen Sie mich auch eine für das Menü hier hinzufügen.

249
00:20:45,590 --> 00:20:48,550
Für das Menü, wenn ich auf den Menü-Link dort klicke,

250
00:20:48,550 --> 00:20:54,020
sollte das mich zur Menükomponente bringen.

251
00:20:54,020 --> 00:21:01,140
Die RouterLink-Attributdirektive ermöglicht es mir, wie Sie

252
00:21:01,140 --> 00:21:08,010
hier eine Zeichenfolge sehen, in der ich den Pfad angeben kann, der hinzugefügt werden muss.

253
00:21:09,010 --> 00:21:14,900
Lassen Sie uns diese Änderungen auch speichern, und dann werfen Sie einen letzten Blick auf unsere Anwendung.

254
00:21:14,900 --> 00:21:21,021
Gehen wir zu unserer Anwendung, jetzt sehen wir, dass eine Home-Komponente hier angezeigt wird.

255
00:21:21,021 --> 00:21:25,426
Wenn wir auf die Menükomponente klicken, befinden wir uns im Menü.

256
00:21:25,426 --> 00:21:30,570
Beachten Sie also, wie meine Anwendung automatisch zur

257
00:21:30,570 --> 00:21:35,509
Menükomponente navigiert hat, um die Ansicht mit dem Menü hier anzuzeigen.

258
00:21:35,509 --> 00:21:39,590
Und wenn Sie sich auch die Adressleiste ansehen,

259
00:21:39,590 --> 00:21:46,670
beachten Sie, wie die Adressleiste jetzt localhost anzeigt: 4200/menu.

260
00:21:46,670 --> 00:21:51,670
Wieder können wir zurück zur Home-Komponente und zur Menükomponente navigieren,

261
00:21:51,670 --> 00:21:52,410
hin und her.

262
00:21:53,580 --> 00:21:59,230
Dies zeigt also, wie

263
00:21:59,230 --> 00:22:04,940
wir durch Hinzufügen dieses Routing zu unserer Anwendung navigieren und verschiedene Ansichten innerhalb unserer Anwendung anzeigen können.

264
00:22:04,940 --> 00:22:09,640
Nun, die Über und Kontakt, wir werden das als Teil

265
00:22:09,640 --> 00:22:14,090
einer anderen Übung und der Aufgabe, die später folgt, tun.

266
00:22:15,150 --> 00:22:20,485
Dies schließt diese Übung ab, wo wir Angular Router Modul verwendet haben und

267
00:22:20,485 --> 00:22:25,047
dann unsere Angular-Anwendung konfiguriert haben, um verschiedene Routen

268
00:22:25,047 --> 00:22:27,212
zu verwenden, um die verschiedenen Ansichten anzuzeigen.

269
00:22:27,212 --> 00:22:29,240
Dies ist ein guter Zeitpunkt für

270
00:22:29,240 --> 00:22:35,117
Sie, ein Git-Commit mit der Nachricht Angular Router Grundlagen zu machen.

271
00:22:35,117 --> 00:22:36,115
( MUSIK)