1
00:00:00,031 --> 00:00:04,477
[MUSIC]

2
00:00:04,477 --> 00:00:09,184
Nun, da wir eine schnelle Einführung in die MVM- und

3
00:00:09,184 --> 00:00:15,564
MVVM-Frameworks, Angular-Dienste und auch Abhängigkeitsinjektion hatten,

4
00:00:15,564 --> 00:00:21,003
gehen wir nun zu unserer nächsten Übung, wo wir unseren

5
00:00:21,003 --> 00:00:26,442
ersten Angular-Dienst erstellen und ihn dann in unsere Komponente einspritzen und

6
00:00:26,442 --> 00:00:29,710
ihn innerhalb unserer -Komponente.

7
00:00:29,710 --> 00:00:34,370
Um zu beginnen, gehen Sie zu Ihrer Anwendung

8
00:00:34,370 --> 00:00:38,629
im Editor Pad im App-Ordner,

9
00:00:38,629 --> 00:00:44,237
erstellen Sie einen neuen Unterordner und benennen Sie ihn als Dienste.

10
00:00:44,237 --> 00:00:52,918
Jetzt werden wir Angular CLI verwenden, um einen neuen Dienst zu unserer Angular-Anwendung hinzuzufügen.

11
00:00:52,918 --> 00:00:57,953
Um dies zu tun, geben Sie an der Eingabeaufforderung ng

12
00:00:57,953 --> 00:01:04,673
generieren service und services/dish ein.

13
00:01:04,673 --> 00:01:11,480
Dadurch wird ein neuer Dienst im Ordner „Dienste“ mit dem Namen „Dish Service“ erstellt.

14
00:01:11,480 --> 00:01:16,815
Sobald dies erstellt wurde, sehen Sie, dass zwei Dateien

15
00:01:16,815 --> 00:01:23,837
von der Angular CLI namens DishService.ts und dish.service.specter.ts erstellt werden.

16
00:01:23,837 --> 00:01:30,010
Dieser wird verwendet, um unseren Angular-Dienst zu testen, während wir später darüber sprechen werden.

17
00:01:30,010 --> 00:01:35,361
Der zweite ist, wo wir unseren Geschirrservice erstellen und

18
00:01:35,361 --> 00:01:42,516
diesen dann in unser App-Modul einspritzen und ihn in unserer Menükomponente nutzen werden.

19
00:01:42,516 --> 00:01:47,550
Gehen wir zum Editor, öffnen wir die Datei dish.service.ts.

20
00:01:47,550 --> 00:01:52,618
Nun, wenn Sie diese Datei öffnen, bemerken Sie sofort hier die allererste

21
00:01:52,618 --> 00:01:58,108
Anweisung, die besagt, importieren Sie {Injectable} von '@angular /core'.

22
00:01:58,108 --> 00:02:02,791
Dieses injizierbare erlaubt es uns, diesen injizierbaren

23
00:02:02,791 --> 00:02:06,674
Dekorator für jede Klasse zu definieren, die wir hier definiert haben.

24
00:02:06,674 --> 00:02:10,730
So können Sie sehen, dass wir hier eine Klasse definieren, die als DishService bezeichnet wird.

25
00:02:10,730 --> 00:02:15,532
Indem wir diesen injizierbaren Dekorator für diesen Geschirr-Service verwenden,

26
00:02:15,532 --> 00:02:21,030
machen wir dieses Objekt jetzt in unserer Anwendung injizierbar.

27
00:02:21,030 --> 00:02:25,481
Dies ist es also, was ermöglicht, dass die Abhängigkeitsinjektion innerhalb unserer

28
00:02:25,481 --> 00:02:26,490
Anwendung verwendet werden kann.

29
00:02:26,490 --> 00:02:30,345
Wenn Sie also die Klasse als injizierbar deklarieren,

30
00:02:30,345 --> 00:02:36,746
lassen Sie uns jetzt unseren DishService konfigurieren, um uns einige Informationen zur Verfügung zu stellen.

31
00:02:36,746 --> 00:02:39,119
Also, hier, Ich werde importieren,

32
00:02:42,757 --> 00:02:51,413
The Dish Klasse aus dem freigegebenen Ordner,

33
00:02:51,413 --> 00:02:55,354
und auch importieren, Die DISHIELS

34
00:02:58,307 --> 00:03:01,887
Konstante aus,

35
00:03:08,402 --> 00:03:11,574
Freigegebener Ordner hier.

36
00:03:11,574 --> 00:03:14,353
Sobald ich diese beiden importiert habe,

