1
00:00:00,000 --> 00:00:08,095
Теперь, когда мы завершили обновление серверной части,

2
00:00:08,095 --> 00:00:10,770
пришло время перейти к Angular Client.

3
00:00:10,770 --> 00:00:13,830
Для вашего удобства я предоставил вам

4
00:00:13,830 --> 00:00:17,700
репозиторий GitHub, который содержит окончательную версию

5
00:00:17,700 --> 00:00:20,840
Angular Client, который может взаимодействовать с

6
00:00:20,840 --> 00:00:26,805
нашим сервером REST API, а затем отображать различные представления для нашего клиента.

7
00:00:26,805 --> 00:00:29,690
Итак, я взял угловое приложение, которое мы

8
00:00:29,690 --> 00:00:32,895
разработали во втором курсе этой специализации,

9
00:00:32,895 --> 00:00:34,380
а затем модифицировал его.

10
00:00:34,380 --> 00:00:39,680
Мы проведем краткую экскурсию по коду чуть позже.

11
00:00:39,680 --> 00:00:44,005
Теперь вы клонируете репозиторий Git на свой компьютер,

12
00:00:44,005 --> 00:00:47,525
а затем запустите свой Angular Client,

13
00:00:47,525 --> 00:00:50,820
а затем увидите, что он взаимодействует с нашим сервером.

14
00:00:50,820 --> 00:00:54,555
Посмотрим подробности дальше.

15
00:00:54,555 --> 00:00:57,885
Чтобы начать работу с этим упражнением,

16
00:00:57,885 --> 00:01:01,345
в терминале или командном окне

17
00:01:01,345 --> 00:01:04,070
перейдите в удобное местоположение, а затем в

18
00:01:04,070 --> 00:01:06,685
командной строке введите git clone

19
00:01:06,685 --> 00:01:21,615
https://github.com/jmuppala/conFusion-Angular6.git.

20
00:01:21,615 --> 00:01:28,705
Затем, пусть угловое приложение клонируется на ваш компьютер.

21
00:01:28,705 --> 00:01:30,495
После завершения клонирования

22
00:01:30,495 --> 00:01:39,340
перейдите в папку Confusion-Angular6,

23
00:01:39,340 --> 00:01:43,620
которая была только что создана при клонировании этого репозитория git.

24
00:01:43,620 --> 00:01:48,845
Тогда вы сразу заметите, что есть куча файлов уже там.

25
00:01:48,845 --> 00:01:56,700
Теперь в командной строке введите npm install,

26
00:01:56,700 --> 00:02:00,500
чтобы установить все модули узла, от

27
00:02:00,500 --> 00:02:04,460
которых зависит это угловое приложение.

28
00:02:04,460 --> 00:02:09,415
Итак, как только модули узла или все установлены,

29
00:02:09,415 --> 00:02:18,095
тогда мы можем запустить наш NG служить для компиляции и обслуживания нашего углового приложения.

30
00:02:18,095 --> 00:02:21,765
После того, как все будет установлено с помощью установки npm,

31
00:02:21,765 --> 00:02:27,080
убедитесь, что ваш сервер MongoDB

32
00:02:27,080 --> 00:02:32,365
запущен и работает, а также ваш сервер REST API также работает и работает.

33
00:02:32,365 --> 00:02:35,165
В противном случае ваш угловой клиент не будет работать.

34
00:02:35,165 --> 00:02:39,720
Итак, теперь, когда вы установили свой Angular Client на вашем компьютере,

35
00:02:39,720 --> 00:02:43,815
в командной строке введите ng serve, и

36
00:02:43,815 --> 00:02:50,755
ваше угловое приложение будет скомпилировано и обслуживается ng serve в течение короткого времени.

37
00:02:50,755 --> 00:02:54,725
Как только ваше угловое приложение успешно скомпилировано,

38
00:02:54,725 --> 00:02:59,345
перейдите в браузер и откройте свое угловое приложение в браузере.

39
00:02:59,345 --> 00:03:01,025
Перейдя в браузер,

40
00:03:01,025 --> 00:03:06,665
в адресной строке,

41
00:03:06,665 --> 00:03:12,050
позвольте мне ввести localhost:4200, и

42
00:03:12,050 --> 00:03:14,345
вы увидите, что ваше угловое приложение

43
00:03:14,345 --> 00:03:17,930
запускается и отображается на экране здесь.

44
00:03:17,930 --> 00:03:21,170
Вы сразу заметите, что ваше

45
00:03:21,170 --> 00:03:24,500
угловое приложение может извлекать данные с сервера, а затем отображать

46
00:03:24,500 --> 00:03:28,115
различные части вашего углового приложения так же, как и то, что вы

47
00:03:28,115 --> 00:03:33,040
сделали в конце вашего углового курса.

48
00:03:33,080 --> 00:03:35,605
Когда вы переходите говорить о папке,

49
00:03:35,605 --> 00:03:42,730
вы также увидите, что страница «О программе» также отображает информацию как таковую.

50
00:03:42,730 --> 00:03:45,970
В меню, вы видите пункты в меню

51
00:03:45,970 --> 00:03:49,475
отображаются так же, как мы видели с угловым приложением.

52
00:03:49,475 --> 00:03:51,595
Теперь, кроме того, я добавил

53
00:03:51,595 --> 00:03:56,320
еще одну страницу в одностраничное приложение под названием My Favorites, к

54
00:03:56,320 --> 00:04:02,590
которому вы не можете перейти, потому что ни один пользователь не вошел в систему.

55
00:04:02,590 --> 00:04:05,960
Итак, вы видите, что у меня нет ни одного пользователя, зарегистрированного в системе.

56
00:04:05,960 --> 00:04:09,120
Поэтому нет смысла указывать мои избранные,

57
00:04:09,120 --> 00:04:10,845
потому что вы не знаете, какой пользователь,

58
00:04:10,845 --> 00:04:12,990
как избранное, должен быть показан здесь.

59
00:04:12,990 --> 00:04:15,580
Контактная страница, как обычно.

60
00:04:15,580 --> 00:04:17,345
Теперь, давайте войдем.

61
00:04:17,345 --> 00:04:19,235
Чтобы войти в наше приложение,

62
00:04:19,235 --> 00:04:25,665
мы нажмем на кнопку Login, а затем вы увидите, что появится диалоговое окно Login.

63
00:04:25,665 --> 00:04:32,620
Затем позвольте мне войти в систему как один из зарегистрированных пользователей,

64
00:04:32,620 --> 00:04:37,295
которые мы зарегистрировали в рамках этого курса ранее.

