1
00:00:03,450 --> 00:00:08,610
In this exercise, we're going to make use of the Angular HTTP Client to

2
00:00:08,610 --> 00:00:13,870
communicate with the JSON server that we have already setup in the previous exercise.

3
00:00:13,870 --> 00:00:21,270
We will be able to now download data from the server to our angular application using

4
00:00:21,270 --> 00:00:25,200
the HTTP client and then make use of the data in order to

5
00:00:25,200 --> 00:00:29,755
construct the various views within our components.

6
00:00:29,755 --> 00:00:34,050
In this exercise, we're going to reconfigure the dish service to be able to

7
00:00:34,050 --> 00:00:38,960
go and fetch the data about the dishes from the JSON server.

8
00:00:38,960 --> 00:00:40,545
As part of your assignment,

9
00:00:40,545 --> 00:00:41,920
you will complete the remaining two,

10
00:00:41,920 --> 00:00:44,735
the leader service and the promotion service.

11
00:00:44,735 --> 00:00:51,810
We'll see how we can leverage the HTTP client which will return an observable to us.

12
00:00:51,810 --> 00:00:55,580
We have already reconfigured our application,

13
00:00:55,580 --> 00:01:02,530
especially the service to be able to deliver observables to our components.

14
00:01:02,530 --> 00:01:07,070
Within our components, we are subscribing to these observables.

15
00:01:07,070 --> 00:01:10,745
So, the major part of the setup

16
00:01:10,745 --> 00:01:15,310
for obtaining data from the service to the component is already there.

17
00:01:15,310 --> 00:01:22,195
We will enhance it a little bit to deal with errors in the next exercise.

18
00:01:22,195 --> 00:01:27,290
Our first step in preparing the Angular application to use

19
00:01:27,290 --> 00:01:31,040
the HTTP client to access the server is to

20
00:01:31,040 --> 00:01:35,005
configure our application with the HTTPClientModule.

21
00:01:35,005 --> 00:01:38,505
So, to do that, open app.module.ts.

22
00:01:38,505 --> 00:01:42,030
Then, in here, let's import

23
00:01:42,030 --> 00:01:57,460
the HTTPClientModule from angular/common/HTTP.

24
00:02:00,410 --> 00:02:02,700
Once we import that,

25
00:02:02,700 --> 00:02:06,625
then we'll go ahead and configure the NgModule decorator

26
00:02:06,625 --> 00:02:12,510
in the imports with the HTTPClientModule.

27
00:02:14,890 --> 00:02:23,640
Now, our application is ready to make use of the HTTPClientModule to access the server.

28
00:02:23,640 --> 00:02:28,880
Now, make sure that the JSON server is up and running and

29
00:02:28,880 --> 00:02:31,190
serving up the data so that our application can

30
00:02:31,190 --> 00:02:34,520
communicate with the JSON server application.

31
00:02:34,520 --> 00:02:39,055
Now that we are accessing data from the server side,

32
00:02:39,055 --> 00:02:46,220
it is a good practice to create a special value which points to

33
00:02:46,220 --> 00:02:50,840
the baseURL of your server so

34
00:02:50,840 --> 00:02:55,845
that it can be configured within your angular application as and when required.

35
00:02:55,845 --> 00:02:58,325
So, going to the shared folder,

36
00:02:58,325 --> 00:03:05,345
I'm going to create a new file here named baseurl.ts.

37
00:03:05,345 --> 00:03:07,055
Then, within this file,

38
00:03:07,055 --> 00:03:15,995
I will include a constant and export it and the constant named baseURL,

39
00:03:15,995 --> 00:03:24,355
which I will set to HTTP://localhost:3000.

40
00:03:24,355 --> 00:03:31,455
So, as you recall, this is the baseURL at which my JSON server is accessible.

41
00:03:31,455 --> 00:03:35,665
So, localhost:3000/, there.

42
00:03:35,665 --> 00:03:37,565
So, with this,

43
00:03:37,565 --> 00:03:40,210
let me save the changes to the baseURL.

44
00:03:40,210 --> 00:03:47,105
Now, angular provides a way of supplying values like

45
00:03:47,105 --> 00:03:54,990
this to the rest of your application by configuring a provider within your app module.

46
00:03:54,990 --> 00:03:57,510
So, going to the app module,

47
00:03:57,510 --> 00:04:04,545
to enable us to provide that particular baseURL,

48
00:04:04,545 --> 00:04:10,870
we're going to first import the baseURL value into our angular application.