37
00:03:14,353 --> 00:03:19,432
kann mein Dienst jetzt konfiguriert werden, um den Wert für uns bereitzustellen.

38
00:03:19,432 --> 00:03:24,246
Also innerhalb des Dienstes werde ich

39
00:03:24,246 --> 00:03:29,370
einen neuen Methodenaufruf GetDishes hinzufügen, und

40
00:03:29,370 --> 00:03:35,753
diese Methode wird hier in einer Reihe von Gerichten zurückkehren.

41
00:03:35,753 --> 00:03:41,098
Und so wird diese Methode die DISH-Konstante zurückgeben

42
00:03:41,098 --> 00:03:45,722
, die wir in unseren DishService importiert haben.

43
00:03:45,722 --> 00:03:50,239
Damit ist unser DishService nun so konfiguriert,

44
00:03:50,239 --> 00:03:54,866
dass dieses DISH-JavaScript-Objekt-Array für jeden

45
00:03:54,866 --> 00:03:59,398
anderen Teil unserer Anwendung bereitgestellt wird, der es erfordert.

46
00:03:59,398 --> 00:04:03,862
Bevor das geschieht, müssen wir diesen Service in Anspruch nehmen und

47
00:04:03,862 --> 00:04:06,660
dann in unsere Anwendung injizieren.

48
00:04:06,660 --> 00:04:11,652
Um dies zu tun, öffnen wir die App-Modul.ts Datei.

49
00:04:11,652 --> 00:04:17,214
Also innerhalb der App-Modul.ts-Datei, direkt nach dem Importieren

50
00:04:17,214 --> 00:04:22,333
der Komponenten direkt dort, werde ich den,

51
00:04:25,974 --> 00:04:34,950
DishService direkt dort importieren.

52
00:04:34,950 --> 00:04:36,618
Und das wird importiert von,

53
00:04:42,730 --> 00:04:46,466
Dienstleistungen DishService hier.

54
00:04:46,466 --> 00:04:53,885
Sobald wir das importieren, dann werden wir diesen DishService als Provider deklarieren.

55
00:04:53,885 --> 00:04:58,121
Also, wenn Sie in den ng Modul Dekorator gehen, so

56
00:04:58,121 --> 00:05:03,170
sehen Sie diese dritte Eigenschaft hier genannt Provider.

57
00:05:03,170 --> 00:05:05,960
Wir haben also Erklärungen, Importe und Anbieter.

58
00:05:05,960 --> 00:05:11,176
Also, wenn Sie einen Dienst haben, den Sie für

59
00:05:11,176 --> 00:05:14,860
alle Komponenten aus einem Teil dieses Moduls zur Verfügung stellen möchten.

60
00:05:14,860 --> 00:05:21,170
Dann geben Sie dies als Provider innerhalb des Moduls hier an.

61
00:05:21,170 --> 00:05:25,618
Also, genau da, werde ich sagen, DishService, hier.

62
00:05:25,618 --> 00:05:31,036
Damit wird mein DishService jetzt für den Rest der Anwendung verfügbar.

63
00:05:31,036 --> 00:05:32,186
Nun, wie passiert das?

64
00:05:32,186 --> 00:05:36,948
Die Abhängigkeit des Angular injizierbare betrachtet diese Informationen, die wir

65
00:05:36,948 --> 00:05:41,944
hier deklariert haben, und entscheidet dann, dass es einen DishService erstellen muss und

66
00:05:41,944 --> 00:05:44,382
injiziert sie, wo immer es benötigt wird.

67
00:05:44,382 --> 00:05:47,092
Wie machen wir diesen Service in Anspruch?

68
00:05:47,092 --> 00:05:52,674
Wir sehen, dass wir in der Menükomponente früher die DISHIELS

69
00:05:52,674 --> 00:06:00,180
Konstante direkt bekommen haben, indem wir hier aus der gemeinsamen Geschirrdatei importiert haben.

70
00:06:00,180 --> 00:06:04,681
Nun ist dies nicht der ideale Weg, um die Informationen zu erhalten,

71
00:06:04,681 --> 00:06:09,812
anstatt die Informationen direkt in Ihre Komponente zu binden,

72
00:06:09,812 --> 00:06:14,685
sollten Sie lieber einen Dienst diese Informationen für Sie holen lassen.

73
00:06:14,685 --> 00:06:19,065
Später können wir unseren Service neu gestalten, um die

74
00:06:19,065 --> 00:06:24,579
gleichen Informationen von einem Back-End-Server abrufen zu können, wenn Sie dies wünschen.