65
00:04:37,295 --> 00:04:39,100
Таким образом, после входа в систему

66
00:04:39,100 --> 00:04:41,840
вы сразу заметите, что

67
00:04:41,840 --> 00:04:44,150
в правом углу

68
00:04:44,150 --> 00:04:47,410
вы увидите, что кнопка «Вход» теперь превратилась в «

69
00:04:47,410 --> 00:04:51,730
Выход», и здесь указано имя пользователя.

70
00:04:51,730 --> 00:04:54,500
Итак, тот, кто вошел в систему, указан здесь.

71
00:04:54,500 --> 00:04:56,110
Вы также можете, в принципе,

72
00:04:56,110 --> 00:05:00,925
заменить это изображением пользователя.

73
00:05:00,925 --> 00:05:03,715
Теперь, для этого вам нужно сделать больше изменений

74
00:05:03,715 --> 00:05:07,790
как для клиента, так и для сервера, чтобы поддерживать отображение изображения здесь.

75
00:05:07,790 --> 00:05:10,570
Но, на данный момент, я просто показываю вам, как мы

76
00:05:10,570 --> 00:05:14,260
можем легко отобразить здесь информацию о пользователе.

77
00:05:14,260 --> 00:05:17,200
Таким образом, это требует незначительной модификации главы

78
00:05:17,200 --> 00:05:20,335
компонента, где я смогу получить

79
00:05:20,335 --> 00:05:23,410
имя пользователя из службы,

80
00:05:23,410 --> 00:05:27,060
называемой как служба OAuth, о которой мы поговорим в ближайшее время.

81
00:05:27,060 --> 00:05:29,420
Итак, как только пользователь войдет в систему,

82
00:05:29,420 --> 00:05:31,955
тогда если вы теперь нажмете «Мои избранные»,

83
00:05:31,955 --> 00:05:35,360
вы заметите, что в моем избранном для пользователя нет ничего.

84
00:05:35,360 --> 00:05:40,815
Очевидно, потому что пользователь еще не выбрал ни одного избранного.

85
00:05:40,815 --> 00:05:44,675
Итак, давайте теперь перейдем в Меню, а затем в Меню,

86
00:05:44,675 --> 00:05:52,980
позвольте мне выбрать один пункт, а затем они добавят это блюдо в наши избранные.

87
00:05:52,980 --> 00:05:55,230
Итак, спускаясь вниз,

88
00:05:55,230 --> 00:05:58,415
вы увидите символ сердца там,

89
00:05:58,415 --> 00:06:02,655
нажмите на него, и вы увидите, что это будет добавлено в Избранное.

90
00:06:02,655 --> 00:06:06,620
Тот факт, что это было добавлено в Избранное, указывает

91
00:06:06,620 --> 00:06:12,790
на изменение иконки здесь от незаполненного сердца к заполненному сердцу.

92
00:06:12,790 --> 00:06:15,790
Теперь, если вы идете к другому блюду,

93
00:06:15,790 --> 00:06:19,080
вы заметите, что у этого есть незаполненное сердце, а

94
00:06:19,080 --> 00:06:22,795
это значит, что его еще нет среди наших фаворитов.

95
00:06:22,795 --> 00:06:25,070
Итак, позвольте мне добавить еще один элемент в

96
00:06:25,070 --> 00:06:29,990
мои избранные, а затем давайте добавим третий элемент в мои избранные.

97
00:06:29,990 --> 00:06:37,455
Итак, теперь вы увидите, что если я теперь перейду в «Мои избранные»,

98
00:06:37,455 --> 00:06:42,560
вы увидите набор «Мои избранные», который отображается здесь.

99
00:06:42,560 --> 00:06:46,610
Итак, вы видели, что я только что добавил эти три блюда в «Мои избранные».

100
00:06:46,610 --> 00:06:48,820
Таким образом, они отображаются здесь.

101
00:06:48,820 --> 00:06:57,100
Таким образом, это отслеживается с помощью конечной точки избранного на стороне сервера,

102
00:06:57,100 --> 00:06:59,870
которую я реализовал как часть вашего последнего назначения.

103
00:06:59,870 --> 00:07:05,554
Итак, если вы сделали это назначение правильно, тогда эта часть должна работать так, как ожидалось.

104
00:07:05,554 --> 00:07:09,310
Теперь мы также можем изменить My Favorite.

105
00:07:09,310 --> 00:07:11,320
Так, например, в правом углу здесь

106
00:07:11,320 --> 00:07:14,165
вы видите этот переключатель Delete.

107
00:07:14,165 --> 00:07:16,320
Так что, позвольте мне включить это.

108
00:07:16,320 --> 00:07:17,730
Таким образом, когда вы включите его,

109
00:07:17,730 --> 00:07:22,025
вы сразу увидите три красных креста

110
00:07:22,025 --> 00:07:27,630
в нижней части этих трех элементов в разделе «Мои избранные».

111
00:07:27,630 --> 00:07:29,905
Когда я нажимаю его, они исчезают.

112
00:07:29,905 --> 00:07:36,750
Таким образом, это один из способов включения кнопок удаления в меню «Мои избранные», а затем.

113
00:07:36,750 --> 00:07:40,965
Итак, позвольте мне продолжить и удалить один из элементов из «Мои избранные».

114
00:07:40,965 --> 00:07:42,515
Таким образом, когда я нажимаю на эту кнопку,

115
00:07:42,515 --> 00:07:47,540
вы сразу заметите, что этот элемент удаляется из «Мои избранные»,

116
00:07:47,540 --> 00:07:50,405
и немедленно исчезает, и «Мои избранные»

117
00:07:50,405 --> 00:07:54,780
обновляются, и вы увидите полученное значение, отображаемое здесь.

118
00:07:54,780 --> 00:07:56,115
В то же время

119
00:07:56,115 --> 00:07:58,530
этот переключатель Delete отключен,

120
00:07:58,530 --> 00:08:01,250
так что кнопки удаления больше не видны.

121
00:08:01,250 --> 00:08:07,610
Я всегда могу снова включить кнопки удаления, нажав на кнопку включения и выключения здесь.

122
00:08:07,610 --> 00:08:11,210
Таким образом, обратите внимание, что Мои избранные будут отображаться только

123
00:08:11,210 --> 00:08:15,790
для пользователей, которые вошли в систему.

124
00:08:15,790 --> 00:08:21,260
Таким образом, вы сразу заметили набор изменений, которые были

125
00:08:21,260 --> 00:08:23,540
сделаны для Angular Client, чтобы