49
00:04:10,870 --> 00:04:27,380
So, I would say import baseURL from shared/baseurl.

50
00:04:27,650 --> 00:04:31,790
This value can now be made available to

51
00:04:31,790 --> 00:04:35,625
the rest of my application by going to the providers.

52
00:04:35,625 --> 00:04:38,270
Then, in addition to the LeaderService,

53
00:04:38,270 --> 00:04:42,150
if I configure a value like this,

54
00:04:42,150 --> 00:04:45,965
I would say provide

55
00:04:45,965 --> 00:04:56,070
and then baseURL, useValue.

56
00:04:56,540 --> 00:05:03,355
So, this way, I will be supplying this baseURL value as

57
00:05:03,355 --> 00:05:11,310
a value provider from within the app module to the rest of my angular application.

58
00:05:11,310 --> 00:05:12,835
In the next step,

59
00:05:12,835 --> 00:05:19,400
we're going to configure our DishService in order to let it access the server side,

60
00:05:19,400 --> 00:05:21,830
and then obtain the data from the server side,

61
00:05:21,830 --> 00:05:25,475
and then make the data available to our components.

62
00:05:25,475 --> 00:05:30,170
Now, we are going to go to the DishService.

63
00:05:30,170 --> 00:05:32,140
Then, in the DishService,

64
00:05:32,140 --> 00:05:37,790
these dishes are no longer needed from local file there.

65
00:05:37,790 --> 00:05:40,970
I'm going to download that data from the server side.

66
00:05:40,970 --> 00:05:46,475
So, I'm going to remove that and then add in an import

67
00:05:46,475 --> 00:05:55,460
of HTTPClient from angular,

68
00:05:55,460 --> 00:06:00,150
each common HTTP,

69
00:06:01,240 --> 00:06:10,130
import the baseURL from,

70
00:06:10,130 --> 00:06:19,015
recall that this is in shared/baseurl.

71
00:06:19,015 --> 00:06:21,715
Now, within my DishService,

72
00:06:21,715 --> 00:06:24,960
I'm going to go and fetch the data from the server side.

73
00:06:24,960 --> 00:06:27,510
So, in the constructor,

74
00:06:27,510 --> 00:06:31,740
I'm going to update the constructor by

75
00:06:32,260 --> 00:06:39,615
injecting HTTPClient into my constructor here.

76
00:06:39,615 --> 00:06:45,275
So, now, my DishService should be set up to

77
00:06:45,275 --> 00:06:50,990
obtain the data from the server side and return the data to my application.

78
00:06:50,990 --> 00:06:52,340
Now, you notice that

79
00:06:52,340 --> 00:06:56,915
the getDishes method is already set up to return the observable to the component.

80
00:06:56,915 --> 00:06:58,980
So, that part is already set up.

81
00:06:58,980 --> 00:07:06,080
Now, what this is going to return is what it obtains from

82
00:07:06,080 --> 00:07:13,230
the HTTP get method

83
00:07:13,230 --> 00:07:17,760
which we'll call the server side.

84
00:07:17,760 --> 00:07:21,015
So, in order to call the server side,

85
00:07:21,015 --> 00:07:23,775
I will have to supply,

86
00:07:23,775 --> 00:07:25,395
within the get method,

87
00:07:25,395 --> 00:07:30,750
the baseURL which I have

88
00:07:30,750 --> 00:07:36,020
already obtained, and then dishes.

89
00:07:36,020 --> 00:07:44,000
So, this way, the HTTP get method is going to get the data from localhost:3000/dishes.

90
00:07:44,610 --> 00:07:49,760
So, that is the server-side URL from

91
00:07:49,760 --> 00:07:54,995
which you can fetch the dishes data here. That is it.

92
00:07:54,995 --> 00:08:01,430
My server is going to supply the data in the form of an

93
00:08:01,430 --> 00:08:07,660
observable to this service when the HTTP get method is called,

94
00:08:07,660 --> 00:08:14,495
and that will be returned to the component through the getDishes method.

95
00:08:14,495 --> 00:08:19,580
That's about it. Now, my service is set up to go and

96
00:08:19,580 --> 00:08:24,525
fetch the data from the server side and then return the data to my component.

97
00:08:24,525 --> 00:08:29,670
I'm going to update the remaining methods also in a similar manner.

98
00:08:29,670 --> 00:08:36,230
So, what I will do for the next method for the getDish method is,

99
00:08:36,230 --> 00:08:38,760
I'm going to copy