75
00:06:24,579 --> 00:06:28,396
In der Tat werden wir das in einigen der späteren Übungen tun.

76
00:06:28,396 --> 00:06:33,384
Sie werden also die Verantwortung für das Abrufen der Informationen an den Dienst delegieren

77
00:06:33,384 --> 00:06:37,814
und dann nutzen Sie einfach den Dienst innerhalb dieser Menükomponente.

78
00:06:37,814 --> 00:06:43,627
Also werden wir diese Geschirrkomponente von dort löschen und

79
00:06:43,627 --> 00:06:48,806
stattdessen werden wir diesen DishService hier importieren.

80
00:06:48,806 --> 00:06:52,105
Und dieser DishService wird importiert von,

81
00:06:57,492 --> 00:07:04,140
services/dish.service Datei hier.

82
00:07:04,140 --> 00:07:09,744
Nachdem wir das jetzt hinzugefügt haben, haben wir einen Teil der Arbeit erledigt.

83
00:07:09,744 --> 00:07:14,774
Jetzt müssen wir diesen Service zur Verfügung stellen, damit unsere Komponente genutzt werden kann.

84
00:07:14,774 --> 00:07:18,107
Das ist also, wo wir zu diesem Konstruktor hier kommen werden.

85
00:07:18,107 --> 00:07:19,769
In diesem Konstruktor

86
00:07:19,769 --> 00:07:23,813
sehen Sie jetzt die Verwendung des Konstruktors innerhalb unserer Klasse hier.

87
00:07:23,813 --> 00:07:28,814
Also in diesem Konstruktor werden wir

88
00:07:28,814 --> 00:07:35,609
hier private DishService und DishService sehen.

89
00:07:35,609 --> 00:07:38,377
Dies ist also vom DishService-Typ, also

90
00:07:38,377 --> 00:07:43,914
wenn Sie dies im Konstruktor deklarieren, wenn diese Komponente erstellt wird,

91
00:07:43,914 --> 00:07:48,771
dann dieser DishService, den Sie in das App-Modul injiziert haben.

92
00:07:48,771 --> 00:07:52,222
Wenn Sie das in das App-Modul injizieren,

93
00:07:52,222 --> 00:07:56,177
wird ein einzelnes DishService-Objekt erstellt.

94
00:07:56,177 --> 00:08:00,956
Und dieses DishService-Objekt wird Ihnen in Ihrer

95
00:08:00,956 --> 00:08:02,123
Menükomponente hier zur Verfügung gestellt.

96
00:08:02,123 --> 00:08:09,606
So können Sie nun die Methoden aufrufen, die dieser DishService für

97
00:08:09,606 --> 00:08:13,780
Sie bereitstellt, um die Arbeit in Ihrem Namen zu erledigen.

98
00:08:13,780 --> 00:08:15,847
Also, wenn Sie das reinlegen,

99
00:08:15,847 --> 00:08:20,333
jetzt erkennen wir, dass wir diese Gerichte nicht mehr konstant hier haben.

100
00:08:20,333 --> 00:08:24,311
Also muss ich irgendwie diese Informationen holen.

101
00:08:24,311 --> 00:08:29,138
Nun, hier werde ich den Dienst nutzen, den ich für mich zur Verfügung habe, um

102
00:08:29,138 --> 00:08:31,023
die Informationen für uns zu holen.

103
00:08:31,023 --> 00:08:33,257
Wo holen wir diese Informationen ab?

104
00:08:33,257 --> 00:08:38,058
Also, hier werden wir die Hilfe dieser Lebenszyklusmethode namens

105
00:08:38,058 --> 00:08:38,801
NgonInit nehmen.

106
00:08:38,801 --> 00:08:43,861
Also, wenn Sie diese Lebenszyklusmethode namens NgonInit in Ihrer

107
00:08:43,861 --> 00:08:49,561
Anwendung deklarieren, so dass Sie sehen, dass in der Klasse, sagen Sie implementiert die OnInit.

108
00:08:49,561 --> 00:08:54,239
Die Implementierung dieses OnInit erfordert daher, dass Sie

109
00:08:54,239 --> 00:08:59,570
diese NGOnInit-Methode als Teil Ihrer Klasse hier implementieren.

110
00:08:59,570 --> 00:09:02,461
In dieser NGOnInit-Methode

111
00:09:02,461 --> 00:09:07,450
können Sie nun den Dienst bitten, diese Informationen abzurufen.

112
00:09:07,450 --> 00:09:08,690
Warum ist das so?

113
00:09:08,690 --> 00:09:13,560
Diese Lebenszyklusmethode wird