126
00:08:23,540 --> 00:08:26,930
поддержать некоторые из этих дополнительных функций, которые вы видите здесь.

127
00:08:26,930 --> 00:08:31,190
Вы также видели, как здесь поддерживается функция входа и выхода из системы.

128
00:08:31,190 --> 00:08:33,000
Итак, когда я нажимаю на кнопку Logout,

129
00:08:33,000 --> 00:08:35,930
вы сразу замечаете, что пользователь выходит из системы,

130
00:08:35,930 --> 00:08:39,800
и имя пользователя исчезает оттуда,

131
00:08:39,800 --> 00:08:44,250
и поэтому кнопка также превращается в кнопку Login.

132
00:08:44,560 --> 00:08:49,760
Итак, с этим вы заметили, как мой Angular клиент был

133
00:08:49,760 --> 00:08:54,880
обновлен, чтобы использовать новый сервер REST API,

134
00:08:54,880 --> 00:08:59,100
чтобы поддерживать сохраненные избранные и на стороне сервера,

135
00:08:59,100 --> 00:09:04,930
а затем автоматически отражаться в моем клиентском приложении, как показано здесь.

136
00:09:04,930 --> 00:09:08,305
Давайте проведем краткий тур по

137
00:09:08,305 --> 00:09:14,160
угловому коду, который я предоставил вам в репозитории GitHub,

138
00:09:14,160 --> 00:09:17,710
а также посмотрим, как мы изменили части кода,

139
00:09:17,710 --> 00:09:21,655
чтобы реализовать обновленное приложение Angular.

140
00:09:21,655 --> 00:09:24,310
Вы заметите, что есть новый сервис

141
00:09:24,310 --> 00:09:27,130
, который я представил здесь, называется auth service.

142
00:09:27,130 --> 00:09:29,295
Служба auth заботится обо

143
00:09:29,295 --> 00:09:35,985
всех действиях, связанных с аутентификацией для приложения Angular.

144
00:09:35,985 --> 00:09:37,715
Итак, в службе auth

145
00:09:37,715 --> 00:09:40,760
вы сразу заметите, что у меня

146
00:09:40,760 --> 00:09:45,545
есть набор информации, которую я настроил здесь.

147
00:09:45,545 --> 00:09:47,985
Поскольку вы уже знаете Angular,

148
00:09:47,985 --> 00:09:52,535
вы должны иметь возможность легко обрабатывать все, что написано здесь.

149
00:09:52,535 --> 00:09:57,355
Обратите внимание, в частности, что внутри самой службы auth

150
00:09:57,355 --> 00:09:59,240
я храню информацию, такую как,

151
00:09:59,240 --> 00:10:00,815
например, TokenKey,

152
00:10:00,815 --> 00:10:06,985
который является ключом для локального хранилища, где я храню JSON Web Token,

153
00:10:06,985 --> 00:10:11,500
а также некоторые дополнительные переменные

154
00:10:11,500 --> 00:10:16,310
здесь, где я отслеживаю имя пользователя и где я нахожусь ,

155
00:10:16,310 --> 00:10:21,955
а также отслеживать веб-токен JSON здесь.

156
00:10:21,955 --> 00:10:28,540
Теперь давайте начнем с просмотра, когда пользователь входит в систему.

157
00:10:28,540 --> 00:10:30,290
Таким образом, когда пользователь входит в систему,

158
00:10:30,290 --> 00:10:37,135
то эта функция под названием login будет вызываться в нашем сервисе auth здесь,

159
00:10:37,135 --> 00:10:40,350
и когда логин вызывается в сервисе auth,

160
00:10:40,350 --> 00:10:44,730
это будет передаваться в параметре под названием user, который содержит

161
00:10:44,730 --> 00:10:49,665
имя пользователя и пароль как часть объекта JavaScript пользователя.

162
00:10:49,665 --> 00:10:57,890
Итак, на данный момент я делаю сообщение HTTP в BaseUrl плюс пользователи/логин.

163
00:10:57,890 --> 00:11:00,320
Обратите внимание также, что здесь

164
00:11:00,320 --> 00:11:06,030
я предоставляю authResponse в качестве квалификатора здесь.

165
00:11:06,030 --> 00:11:09,945
AuthResponse - это не что иное, как интерфейс, который я реализовал здесь,

166
00:11:09,945 --> 00:11:11,350
вверху здесь.

167
00:11:11,350 --> 00:11:14,295
Таким образом, этот интерфейс по существу указывает

168
00:11:14,295 --> 00:11:16,860
информацию, которая вернется в качестве

169
00:11:16,860 --> 00:11:19,670
моего ответа аутентификации со стороны сервера,

170
00:11:19,670 --> 00:11:22,690
структуру данных JSON,

171
00:11:22,690 --> 00:11:25,690
возвращающихся со стороны сервера, и соответствующие объекты JavaScript.

172
00:11:25,690 --> 00:11:28,865
Итак, вы заметили, что когда мы обновили сервер,

173
00:11:28,865 --> 00:11:32,370
мы убедились, что сервер отправляет обратно статус,

174
00:11:32,370 --> 00:11:37,035
успех, флаг и токен в строковом индексе.

175
00:11:37,035 --> 00:11:42,000
Таким образом, эта информация получена здесь.

176
00:11:42,000 --> 00:11:44,240
Теперь, когда я делаю сообщение об этом,

177
00:11:44,240 --> 00:11:52,975
я передаю имя пользователя и пароль к сообщению на этой конечной точке /users/login.

178
00:11:52,975 --> 00:11:58,375
Когда ответ возвращается из ответа,

179
00:11:58,375 --> 00:12:03,490
само сообщение ответа будет содержать, как мы видели,

180
00:12:03,490 --> 00:12:06,525
успех, поле маркера,

181
00:12:06,525 --> 00:12:09,885
а также сообщение о состоянии здесь.

182
00:12:09,885 --> 00:12:11,950
Итак, из сообщения ответа

183
00:12:11,950 --> 00:12:16,960
я извлекаю токен, а затем передаю его в эту функцию, которую я реализую здесь,

184
00:12:16,960 --> 00:12:20,415
локальную функцию здесь, называемую StoreUserCredentials.

185
00:12:20,415 --> 00:12:30,295
Таким образом, это будет возвращено в мое приложение и будет храниться на моей стороне клиента,

186
00:12:30,295 --> 00:12:32,220
в локальное хранилище.

187
00:12:32,220 --> 00:12:34,545
Затем, из этой функции,