100
00:08:39,190 --> 00:08:48,015
this part and then simply paste it into place here,

101
00:08:48,015 --> 00:08:49,890
and then we will edit that.

102
00:08:49,890 --> 00:08:54,830
Now, when you need to obtain for a particular dish,

103
00:08:54,830 --> 00:08:58,865
you have the ID of the dish that is available to you.

104
00:08:58,865 --> 00:09:03,870
So, we'll say getDish ID is available as a parameter.

105
00:09:03,870 --> 00:09:05,745
So, to the dishes,

106
00:09:05,745 --> 00:09:10,130
I'm going to add the ID as the other parameter here.

107
00:09:10,130 --> 00:09:13,250
Now, when I receive the response and then return

108
00:09:13,250 --> 00:09:18,905
it to the component through the getDish method call.

109
00:09:18,905 --> 00:09:21,470
Similarly, for the featured dish,

110
00:09:21,470 --> 00:09:26,355
it's going to be a little bit interesting way of configuring it.

111
00:09:26,355 --> 00:09:28,945
Now, for the featured dish,

112
00:09:28,945 --> 00:09:32,705
when you need to access the data from the server side,

113
00:09:32,705 --> 00:09:34,785
what I'm going to do is, now,

114
00:09:34,785 --> 00:09:41,140
when I ask for a featured dish, now,

115
00:09:41,140 --> 00:09:45,410
the way my server-side is set up is that I can send

116
00:09:45,410 --> 00:09:51,580
a query parameter within my URL so I can say dishes?

117
00:09:51,580 --> 00:09:56,615
and then say featured equal to true.

118
00:09:56,615 --> 00:10:00,290
So, this way, my server will return

119
00:10:00,290 --> 00:10:06,840
only those objects for which the featured flag is set to true,

120
00:10:06,840 --> 00:10:09,965
or the featured property is set to true on the server side.

121
00:10:09,965 --> 00:10:13,770
Now, this is how the server-side is set up.

122
00:10:13,770 --> 00:10:15,670
Now, again, once you obtain the data,

123
00:10:15,670 --> 00:10:20,390
then you simply map the value and then return that as

124
00:10:20,390 --> 00:10:25,490
an observable to my component through the get featured dish method.

125
00:10:25,490 --> 00:10:30,110
When I query the server side using the query parameter,

126
00:10:30,110 --> 00:10:34,155
it is going to return an array of objects that match.

127
00:10:34,155 --> 00:10:39,350
In this case, it so happens that the array will contain exactly one item there.

128
00:10:39,350 --> 00:10:44,230
But when I return the value after obtaining the result,

129
00:10:44,230 --> 00:10:51,865
I need to also include a zero there because this is an array,

130
00:10:51,865 --> 00:10:55,460
so I need to return the first element from the array.

131
00:10:55,460 --> 00:11:00,050
Before I forget, let me import

132
00:11:00,050 --> 00:11:10,770
the map operator from rxjs operators.

133
00:11:10,770 --> 00:11:14,200
Now, for the last one, the getDishIds,

134
00:11:14,200 --> 00:11:17,570
what I'm going to do is leverage the fact that I already

135
00:11:17,570 --> 00:11:27,340
have the getDishes method available to me.

136
00:11:27,340 --> 00:11:31,705
So, when the getDishes method returns,

137
00:11:31,705 --> 00:11:37,610
I'm going to map that with the map operator

138
00:11:41,280 --> 00:12:00,475
as dishes.map, dish.dish id.

139
00:12:00,475 --> 00:12:07,105
So, this way, I am returning just the value that I need,

140
00:12:07,105 --> 00:12:10,840
just the dish ids through this method here.

141
00:12:10,840 --> 00:12:12,765
That's about it.

142
00:12:12,765 --> 00:12:19,410
Now, my dish service is completely updated to go and fetch the data from

143
00:12:19,410 --> 00:12:27,840
the server site and then supply the data to my components in my.

144
00:12:27,840 --> 00:12:30,230
Angular application here.

145
00:12:30,230 --> 00:12:31,775
In the next step,

146
00:12:31,775 --> 00:12:34,645
I'm going to go into the menu component.

147
00:12:34,645 --> 00:12:37,085
Then within the menu component,

148
00:12:37,085 --> 00:12:45,400
I'm going to use the inject interface that is available through

149
00:12:45,400 --> 00:12:53,900
the angular core to inject this BaseURL that I have obtained there.