114
00:09:13,560 --> 00:09:19,040
von der Angular Framework ausgeführt werden, wenn diese Komponente instanziiert wird.

115
00:09:19,040 --> 00:09:23,770
Also, wenn diese Komponente erstellt wird, wird diese Methode ausgeführt werden.

116
00:09:23,770 --> 00:09:30,324
Also, wenn diese Methode ausgeführt wird, dann kann ich an diesem Punkt gehen und

117
00:09:30,324 --> 00:09:34,623
das Geschirr aus dem DishService holen.

118
00:09:34,623 --> 00:09:36,839
Also kann ich DishService sagen, und

119
00:09:36,839 --> 00:09:42,700
dann werden Sie wissen, dass Sie die GetDish-Methode innerhalb des DishService haben.

120
00:09:42,700 --> 00:09:48,105
Sie können auf die Methode aufrufen, um das Geschirr für Sie zu holen.

121
00:09:48,105 --> 00:09:52,511
Nun, wenn wir dies tun, dann wird das Geschirr Objekt durch

122
00:09:52,511 --> 00:09:56,090
den Dienst an uns durch diese GetDishs-Methode geliefert werden.

123
00:09:56,090 --> 00:10:03,829
Und das kann in unsere Gerichte lokale Variable gesetzt werden, die wir hier definiert haben.

124
00:10:03,829 --> 00:10:08,563
Damit schließen wir das Update für

125
00:10:08,563 --> 00:10:12,847
alle unsere Anwendungsdateien ab.

126
00:10:12,847 --> 00:10:18,993
Lassen Sie uns gehen und werfen Sie einen kurzen Blick auf die resultierende Angular-Anwendung. Wenn Sie

127
00:10:18,993 --> 00:10:23,507
zum Browser wechseln, können Sie jetzt sehen, dass die

128
00:10:23,507 --> 00:10:26,030
Angular-Anwendung im Browser wie zuvor gerendert wird.

129
00:10:26,030 --> 00:10:30,342
In dieser Version, wie Sie gesehen haben,

130
00:10:30,342 --> 00:10:34,967
werden die Informationen über die Gerichte in Ihre Komponente geholt werden, indem Sie den Service nutzen.

131
00:10:34,967 --> 00:10:38,847
Der Dienst wiederum wird diese Informationen für Sie abrufen.

132
00:10:38,847 --> 00:10:41,945
Jetzt in diesem Moment halten wir den Service sehr einfach.

133
00:10:41,945 --> 00:10:46,105
Der Dienst gibt einfach diesen konstanten Wert zurück, den wir hier definiert haben.

134
00:10:46,105 --> 00:10:50,738
Später können Sie sich vorstellen, dass Sie den Dienst erweitern würden, um

135
00:10:50,738 --> 00:10:54,042
diese Informationen vom Back-End-Server abzurufen.

136
00:10:54,042 --> 00:10:55,428
Wenn das passiert,

137
00:10:55,428 --> 00:11:00,489
wird das Abrufen von Informationen nicht mehr augenblicklich sein.

138
00:11:00,489 --> 00:11:04,911
Das ist, wo wir die Hilfe von Versprechen und

139
00:11:04,911 --> 00:11:11,022
auch den reaktiven JavaScript-Ansatz benötigen, um diese Verzögerung zu unterstützen und

140
00:11:11,022 --> 00:11:17,881
mit der Verzögerung beim Abrufen der Informationen innerhalb unserer Anwendung umzugehen.

141
00:11:17,881 --> 00:11:21,699
Wir werden im nächsten Modul ausführlicher darüber sprechen. Im

142
00:11:21,699 --> 00:11:26,683
Moment wird unsere Anwendung gut laufen, so dass Sie eines

143
00:11:26,683 --> 00:11:32,370
dieser Gerichte auswählen können und die Informationen werden genau wie zuvor angezeigt.

144
00:11:32,370 --> 00:11:38,250
Damit konkurrieren wir diese Übung, in der wir die Grundlagen der Angular-Dienste lernen.

145
00:11:38,250 --> 00:11:41,700
Und wir haben auch gesehen, wie wir den Angular-Dienst

146
00:11:41,700 --> 00:11:46,118
innerhalb unserer Anwendungskomponente nutzen können.

147
00:11:46,118 --> 00:11:51,682
Dies ist ein guter Zeitpunkt für Sie, ein Git-Commit mit den Nachrichtenbasisdiensten zu machen.

148
00:11:51,682 --> 00:11:57,797
( MUSIK).