188
00:12:34,545 --> 00:12:37,870
я возвращаю эту информацию обратно в

189
00:12:37,870 --> 00:12:43,160
вызывающую функцию, откуда я инициировал процесс входа в систему.

190
00:12:43,160 --> 00:12:51,610
Таким образом, я буду указывать моему компоненту входа, что логин был успешным,

191
00:12:51,610 --> 00:12:56,345
а затем я также передам имя пользователя моему компоненту входа,

192
00:12:56,345 --> 00:12:59,680
который затем передаст эту информацию компоненту заголовка,

193
00:12:59,680 --> 00:13:03,860
а компонент заголовка использует это, чтобы отразить имя пользователя

194
00:13:03,860 --> 00:13:08,830
на в верхней части,

195
00:13:08,830 --> 00:13:11,145
а также мы поймаем ошибку здесь.

196
00:13:11,145 --> 00:13:16,390
Таким образом, это очень простая реализация того, как мы выполнили логин.

197
00:13:16,390 --> 00:13:17,840
Когда вы выполняете выход,

198
00:13:17,840 --> 00:13:20,735
обратите внимание, что я делаю, когда пользователь вызывает выход из системы.

199
00:13:20,735 --> 00:13:22,070
Когда пользователь вызывает выход из системы,

200
00:13:22,070 --> 00:13:24,560
я просто уничтожаю учетные данные пользователя, что

201
00:13:24,560 --> 00:13:26,845
включает в себя выброс

202
00:13:26,845 --> 00:13:33,085
JSON Web Token, который я получил, когда я вошел в свое приложение.

203
00:13:33,085 --> 00:13:37,010
Затем, некоторые дополнительные вспомогательные функции, которые я реализовал здесь под названием

204
00:13:37,010 --> 00:13:40,920
GetUsername, вошли в систему и GetToken,

205
00:13:40,920 --> 00:13:45,370
которые будут полезны из моих других приложений,

206
00:13:45,370 --> 00:13:50,140
других компонентов и сервисов.

207
00:13:50,140 --> 00:13:57,375
Итак, теперь давайте посмотрим на некоторые из вспомогательных функций, которые мы реализовали здесь.

208
00:13:57,375 --> 00:14:04,685
Таким образом, LoadUserCredentials извлечет учетные данные из локального хранилища.

209
00:14:04,685 --> 00:14:10,800
Итак, вы заметили, что здесь я вызываю LocalStorage, а затем говорю GetItem.

210
00:14:10,800 --> 00:14:12,750
Итак, LocalStorage здесь использует

211
00:14:12,750 --> 00:14:17,305
локальное хранилище веб-браузера, которое поддерживается стандартными веб-браузерами,

212
00:14:17,305 --> 00:14:19,140
и хранит информацию там,

213
00:14:19,140 --> 00:14:21,620
а затем извлекает эту информацию там.

214
00:14:21,620 --> 00:14:23,830
Затем, оттуда, учетные данные,

215
00:14:23,830 --> 00:14:25,745
если они действительны,

216
00:14:25,745 --> 00:14:27,950
то эти учетные данные будут установлены здесь.

217
00:14:27,950 --> 00:14:32,735
Таким образом, все эти переменные, которые я определил здесь, будут инициализированы

218
00:14:32,735 --> 00:14:38,965
соответствующей информацией после получения из LocalStorage.

219
00:14:38,965 --> 00:14:42,560
Теперь, аналогичным образом, функция StoreUserCredentials

220
00:14:42,560 --> 00:14:46,285
, которую я реализовал здесь, вызывается из метода входа.

221
00:14:46,285 --> 00:14:50,165
Когда эта информация передается,

222
00:14:50,165 --> 00:14:52,290
учетные данные передаются,

223
00:14:52,290 --> 00:14:57,665
эта информация хранится в LocalStorage на данный момент с этим ключом.

224
00:14:57,665 --> 00:15:00,825
Затем UseCredentials в основном

225
00:15:00,825 --> 00:15:05,510
устанавливает все переменные, которые у меня есть в службе auth.

226
00:15:05,510 --> 00:15:07,285
Таким образом, он устанавливает токен,

227
00:15:07,285 --> 00:15:09,225
он устанавливает имя пользователя,

228
00:15:09,225 --> 00:15:14,270
а затем устанавливает функцию IsAuthenticated здесь.

229
00:15:14,270 --> 00:15:17,590
Итак, обратите внимание, что само имя пользователя здесь,

230
00:15:17,590 --> 00:15:20,865
я объявил его как субъект,

231
00:15:20,865 --> 00:15:23,595
который не что иное, как наблюдаемый здесь.

232
00:15:23,595 --> 00:15:27,410
Поэтому, когда я говорю,

233
00:15:27,410 --> 00:15:30,705
sendUserName здесь, я говорю имя пользователя учетных данных.

234
00:15:30,705 --> 00:15:34,780
Итак, этот SendUsername реализован прямо в верхней части здесь,

235
00:15:34,780 --> 00:15:40,080
обратите внимание, что здесь возвращается наблюдаемое значение.

236
00:15:40,080 --> 00:15:43,305
Поэтому я говорю следующее имя пользователя.

237
00:15:43,305 --> 00:15:45,370
Итак, наблюдаемый.

238
00:15:45,370 --> 00:15:49,630
Отправит обратно имя, которое поставляется

239
00:15:49,630 --> 00:15:55,130
в качестве параметра тому, кто зарегистрировался, чтобы наблюдать это наблюдаемое.

240
00:15:55,130 --> 00:15:59,070
Таким образом, это наблюдаемое, я буду наблюдать это из

241
00:15:59,070 --> 00:16:03,980
моего компонента заголовка и таким образом, всякий раз, когда имя пользователя изменяется,

242
00:16:03,980 --> 00:16:09,870
либо от неопределенного до данного имени пользователя, либо наоборот,

243
00:16:09,870 --> 00:16:13,040
тогда я могу обновить свою панель инструментов в

244
00:16:13,040 --> 00:16:17,670
компоненте заголовка, чтобы отразить, вошел ли пользователь в систему или вышел из системы.

245
00:16:17,670 --> 00:16:21,770
Таким образом, это настраивается с помощью этого UseCredentials.

246
00:16:21,770 --> 00:16:29,010
Теперь DestroyUserCredentials в основном устанавливает токен аутентификации неопределенным.

247
00:16:29,010 --> 00:16:34,320
Он очищает имя пользователя, а затем устанавливает IsAuthenticated на false, а затем