150
00:12:53,900 --> 00:12:56,340
So, how do we make use of that?

151
00:12:56,340 --> 00:13:00,665
Within the constructor of my component,

152
00:13:00,665 --> 00:13:03,530
I will go in and say,

153
00:13:05,520 --> 00:13:12,910
"@Inject" So, recall that we had set up

154
00:13:12,910 --> 00:13:20,675
this BaseURL as a provider for this value in the app module earlier.

155
00:13:20,675 --> 00:13:27,425
So, that BaseURL can now be injected into the component like this here.

156
00:13:27,425 --> 00:13:29,120
Now, when you have a service,

157
00:13:29,120 --> 00:13:31,170
you are injecting services like this here,

158
00:13:31,170 --> 00:13:32,875
but when you have a value,

159
00:13:32,875 --> 00:13:38,050
then you inject the value by using the "@Inject" decorator.

160
00:13:38,050 --> 00:13:45,935
Here, we are specifying the provider value that we specified there.

161
00:13:45,935 --> 00:13:48,720
We said, provide:BaseURL there,

162
00:13:48,720 --> 00:13:50,580
so that's the value that we are supplying here.

163
00:13:50,580 --> 00:13:53,470
Then, I'm declaring this as private BaseURL.

164
00:13:53,470 --> 00:13:55,660
So now, within my code here,

165
00:13:55,660 --> 00:14:02,910
this BaseURL is available to configure whatever I need within my application here.

166
00:14:02,910 --> 00:14:04,985
While I'm still here,

167
00:14:04,985 --> 00:14:14,450
I'm going to remove this selected dish that is also not being used within my application.

168
00:14:15,300 --> 00:14:21,190
Then, this method also I am not using with my application,

169
00:14:21,190 --> 00:14:25,085
so let me do a little bit of cleanup while I'm still here.

170
00:14:25,085 --> 00:14:27,925
The way we process the data that we obtained

171
00:14:27,925 --> 00:14:30,635
from the service will remain exactly the same.

172
00:14:30,635 --> 00:14:34,565
Because my service is still returning and observable,

173
00:14:34,565 --> 00:14:38,055
and I am subscribing to the observable within this component.

174
00:14:38,055 --> 00:14:40,765
So, that part doesn't change at all.

175
00:14:40,765 --> 00:14:47,645
Now, the reason why I inject the BaseURL within my component is that,

176
00:14:47,645 --> 00:14:50,935
in my template here,

177
00:14:50,935 --> 00:14:53,985
I am obtaining the dish image here.

178
00:14:53,985 --> 00:15:00,625
Now, but this dish image needs to be obtained from my server there,

179
00:15:00,625 --> 00:15:03,270
from the JSON server there.

180
00:15:03,270 --> 00:15:08,800
So, I need to go in and then update this source to say,

181
00:15:08,800 --> 00:15:13,020
BaseURL plus dish image.

182
00:15:13,020 --> 00:15:18,180
So, I need to supply the complete URL for that image there.

183
00:15:18,180 --> 00:15:26,995
So, that should be, httlp:// localhost:3000/images/, whatever.

184
00:15:26,995 --> 00:15:29,640
So, that's the reason why I need to supply

185
00:15:29,640 --> 00:15:34,605
the BaseURL value in addition to the dish image here.

186
00:15:34,605 --> 00:15:37,470
So, this I'm going to enclose within quotes,

187
00:15:37,470 --> 00:15:43,395
so that's the way an expression like this inside the interpolation will work correctly.

188
00:15:43,395 --> 00:15:48,935
So, enclose this within quotes and then supply that as the source value,

189
00:15:48,935 --> 00:15:54,730
and then here you see that you're using BaseURL plus the dish image,

190
00:15:54,730 --> 00:16:00,725
the dish.image, the image property contains only the partial URL.

191
00:16:00,725 --> 00:16:05,645
So, it contains images slash and image.png file name.

192
00:16:05,645 --> 00:16:14,640
So, that's why I need to append the http://localhost:3000/,

193
00:16:14,640 --> 00:16:23,220
to that dish image property so that I construct the total URL for my image.

194
00:16:23,220 --> 00:16:27,385
So, with this, my menu component is now completely set up

195
00:16:27,385 --> 00:16:32,000
to obtain all the data from the server side.

196
00:16:32,000 --> 00:16:37,100
Now, similarly, I would suggest that you update

197
00:16:37,100 --> 00:16:43,440
the dish detail component and also the home component.