248
00:16:34,320 --> 00:16:37,560
удаляет эту информацию из моего локального магазина, поэтому

249
00:16:37,560 --> 00:16:40,930
он в основном выбрасывает jsonwebtoken в этой части.

250
00:16:40,930 --> 00:16:43,330
Так вот как вы любите пользователя.

251
00:16:43,330 --> 00:16:47,150
Таким образом, как только jsonwebtoken потерян, пользователь больше не может

252
00:16:47,150 --> 00:16:49,850
аутентифицировать себя

253
00:16:49,850 --> 00:16:53,305
на стороне сервера, потому что токен больше не доступен для нас.

254
00:16:53,305 --> 00:16:58,340
Так вот как мы реализуем функцию выхода из системы в нашем приложении.

255
00:16:58,340 --> 00:17:01,030
Поэтому найдите некоторое время, чтобы пройти через

256
00:17:01,030 --> 00:17:05,350
auth.service здесь, чтобы увидеть, как я реализовал различные функциональные возможности.

257
00:17:05,350 --> 00:17:06,865
Теперь, к этому времени,

258
00:17:06,865 --> 00:17:13,190
я уверен, что вы хорошо знакомы с тем, как реализованы Angular приложения,

259
00:17:13,190 --> 00:17:17,960
поэтому вам не должно быть так сложно понять, как реализован этот код.

260
00:17:17,960 --> 00:17:24,575
Теперь еще одна функция, на которую я хотел бы обратить ваше внимание, - это токен проверки JWT, здесь.

261
00:17:24,575 --> 00:17:29,040
Эта функция может быть вызвана в любой момент, чтобы проверить и

262
00:17:29,040 --> 00:17:33,360
убедиться, что наш веб-токен JSON по-прежнему действителен.

263
00:17:33,360 --> 00:17:40,500
Таким образом, здесь я отправляю запрос get пользователям для проверки косой черты JWT токен.

264
00:17:40,500 --> 00:17:49,450
Напомним, что мы реализовали этот маршрут на стороне сервера в user's.js и.

265
00:17:49,450 --> 00:17:55,385
Таким образом, оттуда мы сможем проверить, остается ли jsonwebtoken действительным или нет.

266
00:17:55,385 --> 00:17:57,855
Если jsonwebtoken недействителен,

267
00:17:57,855 --> 00:17:59,170
то мы собираемся уничтожить

268
00:17:59,170 --> 00:18:03,045
учетные данные пользователя, а затем ожидать, что пользователь снова войдет в систему.

269
00:18:03,045 --> 00:18:06,550
Если jsonwebtoken действителен, то все в порядке, и

270
00:18:06,550 --> 00:18:10,375
мы можем продолжить, позволяя пользователю

271
00:18:10,375 --> 00:18:14,540
распознавать, что мы вошли в.So, даже если вы закроете

272
00:18:14,540 --> 00:18:18,665
свой браузер, а затем повторно открыли браузер, а затем снова открыли ваше угловое приложение,

273
00:18:18,665 --> 00:18:26,625
если вы вошли в систему раньше, и jsonwebtoken был сохранен в локальном хранилище,

274
00:18:26,625 --> 00:18:28,930
его можно получить оттуда, а затем

275
00:18:28,930 --> 00:18:33,740
ваш статус входа будет восстановлен в вашем угловом приложении.

276
00:18:33,740 --> 00:18:36,420
Если истек срок действия веб-токена json,

277
00:18:36,420 --> 00:18:38,635
то нам не будет разрешено войти в систему.

278
00:18:38,635 --> 00:18:44,280
Таким образом, каждый раз, когда вы обновляете свое угловое приложение в

279
00:18:44,280 --> 00:18:47,290
вашем браузере или перезагружаете свое угловое приложение в вашем браузере, вы будете

280
00:18:47,290 --> 00:18:50,550
проверять jsonwebtoken, чтобы убедиться, что оно по-прежнему действует.

281
00:18:50,550 --> 00:18:53,095
Если он недействителен, то пользователь будет

282
00:18:53,095 --> 00:18:56,200
очищен, и поэтому вам придется снова войти в систему.

283
00:18:56,200 --> 00:19:00,370
Если нет, то информация зарегистрированного пользователя извлекается

284
00:19:00,370 --> 00:19:05,020
из LocalStorage, а затем инициализируется в моем угловом приложении.

285
00:19:05,020 --> 00:19:09,765
Периодически, если в любой момент времени ваш сервер

286
00:19:09,765 --> 00:19:15,575
отвечает 401 Несанкционированное сообщение,

287
00:19:15,575 --> 00:19:16,880
даже в этот момент,

288
00:19:16,880 --> 00:19:22,045
мы снова проверим, что jsonwebtoken действителен, а затем разрешим это.

289
00:19:22,045 --> 00:19:26,960
Мы сделаем это, используя что-то, называемое Http перехватчиками.

290
00:19:26,960 --> 00:19:30,630
Позвольте мне осмотреть эту часть кода,

291
00:19:30,630 --> 00:19:35,180
а затем объяснить вам, как работают перехватчики за короткое время.

292
00:19:35,180 --> 00:19:38,635
Итак, теперь в дополнение к AuthService,

293
00:19:38,635 --> 00:19:45,545
в самой папке служб вы увидите этот файл под названием AuthInterceptors.ts файл.

294
00:19:45,545 --> 00:19:51,285
Итак, откройте это, и вы увидите, что здесь я реализовал Http перехватчики.

295
00:19:51,285 --> 00:19:54,435
Теперь, что делают эти перехватчики Http,

296
00:19:54,435 --> 00:20:00,780
это поддерживается клиентом Http, который поставляется как часть Angular 4.4.

297
00:20:00,780 --> 00:20:04,080
То, что делают перехватчики http, это они могут перехватывать

298
00:20:04,080 --> 00:20:06,180
исходящие сообщения запросов

299
00:20:06,180 --> 00:20:09,695
, вносить изменения в сообщение запроса до его отправки.

300
00:20:09,695 --> 00:20:15,660
Аналогичным образом, они могут перехватывать входящие ответные сообщения, а затем изменять

301
00:20:15,660 --> 00:20:18,970
входящее ответное сообщение до передачи ответа угловому приложению.

302
00:20:18,970 --> 00:20:22,920
Итак, через перехват, так как работает этот перехватчик?

303
00:20:22,920 --> 00:20:25,625
Таким образом, чтобы заставить этот перехватчик работать,

304
00:20:25,625 --> 00:20:28,620
мы реализуем, как вы видите,