198
00:16:43,440 --> 00:16:45,790
Going to the dish detail component,

199
00:16:45,790 --> 00:16:48,050
use the inject there,

200
00:16:48,050 --> 00:16:52,885
and then going to the constructor,

201
00:16:52,885 --> 00:16:57,685
in the constructor, now I need to use

202
00:16:57,685 --> 00:17:13,690
inject of BaseURL and BaseURL there,

203
00:17:13,690 --> 00:17:24,185
and so, my dish detail component is now set up to obtain the data from the dish service.

204
00:17:24,185 --> 00:17:26,620
So, this part will no longer change,

205
00:17:26,620 --> 00:17:29,780
it remains exactly the same because my dish service is simply

206
00:17:29,780 --> 00:17:34,395
returning an observable and I'm subscribing to that observable here.

207
00:17:34,395 --> 00:17:40,065
I also need to update the dish detail components template file,

208
00:17:40,065 --> 00:17:43,310
so similarly going to the image source here,

209
00:17:43,310 --> 00:17:52,645
I would add the BaseURL plus the dish image and then put that within quotations there.

210
00:17:52,645 --> 00:17:57,565
Similarly, going to the home component, same thing.

211
00:17:57,565 --> 00:18:02,830
I'm going to do an inject,

212
00:18:02,830 --> 00:18:09,320
and in the constructor

213
00:18:10,860 --> 00:18:18,080
I do an inject of BaseURL,

214
00:18:22,380 --> 00:18:27,640
and going to the home components template file,

215
00:18:27,640 --> 00:18:33,480
similarly where I use the dish image here,

216
00:18:33,480 --> 00:18:39,700
so I'm going to say, BaseURL plus dish image,

217
00:18:39,700 --> 00:18:44,815
and then enclose it within quotation marks here,

218
00:18:44,815 --> 00:18:48,530
and then save the changes.

219
00:18:52,230 --> 00:18:58,805
So, that's it. My application is now updated to use

220
00:18:58,805 --> 00:19:04,540
the server to obtain the data for the dishes.

221
00:19:04,540 --> 00:19:09,775
So, let's go and see the application in the browser.

222
00:19:09,775 --> 00:19:11,630
Going to the browser,

223
00:19:11,630 --> 00:19:14,150
you can now see that within my browser,

224
00:19:14,150 --> 00:19:18,480
my dish is being rendered exactly as before,

225
00:19:18,480 --> 00:19:20,920
and then going to the menu component,

226
00:19:20,920 --> 00:19:26,380
you see that the menu renders exactly as before and the dish detail component,

227
00:19:26,380 --> 00:19:31,935
also the dish details are rendered exactly as before.

228
00:19:31,935 --> 00:19:38,015
So, with the change that we have introduced by accessing the data from the server side,

229
00:19:38,015 --> 00:19:41,075
we are able to fetch the data from the server side and then

230
00:19:41,075 --> 00:19:45,335
render the data within our Angular application.

231
00:19:45,335 --> 00:19:51,365
In order to convince you that the data is actually being obtained from my JSON server,

232
00:19:51,365 --> 00:19:58,590
let's go to the terminal and then see the log on the terminal window there.

233
00:19:58,590 --> 00:20:03,620
Going to the terminal where my JSON server is running,

234
00:20:03,620 --> 00:20:08,625
you can see that I have actually performed a bunch of Git requests

235
00:20:08,625 --> 00:20:14,030
from my server site to obtain all the data that I need within my application.

236
00:20:14,030 --> 00:20:20,755
So, indeed my the Angular application is now fetching all the data from

237
00:20:20,755 --> 00:20:27,850
the server site for all the dishes within my Angular application.

238
00:20:27,850 --> 00:20:31,405
Now, you can use the same approach to also update

239
00:20:31,405 --> 00:20:35,035
the latest service and also the promotion service,

240
00:20:35,035 --> 00:20:40,200
but we will defer that until the final assignment in this course,

241
00:20:40,200 --> 00:20:43,380
but this may complete this exercise.

242
00:20:43,380 --> 00:20:46,920
In this exercise, we have learned how to make

243
00:20:46,920 --> 00:20:50,420
use of the HTTP client in order to obtain the data from

244
00:20:50,420 --> 00:20:54,595
the server site and then use the data in constructing

245
00:20:54,595 --> 00:20:59,525
the views within the components of our Angular application.

246
00:20:59,525 --> 00:21:06,000
This is a good time for you to do a Git commit with the message HTTP part one.