305
00:20:28,620 --> 00:20:37,285
класс, называемый как HttpInterceptor, расширяя HttpInterceptor.

306
00:20:37,285 --> 00:20:39,805
Поэтому здесь я реализовал AuthInterceptor.

307
00:20:39,805 --> 00:20:42,175
Итак, что делает этот AuthInterceptor?

308
00:20:42,175 --> 00:20:47,660
Этот AuthInterceptor в основном захватывает исходящие запросы.

309
00:20:47,660 --> 00:20:51,785
Таким образом, чтобы захватить исходящий запрос, вы вызываете эту функцию, называемую перехватом,

310
00:20:51,785 --> 00:20:56,700
а затем это даст вам доступ к запросу и следующему.

311
00:20:56,700 --> 00:21:00,550
Таким образом, вы могли бы цепочки в

312
00:21:00,550 --> 00:21:05,080
куче перехватчиков один за другим, если вы так решите,

313
00:21:05,080 --> 00:21:11,050
чтобы они могли обрабатывать исходящие запросы один за другим, если вы так решите.

314
00:21:11,050 --> 00:21:20,260
То, что делает этот перехват, это дает вам доступ к сообщению запроса Http.

315
00:21:20,260 --> 00:21:23,300
Поэтому, когда я получаю доступ к сообщению запроса Http,

316
00:21:23,300 --> 00:21:27,810
вы заметите, что здесь я внедряю службу auth.

317
00:21:27,810 --> 00:21:33,870
В отличие от того, как мы вводили услуги в компоненты,

318
00:21:33,870 --> 00:21:37,295
здесь я показываю использование инжектора.

319
00:21:37,295 --> 00:21:39,995
Инжектор является частью углового кода.

320
00:21:39,995 --> 00:21:44,080
Таким образом, используя инжектор, вы можете вводить службы или

321
00:21:44,080 --> 00:21:50,020
другие компоненты в другие службы или компоненты.

322
00:21:50,020 --> 00:21:57,495
Итак, здесь вы видите, что я вводим сервис auth здесь, используя это.

323
00:21:57,495 --> 00:22:04,690
Теперь еще одна причина заключается в том, что если я напрямую введу службу в свой конструктор,

324
00:22:04,690 --> 00:22:11,545
он разработает круговую зависимость между перехватчиком и AuthService,

325
00:22:11,545 --> 00:22:15,200
и это приведет к тому, что ваш код не будет работать.

326
00:22:15,200 --> 00:22:18,190
Так что это работа вокруг проблем.

327
00:22:18,190 --> 00:22:21,430
Таким образом, ваш перехватчик - потому что мне нужен

328
00:22:21,430 --> 00:22:25,810
AuthService, чтобы получить токен из

329
00:22:25,810 --> 00:22:31,680
AuthService и AuthService, в свою очередь, зависит от этого перехватчика, поэтому для того,

330
00:22:31,680 --> 00:22:38,760
чтобы разорвать цикл, я явно впрыскиваю AuthService в этом случае.

331
00:22:38,760 --> 00:22:42,630
Теперь это то, что я понял с помощью проб

332
00:22:42,630 --> 00:22:47,080
и ошибок, я сначала пошел вперед и просто ввел

333
00:22:47,080 --> 00:22:49,600
нечетные службы в конструктор, а затем обнаружил, что

334
00:22:49,600 --> 00:22:54,270
Angular не компилировал код, тогда я понял, что

335
00:22:54,270 --> 00:23:01,510
там была ошибка, а затем после выполнения поиска Google затем

336
00:23:01,510 --> 00:23:05,330
выяснили, что это альтернативный способ обработки одного и

337
00:23:05,330 --> 00:23:09,620
того же, и это работает намного лучше для нашего приложения.

338
00:23:09,620 --> 00:23:13,560
Поэтому, как только я введу AuthService из службы, я

339
00:23:13,560 --> 00:23:17,555
получаю токен, а затем замечаю, что я здесь делаю.

340
00:23:17,555 --> 00:23:23,200
Здесь я говорю клон const auth req клон.

341
00:23:23,200 --> 00:23:29,380
Таким образом, мы будем клонировать запрос, а затем мы будем настраивать в заголовках.

342
00:23:29,380 --> 00:23:32,110
Таким образом, мы скажем, заголовки req устанавливают

343
00:23:32,110 --> 00:23:35,240
авторизацию, а затем заметим, что я

344
00:23:35,240 --> 00:23:38,005
настраиваю заголовок авторизации, чтобы быть носителем.

345
00:23:38,005 --> 00:23:42,100
Плюс AuthToken.

346
00:23:42,100 --> 00:23:47,360
Поэтому в заголовке авторизации я настраиваю носителя и AuthToken здесь.

347
00:23:47,360 --> 00:23:49,550
Так вот как я настраиваю

348
00:23:49,550 --> 00:23:53,080
заголовок авторизации в

349
00:23:53,080 --> 00:23:57,465
исходящем сообщении запроса в моем угловом приложении. Так вот, прямо там.

350
00:23:57,465 --> 00:24:01,660
И вот как я гарантировал, что все исходящие запросы будут

351
00:24:01,660 --> 00:24:06,645
иметь заголовок авторизации, настроенный до того, как они будут переданы на сторону сервера.

352
00:24:06,645 --> 00:24:12,775
И после этого мы просто передадим его следующему перехватчику, если он существует,

353
00:24:12,775 --> 00:24:15,140
или в исходящую очередь,

354
00:24:15,140 --> 00:24:19,935
так что сообщение запроса будет отправлено на сторону сервера.

355
00:24:19,935 --> 00:24:24,830
Аналогично, у меня есть еще один перехватчик, который я реализовал здесь.

356
00:24:24,830 --> 00:24:30,260
Этот перехватчик перехватывает любые несанкционированные

357
00:24:30,260 --> 00:24:31,800
ответные сообщения, возвращающиеся со стороны сервера.

358
00:24:31,800 --> 00:24:37,150
Таким образом, если сервер отвечает 401 Неавторизованный ответ сообщение.

359
00:24:37,150 --> 00:24:39,550
Поэтому в этот момент снова, то же самое,

360
00:24:39,550 --> 00:24:42,760
я создал AuthService здесь,

361
00:24:42,760 --> 00:24:46,410
а затем, внутри здесь, я скажу, что

362
00:24:46,410 --> 00:24:49,060
обрабатывайте ошибку.

363
00:24:49,060 --> 00:24:54,800
Так вот, где я получу HttpEvent здесь.

364
00:24:54,800 --> 00:25:04,580
HttpEvent является объектом более низкого уровня, чем запрос,

365
00:25:04,580 --> 00:25:08,630
но это позволяет нам получить доступ к входящему ответному сообщению,

366
00:25:08,630 --> 00:25:12,530
а затем мы проверим, есть ли ошибка,

367
00:25:12,530 --> 00:25:17,235
а затем если ошибка является экземпляром ответа HTTP ошибки,

368
00:25:17,235 --> 00:25:20,770
и если статус ошибки 401.

369
00:25:20,770 --> 00:25:28,220
Таким образом, это означает, что я только что обнаружил, что сервер отправил сообщение об ошибке 401.

370
00:25:28,220 --> 00:25:32,305
Таким образом, это означает, что на стороне сервера была проблема авторизации.

371
00:25:32,305 --> 00:25:33,790
Затем в этот момент я проверю

372
00:25:33,790 --> 00:25:37,620
веб-токен json, чтобы убедиться, что веб-токен json по-прежнему действителен.

373
00:25:37,620 --> 00:25:39,030
Если он недействителен,

374
00:25:39,030 --> 00:25:44,910
я отброшу свои учетные данные и ожидаю, что пользователь снова войдет в систему.

375
00:25:44,910 --> 00:25:48,880
Таким образом, я гарантирую, что если мой веб-токен json

376
00:25:48,880 --> 00:25:53,480
истекает в процессе попытки получить данные,

377
00:25:53,480 --> 00:25:58,045
которые все равно будут перехвачены здесь, потому что если сервер отвечает 401,

378
00:25:58,045 --> 00:26:00,280
я перехвачу это, а затем очищу

379
00:26:00,280 --> 00:26:03,830
мой веб-токен json, и я ожидаю, что пользователь снова войдет в систему.

380
00:26:03,830 --> 00:26:08,750
Мы также можем перенаправить пользователя на страницу входа, если вы хотите,

381
00:26:08,750 --> 00:26:12,330
но с приложением Angular это немного сложнее

382
00:26:12,330 --> 00:26:16,275
сделать, и я не хотел путать вас, делая все это.

383
00:26:16,275 --> 00:26:19,385
Вместо этого я просто выхожу из системы

384
00:26:19,385 --> 00:26:22,500
пользователя в этот момент, а затем уничтожаю учетные данные пользователя,

385
00:26:22,500 --> 00:26:25,855
так что пользователь будет ожидать входа в систему в этот момент.

386
00:26:25,855 --> 00:26:33,880
Итак, простая обработка того, как мы вводим заголовок авторизации в исходящий запрос,

387
00:26:33,880 --> 00:26:38,850
а также перехватываем любые 401 несанкционированные сообщения

388
00:26:38,850 --> 00:26:40,820
, которые возвращаются со стороны сервера.

389
00:26:40,820 --> 00:26:45,860
Итак, вы видите, как эти дополнительные изменения должны быть

390
00:26:45,860 --> 00:26:51,955
внесены в ваше угловое приложение, чтобы заставить его работать с вашей серверной стороной.

391
00:26:51,955 --> 00:26:55,125
С установленной частью аутентификации,

392
00:26:55,125 --> 00:26:58,200
если у вас не было аутентификации, и если вы просто собирались

393
00:26:58,200 --> 00:27:02,485
получить доступ к остальным конечным точкам API и выполнять операции,

394
00:27:02,485 --> 00:27:05,240
вам даже не нужно беспокоиться об этих вещах.

395
00:27:05,240 --> 00:27:06,790
Проверка подлинности не требуется.

396
00:27:06,790 --> 00:27:09,140
Данные могут быть извлечены очень легко.

397
00:27:09,140 --> 00:27:10,590
Но для любых

398
00:27:10,590 --> 00:27:12,395
операций post, put и delete,

399
00:27:12,395 --> 00:27:15,630
мы должны поддерживать все эти функции.

400
00:27:15,630 --> 00:27:21,375
Поэтому я реализовал часть аутентификации в своем приложении.

401
00:27:21,375 --> 00:27:23,995
Также, как я иллюстрировал ранее

402
00:27:23,995 --> 00:27:26,985
, когда ни один пользователь

403
00:27:26,985 --> 00:27:32,570
не вошел в систему, мы не сможем перейти к моей конечной точке

404
00:27:32,570 --> 00:27:35,035
избранного, но когда пользователь вошел в систему,

405
00:27:35,035 --> 00:27:40,420
то мы сможем увидеть мои избранные для конкретного пользователя.

406
00:27:40,420 --> 00:27:45,095
Это реализовано с помощью охранников маршрутов в Angular.

407
00:27:45,095 --> 00:27:47,995
Теперь, чтобы реализовать эти охранники маршрутов,

408
00:27:47,995 --> 00:27:52,080
я реализовал другую службу здесь под названием AuthGuardService.

409
00:27:52,080 --> 00:27:54,170
Таким образом, в этом AuthGuardService

410
00:27:54,170 --> 00:27:57,970
мы реализовали этот метод под названием canActivate метод, который

411
00:27:57,970 --> 00:28:02,225
мы будем подкласс, чтобы реализовать это.

412
00:28:02,225 --> 00:28:05,705
И в методе CanActivate

413
00:28:05,705 --> 00:28:08,550
реализация вернет логическое значение,

414
00:28:08,550 --> 00:28:10,090
и в этом случае

415
00:28:10,090 --> 00:28:15,630
мы проверяем, если этот пользователь вошел в систему,

416
00:28:15,630 --> 00:28:18,605
то мы позволим пользователю перемещаться.

417
00:28:18,605 --> 00:28:25,480
В противном случае пользователь переместится на домашнюю конечную точку.

418
00:28:25,480 --> 00:28:31,175
Таким образом, в этом случае реализована защита маршрута.

419
00:28:31,175 --> 00:28:33,955
Теперь, чтобы использовать этот маршрут охранник,

420
00:28:33,955 --> 00:28:41,780
мы пойдем, чтобы посмотреть, как маршруты обновляются, чтобы использовать охранники маршрута.

421
00:28:41,780 --> 00:28:44,520
Таким образом, в файле routes.ts,

422
00:28:44,520 --> 00:28:50,435
вы можете видеть, что для компонента Избранное,

423
00:28:50,435 --> 00:28:54,510
мы видим, что мы указываем путь как избранное и компонент как

424
00:28:54,510 --> 00:28:58,620
FavoritesComponent, а затем мы указываем это другое поле

425
00:28:58,620 --> 00:29:07,785
под названием CanActivate, для которого мы указали authGuard в качестве параметра здесь,

426
00:29:07,785 --> 00:29:12,445
и это AuthGuard - это не что иное, как сервис AuthGuard, который мы реализовали,

427
00:29:12,445 --> 00:29:14,825
который импортируется здесь.

428
00:29:14,825 --> 00:29:20,405
Таким образом, когда AuthGuard оценивает false,

429
00:29:20,405 --> 00:29:24,755
то вам не будет разрешено перейти к компоненту избранного

430
00:29:24,755 --> 00:29:28,105
, вместо этого вы будете перенаправлены на дом,

431
00:29:28,105 --> 00:29:36,245
но когда пользователь войдет в систему, то, очевидно, AuthGuard будет оценивать true

432
00:29:36,245 --> 00:29:37,390
, и в этом случае

433
00:29:37,390 --> 00:29:41,665
вы сможете , чтобы перейти к выбранному маршруту.

434
00:29:41,665 --> 00:29:49,700
Теперь также есть незначительные изменения в остальных компонентах,

435
00:29:49,700 --> 00:29:52,200
которые позволяют разобраться с

436
00:29:52,200 --> 00:29:57,365
тонкостями того, как ваш клиент и сервер будут общаться друг с другом.

437
00:29:57,365 --> 00:30:02,555
В частности, обратите внимание, как компонент заголовка был обновлен

438
00:30:02,555 --> 00:30:08,195
, чтобы отразить состояние входа пользователя на панели инструментов вверху.

439
00:30:08,195 --> 00:30:11,500
Это еще одно интересное изменение, которое я

440
00:30:11,500 --> 00:30:15,710
сделал в компоненте заголовка в нашем приложении.

441
00:30:15,710 --> 00:30:20,220
Поэтому я оставлю это как упражнение для вас, чтобы выяснить, как это было реализовано.

442
00:30:20,220 --> 00:30:22,160
Там очень простой код.

443
00:30:22,160 --> 00:30:24,660
Тебе будет легко понять это.

444
00:30:24,660 --> 00:30:28,020
Таким образом, со всеми этими изменениями, теперь

445
00:30:28,020 --> 00:30:32,095
мой угловой клиент может взаимодействовать с моим сервером.

446
00:30:32,095 --> 00:30:36,540
Позвольте мне еще раз показать вам, как мы можем разместить некоторые комментарии на сервере,

447
00:30:36,540 --> 00:30:41,995
а затем увидеть комментарий сразу отраженный в блюде.

448
00:30:41,995 --> 00:30:45,325
Итак, снова возвращаясь к нашему приложению,

449
00:30:45,325 --> 00:30:50,050
мы можем теперь перейти в меню, а затем вытащить любое блюдо здесь,

450
00:30:50,050 --> 00:30:52,740
и я могу отправлять комментарии к блюду здесь,

451
00:30:52,740 --> 00:30:59,600
так что я бы сразу установил рейтинг здесь,

452
00:30:59,600 --> 00:31:02,540
и мой комментарий значение здесь.

453
00:31:03,540 --> 00:31:06,700
Обратите внимание, что я не вводим

454
00:31:06,700 --> 00:31:15,735
свое имя пользователя или имя автора здесь, в форме здесь.

455
00:31:15,735 --> 00:31:18,470
Теперь, конечно, для того, чтобы отправить комментарий,

456
00:31:18,470 --> 00:31:19,590
вам нужно войти в систему.

457
00:31:19,590 --> 00:31:24,520
Поэтому, если вы не вошли в систему, этот комментарий не будет принят моим сервером.

458
00:31:24,520 --> 00:31:26,935
Так что позвольте мне сначала войти в систему.

459
00:31:26,935 --> 00:31:32,890
Поэтому я могу войти здесь.

460
00:31:32,890 --> 00:31:34,220
И как только я войду в систему,

461
00:31:34,220 --> 00:31:39,255
вы сразу заметите, что панель инструментов заголовка обновляется, чтобы указать мой статус.

462
00:31:39,255 --> 00:31:41,375
Теперь я могу опубликовать этот комментарий.

463
00:31:41,375 --> 00:31:43,990
И вы заметили, что когда я размещаю

464
00:31:43,990 --> 00:31:46,440
комментарий, комментарий добавляется в список комментариев,

465
00:31:46,440 --> 00:31:50,575
а также заметили, что поле автора автоматически заполняется здесь.

466
00:31:50,575 --> 00:31:54,040
Потому что именно так мы настроили нашу серверную сторону.

467
00:31:54,040 --> 00:31:55,570
В поле комментариев

468
00:31:55,570 --> 00:31:58,880
мы создали нашего пользователя как

469
00:31:58,880 --> 00:32:05,890
ссылку на пользовательскую информацию,

470
00:32:05,890 --> 00:32:09,755
которую мы храним на нашей стороне сервера, и так как мы используем заполнение,

471
00:32:09,755 --> 00:32:11,585
Mongoose Populate на стороне сервера,

472
00:32:11,585 --> 00:32:14,080
информация о пользователе автоматически заполняется

473
00:32:14,080 --> 00:32:16,715
в входящие комментарии с сервера сторона.

474
00:32:16,715 --> 00:32:21,130
Таким образом, вы замечаете, как я использую то, что

475
00:32:21,130 --> 00:32:25,615
сервер уже предоставляет для меня, чтобы автоматически заполнить детали.

476
00:32:25,615 --> 00:32:31,180
Таким образом, незначительные изменения снова даже

477
00:32:31,180 --> 00:32:38,880
на странице сведений о блюде, чтобы отразить использование поддержки комментариев на стороне сервера.

478
00:32:38,880 --> 00:32:43,769
С этим я завершу быструю

479
00:32:43,769 --> 00:32:49,575
иллюстрацию углового клиента, который мы реализовали в рамках этого упражнения.

480
00:32:49,575 --> 00:32:55,990
И я надеюсь, что вы также изучите детали кода в Angular клиенте,

481
00:32:55,990 --> 00:32:59,410
а затем подумайте о том, что вы узнали в угловом курсе, и посмотрите,

482
00:32:59,410 --> 00:33:03,105
как изменения позволяют нам реализовать

483
00:33:03,105 --> 00:33:06,350
в модифицированном угловом клиенте, который теперь

484
00:33:06,350 --> 00:33:09,705
может общаться с сервером и затем поддерживают все функции

485
00:33:09,705 --> 00:33:17,310
, которые мы изначально планировали реализовать как часть как клиента, так и сервера.