1
00:00:00,000 --> 00:00:08,745
Теперь, когда у нас есть понимание одностраничных приложений,

2
00:00:08,745 --> 00:00:10,660
мы продолжим работу над

3
00:00:10,660 --> 00:00:14,490
нашего углового приложения, которое мы работали в упражнениях до сих пор

4
00:00:14,490 --> 00:00:16,980
и развивать его в

5
00:00:16,980 --> 00:00:21,535
одностраничное приложение, используя поддержку модуля углового маршрутизатора.

6
00:00:21,535 --> 00:00:25,110
Мы уже включили несколько компонентов как часть

7
00:00:25,110 --> 00:00:28,770
нашего углового приложения в предыдущем упражнении, и мы уже сделали

8
00:00:28,770 --> 00:00:32,625
настроены для нашего углового приложения, чтобы иметь возможность маршрутизировать

9
00:00:32,625 --> 00:00:37,410
между двумя различными компонентами.

10
00:00:37,410 --> 00:00:40,970
Теперь мы будем интегрировать больше в наше угловое приложение и

11
00:00:40,970 --> 00:00:44,960
развивать его в полноценное угловое приложение вместе с

12
00:00:44,960 --> 00:00:49,040
навигации между различными взглядами

13
00:00:49,040 --> 00:00:53,790
, оказываемыми различными компонентами нашего приложения.

14
00:00:53,800 --> 00:00:58,275
Продолжая наше приложение, как оно стоит сейчас,

15
00:00:58,275 --> 00:01:05,990
у нас есть дом, который отображается, когда вы переходите к нашему приложению

16
00:01:05,990 --> 00:01:09,740
прямо сейчас, а затем шаблон Home был показан между заголовком и нижним колонтитулом, а затем, когда вы переходите в меню,

17
00:01:09,740 --> 00:01:13,740
меню отображается между заголовком

18
00:01:13,740 --> 00:01:19,920
и нижний колонтитул в виде здесь.

19
00:01:19,920 --> 00:01:25,490
Теперь, очевидно, нам нужно интегрировать другие компоненты, которые мы

20
00:01:25,490 --> 00:01:28,700
включили в наше угловое приложение

21
00:01:28,700 --> 00:01:32,715
, чтобы разработать это как полноценное угловое приложение.

22
00:01:32,715 --> 00:01:36,135
В этом упражнении мы собираемся интегрировать ContactComponent,

23
00:01:36,135 --> 00:01:38,914
мы обновим шаблон для ContactComponent,

24
00:01:38,914 --> 00:01:43,190
мы также обновим шаблон для HomeComponent и сделаем это

25
00:01:43,190 --> 00:01:48,600
шаг вперед в направлении нашего одностраничного углового приложения.

26
00:01:48,600 --> 00:01:52,585
Давайте начнем с ContactComponent.

27
00:01:52,585 --> 00:01:56,630
Чтобы начать, сначала скопируйте шаблон для

28
00:01:56,630 --> 00:02:01,070
ContactComponent, который я дал вам в инструкциях упражнения, а затем

29
00:02:01,070 --> 00:02:06,660
вставьте его в файл contactcomponent.html, так что мы будем смывать

30
00:02:06,660 --> 00:02:13,580
из фактического представления нашего ContactComponent немного более подробно здесь.

31
00:02:13,580 --> 00:02:18,680
Теперь вы можете видеть, что я вырезал и вставил код для

32
00:02:18,680 --> 00:02:24,550
файла шаблона из инструкций в мой ContactComponent.

33
00:02:24,550 --> 00:02:27,650
Мы завершим интеграцию

34
00:02:27,650 --> 00:02:30,665
ContactComponent в нашем приложении, а затем посмотрим на

35
00:02:30,665 --> 00:02:33,590
, как выглядит ContactComponent, а затем вернемся

36
00:02:33,590 --> 00:02:36,940
и быстро посмотрим на этот код немного позже.

37
00:02:36,940 --> 00:02:41,660
Теперь, чтобы интегрировать ContactComponent в наше угловое приложение,

38
00:02:41,660 --> 00:02:46,910
нам нужно включить путь к ContactComponent в наши маршруты.

39
00:02:46,910 --> 00:02:52,270
Итак, перейдя в файл routes.ts сразу после Меню,

40
00:02:52,270 --> 00:03:01,520
Я собираюсь включить другой путь для ContactComponent Я буду использовать

41
00:03:01,520 --> 00:03:05,480
URL, как связаться с нами и

42
00:03:05,480 --> 00:03:15,375
соответствующий компонент ContactComponent здесь.

43
00:03:15,375 --> 00:03:19,815
Таким образом, с этим, мы теперь интегрировали наш ContactComponent

44
00:03:19,815 --> 00:03:24,725
в наше приложение и давайте сохраним изменения в

45
00:03:24,725 --> 00:03:30,935
это, а затем нам также нужно будет обновить компонент заголовка и обновить

46
00:03:30,935 --> 00:03:37,540
ссылку в компоненте заголовка, чтобы помочь нам перейти к ContactComponent.

47
00:03:37,540 --> 00:03:43,680
Итак, я просто собираюсь скопировать это из меню ссылку в

48
00:03:43,680 --> 00:03:48,710
панели инструментов моего компонента заголовка там, а затем скопировать это в

49
00:03:48,710 --> 00:03:53,960
ContactComponent, а затем обновить его, как связаться с нами.

50
00:03:53,960 --> 00:03:57,680
Давайте сохраним изменения во всех файлах и

51
00:03:57,680 --> 00:04:02,469
затем посмотрим на результирующее приложение.

52
00:04:02,469 --> 00:04:05,725
Перейдя к приложению в нашем браузере,

53
00:04:05,725 --> 00:04:08,570
если мы теперь перейдем к ContactComponent,

54
00:04:08,570 --> 00:04:12,680
мы можем видеть, что детали ContactComponent отображаются

55
00:04:12,680 --> 00:04:16,790
здесь между заголовком и нижним колонтитулом, как мы ожидаем.

56
00:04:16,790 --> 00:04:18,590
Итак, внутри ContactComponent,

57
00:04:18,590 --> 00:04:22,370
у нас есть название Контакты

58
00:04:22,370 --> 00:04:26,390
там, а затем некоторая информация о местоположении, где я отобрал адрес.

59
00:04:26,390 --> 00:04:28,490
Итак, это похоже на адрес, который мы

60
00:04:28,490 --> 00:04:30,740
имеем в нижнем колонтитуле, поэтому я не собираюсь объяснять, что в

61
00:04:30,740 --> 00:04:36,050
подробно то у нас есть другая часть здесь, где мы включаем карту нашего местоположения.

62
00:04:36,050 --> 00:04:37,490
Мы не собираемся делать это на данный момент,

63
00:04:37,490 --> 00:04:41,990
мы собираемся просто оставить его пустым, а затем также вы видите, что у меня есть

64
00:04:41,990 --> 00:04:48,150
три кнопки, которые я включил здесь для вызова, Skype и электронной почты.

65
00:04:48,150 --> 00:04:52,354
Эти три кнопки активируются в нашем приложении

66
00:04:52,354 --> 00:04:57,910
, и я использую кнопку с поднятым ковриком, чтобы сделать эти три кнопки.

67
00:04:57,910 --> 00:05:00,980
Таким образом, вы можете видеть, что эти кнопки выглядят иначе от

68
00:05:00,980 --> 00:05:05,080
других кнопок, которые вы включили в свое приложение там.

69
00:05:05,080 --> 00:05:10,870
Итак, это компонент поднятой кнопки из нашего углового материала там.

70
00:05:10,870 --> 00:05:14,195
Итак, увидев ContactComponent и

71
00:05:14,195 --> 00:05:17,675
тот факт, что мы можем перейти к ContactComponent.

72
00:05:17,675 --> 00:05:20,560
Теперь, из других компонентов,

73
00:05:20,560 --> 00:05:22,730
давайте быстро посмотрим на

74
00:05:22,730 --> 00:05:29,250
код HTML, который мы включили для шаблона для нашего ContactComponent.

75
00:05:29,250 --> 00:05:33,335
Перейдя к contactcomponent.html, вы увидите, что у нас есть

76
00:05:33,335 --> 00:05:38,720
заголовок для этой страницы, включенный с помощью этого div

77
00:05:38,720 --> 00:05:42,965
здесь и второй div внутри здесь с fxFlex

78
00:05:42,965 --> 00:05:48,020
включает информацию о местоположении, а затем это внутри этой информации о местоположении,

79
00:05:48,020 --> 00:05:51,260
Я снова определяю другой div, который позволит мне

80
00:05:51,260 --> 00:05:55,480
включить несколько представлений в этот другой div здесь.

81
00:05:55,480 --> 00:05:57,290
Итак, внутри этого я определяю

82
00:05:57,290 --> 00:06:00,410
другой div с столбцом макета эффектов и строкой слоя эффектов.

83
00:06:00,410 --> 00:06:09,675
Итак, это вложенный способ определения моих представлений CSS Flex здесь.

84
00:06:09,675 --> 00:06:11,270
Итак, внутри этого снова

85
00:06:11,270 --> 00:06:14,990
я использую представление div Flex с fxFlex 50, поэтому он

86
00:06:14,990 --> 00:06:18,900
занимает половину, а затем смещение fxFlex 20 пикселей.

87
00:06:18,900 --> 00:06:26,300
Итак, этот вид CSS будет смещен вправо на 20 пикселей, поэтому у меня

88
00:06:26,300 --> 00:06:29,300
есть некоторый запас там, а затем у нас есть

89
00:06:29,300 --> 00:06:33,800
адрес, включенный здесь, а затем вниз здесь,

90
00:06:33,800 --> 00:06:36,080
вы можете видеть, что внутри другого div,

91
00:06:36,080 --> 00:06:42,690
у меня есть тег с ковриком поднятой кнопки, связанной с ним.

92
00:06:42,690 --> 00:06:45,740
Это то, что вызывает поднятые кнопки, которые у нас

93
00:06:45,740 --> 00:06:49,140
есть в нижней части страницы контакта там.

94
00:06:49,140 --> 00:06:51,050
Итак, трое из них здесь.

95
00:06:51,050 --> 00:06:52,730
Один для телефонного номера.

96
00:06:52,730 --> 00:07:00,425
Один для Skype и один для электронной почты здесь, а также обратите внимание, что я использую

97
00:07:00,425 --> 00:07:04,010
Шрифт Awesome иконки для каждого из них, а затем карту

98
00:07:04,010 --> 00:07:08,350
вашего местоположения в другом div здесь.

99
00:07:08,350 --> 00:07:13,690
Итак, оба они заключены внутри этого внешнего div, который снова заключен внутри div.

100
00:07:13,690 --> 00:07:20,555
Итак, вложенный способ определения гибких макетов для наших разных частей здесь.

101
00:07:20,555 --> 00:07:23,465
Итак, это об этом для ContactComponent.

102
00:07:23,465 --> 00:07:29,329
Теперь мы интегрировали это в наше одностраничное приложение.

103
00:07:29,329 --> 00:07:32,445
Теперь, иду в DishService.

104
00:07:32,445 --> 00:07:36,440
Теперь, в DishService вместе с методом getDishes,

105
00:07:36,440 --> 00:07:39,005
я собираюсь ввести еще два метода.

106
00:07:39,005 --> 00:07:42,350
Один метод называется getDish,

107
00:07:42,350 --> 00:07:50,950
конкретное блюдо, а затем я идентифицирую блюдо с указанным здесь идентификатором.

108
00:07:50,950 --> 00:07:52,460
Таким образом, id будет

109
00:07:52,460 --> 00:08:01,885
, и это будет указывать мне блюдо с идентификатором, соответствующим этому номеру.

110
00:08:01,885 --> 00:08:04,640
Так что это будет еще один метод, который я собираюсь добавить

111
00:08:04,640 --> 00:08:09,870
в, а также добавить в другой метод под названием getFeaturedDish.

112
00:08:13,750 --> 00:08:17,495
Таким образом, это блюдо будет использовать

113
00:08:17,495 --> 00:08:22,460
признанное свойство, которое мы добавили

114
00:08:22,460 --> 00:08:27,995
, а затем вернуть блюдо, для которого функция установлена в true.

115
00:08:27,995 --> 00:08:33,330
Таким образом, вы можете выбрать одно конкретное блюдо, а затем сделать его доступным.

116
00:08:33,330 --> 00:08:37,970
Теперь причина, по которой у меня есть этот флаг, заключается в том, что когда функция установлена в true,

117
00:08:37,970 --> 00:08:41,680
это конкретное блюдо будет отображаться на HomeComponent.

118
00:08:41,680 --> 00:08:44,455
Теперь, как мы выбираем эти блюда?

119
00:08:44,455 --> 00:08:47,185
Итак, давайте добавим код для этого.

120
00:08:47,185 --> 00:08:49,050
Итак, для getDish,

121
00:08:49,050 --> 00:08:57,650
мне нужно вернуть что-то из блюд постоянной, что у меня уже есть.

122
00:08:57,650 --> 00:08:59,600
Итак, из константы посуды

123
00:08:59,600 --> 00:09:05,525
я собираюсь использовать способ JavaScript для фильтрации массива.

124
00:09:05,525 --> 00:09:09,470
Итак, фильтрация массива поможет мне выбрать

125
00:09:09,470 --> 00:09:13,565
из массива только те элементы, которые

126
00:09:13,565 --> 00:09:16,985
соответствуют определенным критериям, которые будут указаны

127
00:09:16,985 --> 00:09:21,530
внутри фильтра здесь, а затем среди них я верну только первый.

128
00:09:21,530 --> 00:09:25,050
Теперь так бывает, что когда я указываю идентификатор,

129
00:09:25,050 --> 00:09:28,960
он будет выбирать только один элемент, но затем он станет массивом.

130
00:09:28,960 --> 00:09:33,150
Итак, из этого массива мне нужно извлечь этот один элемент в этом массиве.

131
00:09:33,150 --> 00:09:37,320
Итак, вот почему я использую нулевые скобки.

132
00:09:37,320 --> 00:09:41,010
Так что, это поможет мне идентифицировать.

133
00:09:41,010 --> 00:09:43,005
Итак, как я могу фильтровать свою посуду?

134
00:09:43,005 --> 00:09:47,140
Итак, для каждого блюда в моем списке блюд

135
00:09:47,140 --> 00:09:49,729
так что это то, где я собираюсь использовать

136
00:09:49,729 --> 00:09:55,610
еще одну особенность машинописного текста, называемую функциями стрелок.

137
00:09:55,610 --> 00:10:01,575
Функция стрелки является сокращенным способом написания функции.

138
00:10:01,575 --> 00:10:04,090
Итак, если вы привыкли писать функции,

139
00:10:04,090 --> 00:10:06,100
вместо написания функции детально говоря функцию

140
00:10:06,100 --> 00:10:09,850
, а затем в скобках блюдо и так далее,

141
00:10:09,850 --> 00:10:13,900
я могу просто написать ее в случаях, когда функция очень проста,

142
00:10:13,900 --> 00:10:17,195
очень очень легко написать это как функцию стрелки здесь.

143
00:10:17,195 --> 00:10:27,305
Итак, здесь я укажу, что идентификатор блюда равен идентификатору.

144
00:10:27,305 --> 00:10:33,245
Итак, то, что я указываю здесь, это фильтровать массив посуды и извлечь

145
00:10:33,245 --> 00:10:40,360
только те элементы из массива, для которых идентификатор блюда.

146
00:10:40,360 --> 00:10:44,570
Таким образом, каждый элемент здесь идентифицируется этим параметром блюдо здесь.

147
00:10:44,570 --> 00:10:47,090
Итак, для которого идентификатор блюда соответствует

148
00:10:47,090 --> 00:10:50,360
id, который был указан в качестве параметра блюдо.

149
00:10:50,360 --> 00:10:53,810
Таким образом, вы извлекаете это конкретное блюдо из

150
00:10:53,810 --> 00:10:59,400
этого массива, а затем вернете это блюдо из этого метода getDish.

151
00:10:59,710 --> 00:11:04,240
Функции стрелок помогли мне написать код более простым способом.

152
00:11:04,240 --> 00:11:06,724
Если вам не нравятся функции стрелок

153
00:11:06,724 --> 00:11:09,710
, то вы можете написать его более традиционным способом, говоря:

154
00:11:09,710 --> 00:11:16,870
«функция блюдо», а затем из этого вы вернете dish.id тройной, равной id,

155
00:11:16,870 --> 00:11:19,005
, чтобы это вернуло логическое.

156
00:11:19,005 --> 00:11:22,960
Когда фильтр встречает истинное внутри здесь,

157
00:11:22,960 --> 00:11:27,115
эти элементы из блюд будут выбраны в массив.

158
00:11:27,115 --> 00:11:31,980
Итак, именно здесь ваши знания JavaScript приходят в вашу пользу.

159
00:11:31,980 --> 00:11:34,060
Итак, вам нужно знать, как работает фильтр JavaScript

160
00:11:34,060 --> 00:11:38,085
, чтобы помочь вам понять, как это делается.

161
00:11:38,085 --> 00:11:41,390
Хорошо, теперь аналогично для избранного блюда,

162
00:11:41,390 --> 00:11:47,365
Я собираюсь использовать аналогичный метод для извлечения из моих блюд

163
00:11:47,365 --> 00:11:51,620
массив с использованием фильтра здесь, но фильтр, который

164
00:11:51,620 --> 00:11:57,000
я собираюсь определить здесь, будет снова функция стрелки здесь.

165
00:11:58,410 --> 00:12:03,260
Вы привыкнете к функциям стрелок, а затем, как только вы привыкнете к ним,

166
00:12:03,260 --> 00:12:06,370
тогда вы поймете, насколько просто они слишком правы.

167
00:12:06,370 --> 00:12:11,380
Итак, здесь способ для выбора меня

168
00:12:11,380 --> 00:12:20,445
- это свойство dish.features, потому что это dish.feature уже логическое там.

169
00:12:20,445 --> 00:12:25,720
Итак, это поможет мне вернуть избранное блюдо.

170
00:12:25,720 --> 00:12:27,355
Итак, для того, какое блюдо,

171
00:12:27,355 --> 00:12:29,120
особенность блюда истинна.

172
00:12:29,120 --> 00:12:31,710
Это конкретное блюдо будет отфильтровано из

173
00:12:31,710 --> 00:12:35,330
массива блюд и тогда будет только один день.

174
00:12:35,330 --> 00:12:38,280
Во всяком случае, вы должны убедиться в том, что

175
00:12:38,280 --> 00:12:42,210
, чтобы вы установили только в true для одного из них,

176
00:12:42,210 --> 00:12:50,630
, а затем я использую это, потому что этот фильтр вернет суб-массив из массива посуды,

177
00:12:50,630 --> 00:12:52,300
, поэтому мне нужно выбрать этот элемент.

178
00:12:52,300 --> 00:12:55,600
Там будет один элемент с нулевым индексом.

179
00:12:55,600 --> 00:12:59,150
Итак, я использую индекс нуля, чтобы выбрать этот элемент и вернуть

180
00:12:59,150 --> 00:13:03,680
, что из метода get fething from здесь.

181
00:13:03,680 --> 00:13:09,985
Таким образом, это завершает обновление блюдо службы.

182
00:13:09,985 --> 00:13:15,140
Чтобы построить наш домашний шаблон,

183
00:13:15,140 --> 00:13:21,195
мы будем включать в домашний вид избранное блюдо,

184
00:13:21,195 --> 00:13:24,545
выбранное текущее продвижение от ресторана,

185
00:13:24,545 --> 00:13:29,785
и выбранный корпоративный лидер из списка читателей.

186
00:13:29,785 --> 00:13:34,260
Корпоративный лидер, который отображается на первой странице, будет

187
00:13:34,260 --> 00:13:38,550
частью вашего задания, которое следует за этим уроком.

188
00:13:38,550 --> 00:13:40,380
Но теперь мы будем включать,

189
00:13:40,380 --> 00:13:45,775
у нас есть избранное блюдо и избранное продвижение на первой странице.

190
00:13:45,775 --> 00:13:50,170
Итак, что означает, что мне нужна услуга продвижения, которая возвращает

191
00:13:50,170 --> 00:13:55,250
набор акций, которые проводятся этим рестораном.

192
00:13:55,250 --> 00:14:01,095
Итак, позвольте мне добавить в службу промо-акций для моего приложения.

193
00:14:01,095 --> 00:14:04,005
Итак, для этого в общей папке

194
00:14:04,005 --> 00:14:12,140
я собираюсь создать новый файл под названием promotion.ts.

195
00:14:12,560 --> 00:14:18,410
В promotion.ts я создаю класс,

196
00:14:18,870 --> 00:14:29,125
класс продвижения и вернул эту акцию здесь.

197
00:14:29,125 --> 00:14:32,460
Итак, что содержит этот промо-класс?

198
00:14:32,460 --> 00:14:36,529
Он содержит идентификатор свойства,

199
00:14:36,529 --> 00:14:43,010
затем он содержит название для продвижения ресторана.

200
00:14:43,010 --> 00:14:47,310
Так, например, акция может быть как буфет на выходные.

201
00:14:47,310 --> 00:14:52,320
или 10% от каждого дня в обеденное время

202
00:14:52,320 --> 00:14:57,845
и такие вещи могут быть представлены на первой странице ваших ресторанов.

203
00:14:57,845 --> 00:15:01,280
Итак, имя, то я также буду включать изображение,

204
00:15:01,280 --> 00:15:05,635
, которое должно быть строки типа URL изображения,

205
00:15:05,635 --> 00:15:10,625
затем метка, которая будет строкой.

206
00:15:10,625 --> 00:15:13,895
Цена также строка.

207
00:15:13,895 --> 00:15:15,330
Теперь, труд подразумевает,

208
00:15:15,330 --> 00:15:17,260
вы не видите, что я использую их в данный момент,

209
00:15:17,260 --> 00:15:25,780
мы принесем их в использование в одном из последующих упражнений, описанных Boolean.

210
00:15:25,780 --> 00:15:29,965
Итак, вы видите флаг, который снова появляется в акции,

211
00:15:29,965 --> 00:15:34,960
, а затем строка описания.

212
00:15:34,960 --> 00:15:38,380
Итак, вы видите, что продвижение структурировано в значительной степени

213
00:15:38,380 --> 00:15:42,840
похоже на структуру блюда, которую мы видели ранее.

214
00:15:42,840 --> 00:15:46,010
Итак, это класс повышения.

215
00:15:46,010 --> 00:15:48,090
Теперь, наряду с классом продвижения

216
00:15:48,090 --> 00:15:50,980
мне нужно создать еще один класс, который

217
00:15:50,980 --> 00:16:00,615
экспортирует набор продвижения говорят постоянные с акциями здесь.

218
00:16:00,615 --> 00:16:04,240
Так вот, я собираюсь импортировать

219
00:16:06,920 --> 00:16:11,024
класс продвижения

220
00:16:11,024 --> 00:16:18,400
из файла promotion.ts,

221
00:16:18,400 --> 00:16:25,290
, а затем я бы экспортировать константу под названием продвижение.

222
00:16:25,290 --> 00:16:32,395
Итак, вы видите, что я использую структуру, очень похожую на блюда здесь.

223
00:16:32,395 --> 00:16:36,290
Итак, вы начинаете видеть, что,

224
00:16:36,660 --> 00:16:40,790
, что структура, которую мы использовали ранее для

225
00:16:40,790 --> 00:16:46,465
акции для блюд также полезна для декларирования акций.

226
00:16:46,465 --> 00:16:47,910
Если у вас другая структура,

227
00:16:47,910 --> 00:16:50,990
вы увидите, что с лидерами структура будет немного

228
00:16:50,990 --> 00:16:55,315
отличается для объекта JavaScript здесь. Акции.

229
00:16:55,315 --> 00:17:00,160
Теперь, детали конкретной акции я дал его в инструкции,

230
00:17:00,160 --> 00:17:02,790
, поэтому я бы предложил, чтобы вы скопировали и вставили его из

231
00:17:02,790 --> 00:17:05,550
там вместо того, чтобы я набирал все это здесь.

232
00:17:05,550 --> 00:17:07,390
Итак, позвольте мне идти вперед и скопировать и вставить

233
00:17:07,390 --> 00:17:11,800
, что объект JavaScript в этот массив объектов JavaScript здесь,

234
00:17:11,800 --> 00:17:13,510
так что вы идете.

235
00:17:13,510 --> 00:17:20,475
Акция имеет всего один объект на данный момент.

236
00:17:20,475 --> 00:17:22,715
В будущем мы можем добавить больше.

237
00:17:22,715 --> 00:17:26,375
На данный момент у меня есть только один, поэтому я только что добавил его там,

238
00:17:26,375 --> 00:17:31,265
, и я собираюсь использовать это, и это лучшее продвижение для моего ресторана там.

239
00:17:31,265 --> 00:17:33,045
Это просто продвижение,

240
00:17:33,045 --> 00:17:35,820
так что позвольте мне обновить, что акции,

241
00:17:35,820 --> 00:17:37,465
это то, что мне нужно.

242
00:17:37,465 --> 00:17:42,120
Итак, я просто собираюсь сохранить изменения в файле promotion.ts.

243
00:17:42,120 --> 00:17:46,820
Далее я создаю еще один сервис под названием «сервис продвижения».

244
00:17:46,820 --> 00:17:53,285
Итак, чтобы сделать это, давайте перейдем в командную строку в командной строке типа

245
00:17:53,285 --> 00:18:02,005
ng генерировать опросы услуг/продвижение.

246
00:18:02,005 --> 00:18:05,105
Итак, там создается служба продвижения.

247
00:18:05,105 --> 00:18:08,500
Итак, теперь PromotionService работает на месте.

248
00:18:08,500 --> 00:18:13,575
Итак, давайте добавим функции для PromotionService.

249
00:18:13,575 --> 00:18:18,070
Итак, перейдя в PromotionService,

250
00:18:18,070 --> 00:18:25,690
вы видите, что PromotionService теперь включен в вашу папку услуг здесь,

251
00:18:25,690 --> 00:18:28,615
, поэтому нам нужно подготовить PromotionService.

252
00:18:28,615 --> 00:18:30,715
Итак, в PromotionService,

253
00:18:30,715 --> 00:18:33,170
я собираюсь импортировать

254
00:18:37,170 --> 00:18:48,355
продвижение из акции/продвижения,

255
00:18:48,355 --> 00:18:55,010
класс продвижения, а также импортировать

256
00:18:57,000 --> 00:19:09,985
акции из класса акции/акции там.

257
00:19:09,985 --> 00:19:11,885
Постоянные акции оттуда.

258
00:19:11,885 --> 00:19:14,590
Теперь, как и для обслуживания блюд,

259
00:19:14,590 --> 00:19:19,840
нам нужно создать три метода внутри PromotionsService.

260
00:19:19,840 --> 00:19:25,080
Итак, то, что я собираюсь сделать, это спасти себя от неприятностей,

261
00:19:25,080 --> 00:19:27,450
я пойду в dish.service,

262
00:19:27,450 --> 00:19:29,750
, а затем просто скопировать эти три,

263
00:19:29,750 --> 00:19:33,445
, а затем вставить его в мою службу продвижения,

264
00:19:33,445 --> 00:19:35,570
затем просто отредактируйте код.

265
00:19:35,570 --> 00:19:38,965
Хорошо, так что из службы продвижения,

266
00:19:38,965 --> 00:19:46,505
мне нужно вернуть getPromotions и

267
00:19:46,505 --> 00:19:54,340
это тип продвижения, а затем это будет возвращать ПРОМОЦИИ,

268
00:19:54,340 --> 00:20:00,670
, а затем получить второй будет продвижение

269
00:20:00,670 --> 00:20:08,505
, который снова получает идентификатор акции,

270
00:20:08,505 --> 00:20:10,615
так что я собираюсь вернуть

271
00:20:10,615 --> 00:20:20,830
АКЦИИ.filter promo.id является id.

272
00:20:20,830 --> 00:20:26,780
Затем getFeatured продвижение.

273
00:20:26,780 --> 00:20:31,860
Итак, вы можете видеть, что структура Promotionservice очень похожа на

274
00:20:31,860 --> 00:20:39,920
блюдо, и это не будет тип продвижения,

275
00:20:39,920 --> 00:20:41,875
и это вернет

276
00:20:41,875 --> 00:20:52,145
PROMOTIONS.filter промо, и это будет promo.features и это все.

277
00:20:52,145 --> 00:20:55,030
Мой PromotionService готов.

278
00:20:55,030 --> 00:20:59,695
Теперь я собираюсь перейти в домашний компонент, и подготовить это,

279
00:20:59,695 --> 00:21:02,115
так, чтобы в моем домашнем компоненте,

280
00:21:02,115 --> 00:21:07,560
я покажу любимое блюдо и избранное продвижение.

281
00:21:07,560 --> 00:21:10,820
Особенность/блюдо и функция/продвижение будут отображаться в

282
00:21:10,820 --> 00:21:15,690
компонента дома с использованием компонента угловой карты материала.

283
00:21:15,690 --> 00:21:19,675
Итак, нам нужно сначала получить данные в наш домашний компонент,

284
00:21:19,675 --> 00:21:24,690
, так что это то, что мы будем делать в файле сценария типа домашних компонентов там.

285
00:21:24,690 --> 00:21:29,630
Итак, перейдя в файл сценария типа домашних компонентов, home component.ts.

286
00:21:29,630 --> 00:21:44,330
Здесь мне нужно импортировать блюдо

287
00:21:44,330 --> 00:21:52,060
из shared/блюдо, а также

288
00:21:52,060 --> 00:22:07,430
соответствующее блюдо.service из сервисов/dish.service.

289
00:22:12,330 --> 00:22:17,495
Хорошо, теперь я собираюсь сделать то же самое для рекламных акций,

290
00:22:17,495 --> 00:22:21,465
так что я просто собираюсь скопировать это и вставить его здесь,

291
00:22:21,465 --> 00:22:23,120
, а затем отредактировать это,

292
00:22:23,120 --> 00:22:26,735
так это будет продвижение,

293
00:22:26,735 --> 00:22:31,315
это будет PromotionService,

294
00:22:31,315 --> 00:22:42,350
, а затем продвижение, и тогда это будет PromotionService.

295
00:22:42,790 --> 00:22:46,800
Таким образом, с этим, у нас есть как блюдо и

296
00:22:46,800 --> 00:22:50,205
блюдо услуги и продвижение услуги доступны для нас,

297
00:22:50,205 --> 00:22:52,485
в рамках нашего домашнего компонента.

298
00:22:52,485 --> 00:22:54,660
Иду сейчас к конструктору,

299
00:22:54,660 --> 00:23:01,180
Давайте теперь ввести две услуги здесь,

300
00:23:02,280 --> 00:23:12,590
и сделать их доступными для наших приложений или блюдо службы,

301
00:23:25,490 --> 00:23:30,240
и службы продвижения, введенной здесь.

302
00:23:30,240 --> 00:23:34,610
Итак, с этим у нас есть доступ к обеим услугам.

303
00:23:34,610 --> 00:23:38,650
Итак, теперь в рамках метода ngOnInit,

304
00:23:38,650 --> 00:23:43,779
я собираюсь получить две популярные блюда.

305
00:23:43,779 --> 00:23:51,770
Итак, я бы сказал это.dishService.getFeaturedDish

306
00:23:51,770 --> 00:23:59,520
, а также продвижение,

307
00:24:03,690 --> 00:24:11,510
promotionService и getFeaturedPromotion.

308
00:24:14,400 --> 00:24:18,820
Просто чтобы быть полным,

309
00:24:18,820 --> 00:24:23,185
позвольте мне объявить блюдо здесь как

310
00:24:23,185 --> 00:24:32,025
типа Блюдо и продвижение как типа Продвижение здесь.

311
00:24:32,025 --> 00:24:38,830
Таким образом, это должно прояснить все значения, которые мы используем здесь.

312
00:24:38,830 --> 00:24:46,665
Таким образом, с этим мы завершим обновление нашего файла машинописного кода домашних компонентов.

313
00:24:46,665 --> 00:24:49,710
Давайте теперь переключимся на файл шаблона

314
00:24:49,710 --> 00:24:55,815
, а затем добавим в две карты, чтобы отобразить избранное блюдо и избранное продвижение.

315
00:24:55,815 --> 00:25:00,310
Теперь, для этого, я дал вам код в инструкции.

316
00:25:00,310 --> 00:25:02,995
Итак, я просто скопирую этот код и вставлю его сюда.

317
00:25:02,995 --> 00:25:05,640
Вы уже знаете, как создавать карты,

318
00:25:05,640 --> 00:25:10,590
, чтобы вы могли легко следовать код, который я вставляю здесь.

319
00:25:10,590 --> 00:25:17,095
Итак, шаблон домашних компонентов также обновляется,

320
00:25:17,095 --> 00:25:20,830
, так что вы можете видеть, что здесь есть две карты.

321
00:25:20,830 --> 00:25:26,550
Для одного, отображение блюдо, а другой, отображающий продвижение здесь,

322
00:25:26,550 --> 00:25:33,030
и заключенный внутри fxLayout div здесь.

323
00:25:33,030 --> 00:25:38,175
Итак, давайте сохраним изменения, а затем быстро посмотрим на наше приложение.

324
00:25:38,175 --> 00:25:41,095
После создания сервиса продвижения

325
00:25:41,095 --> 00:25:45,470
мы также должны включить услугу продвижения в AppModule,

326
00:25:45,470 --> 00:25:47,750
и сделать его доступным для нашего приложения.

327
00:25:47,750 --> 00:25:49,840
Итак, я собираюсь зайти сюда,

328
00:25:49,840 --> 00:25:53,350
, а затем импортировать

329
00:25:53,350 --> 00:26:00,950
услугу продвижения здесь.

330
00:26:03,150 --> 00:26:07,915
Затем объявил службу продвижения

331
00:26:07,915 --> 00:26:16,030
как один из провайдеров

332
00:26:16,030 --> 00:26:19,720
в моем файле AppModule.ts здесь.

333
00:26:19,720 --> 00:26:21,580
Итак, в файле AppModule

334
00:26:21,580 --> 00:26:23,415
я требую обоих этих,

335
00:26:23,415 --> 00:26:25,480
, а затем сохранение изменений.

336
00:26:25,480 --> 00:26:27,055
Иду в браузер,

337
00:26:27,055 --> 00:26:29,455
теперь вы можете видеть, что в браузере

338
00:26:29,455 --> 00:26:34,150
домашний компонент теперь показывает две карты,

339
00:26:34,150 --> 00:26:40,580
один для избранного блюда и один для рекламной акции здесь.

340
00:26:40,580 --> 00:26:43,850
Итак, вы можете видеть, что две машины отображаются здесь.

341
00:26:43,850 --> 00:26:50,505
Теперь я могу перейти на страницу Меню,

342
00:26:50,505 --> 00:26:54,405
, а затем также на страницу Контакты.

343
00:26:54,405 --> 00:26:56,690
Страница «О программе» еще не существует,

344
00:26:56,690 --> 00:27:02,070
вы собираетесь заполнить страницу «О программе» как часть вашего второго задания.

345
00:27:02,070 --> 00:27:07,490
Взгляните на то же приложение на меньшем размере экрана

346
00:27:07,490 --> 00:27:11,200
, так что это iPhone 6 Plus экран.

347
00:27:11,200 --> 00:27:16,225
Давайте посмотрим на домашний компонент и экран iPhone 6 Plus.

348
00:27:16,225 --> 00:27:24,490
Вы можете увидеть это блюдо и рекламной акции на главной странице.

349
00:27:24,490 --> 00:27:29,820
Затем, меню, которое мы видели ранее,

350
00:27:29,820 --> 00:27:35,150
, а также страница Контакты отображается здесь.

351
00:27:35,150 --> 00:27:41,395
Итак, вы можете видеть, что теперь наше одностраничное приложение намного более настроено.

352
00:27:41,395 --> 00:27:43,120
За исключением Про,

353
00:27:43,120 --> 00:27:46,875
, который мы сделаем во втором задании.

354
00:27:46,875 --> 00:27:54,345
Еще одно незначительное изменение, которое вы можете сделать в HTML-файле компонентов заголовка,

355
00:27:54,345 --> 00:27:57,470
заключается в том, что наряду с директивой ссылки маршрутизатора,

356
00:27:57,470 --> 00:28:06,880
Угловой маршрут также поддерживает еще одну директиву под названием routeLinkActive.

357
00:28:06,880 --> 00:28:14,660
Это позволяет нам применять некоторые классы к конкретному элементу здесь.

358
00:28:14,660 --> 00:28:16,305
Итак, в этом случае

359
00:28:16,305 --> 00:28:20,090
, если эта ссылка становится активной, чем то, что я здесь указываю,

360
00:28:20,090 --> 00:28:24,980
будет применяться как класс к этому конкретному элементу там.

361
00:28:24,980 --> 00:28:28,309
Итак, я собираюсь указать класс, называемый активным.

362
00:28:28,309 --> 00:28:32,280
Итак, здесь я указываю routerLinkActive с активным.

363
00:28:32,280 --> 00:28:35,265
Итак, если я определяю класс CSS, называемый активным,

364
00:28:35,265 --> 00:28:39,300
, то класс будет применен к этой ссылке,

365
00:28:39,300 --> 00:28:46,975
всякий раз, когда этот конкретный вид отображается на странице приложений здесь.

366
00:28:46,975 --> 00:28:53,250
Я собираюсь скопировать то же самое и применить его ко всем оставшимся кнопкам,

367
00:28:53,250 --> 00:28:56,735
где я уже определил ссылку маршрутизатора.

368
00:28:56,735 --> 00:28:59,600
Итак, я собираюсь применить класс routerLinkActive,

369
00:28:59,600 --> 00:29:04,195
к Дому, Меню и Связаться с нами.

370
00:29:04,195 --> 00:29:08,535
Теперь это также означает, что я должен определить активный класс CSS.

371
00:29:08,535 --> 00:29:14,360
Итак, чтобы сделать это, я собираюсь перейти в заголовочный файл SESS компонентов,

372
00:29:14,360 --> 00:29:16,590
, а затем определить активный класс здесь,

373
00:29:16,590 --> 00:29:21,400
, поэтому я определяю активный класс прямо там.

374
00:29:21,400 --> 00:29:22,870
Чтобы определить активный класс,

375
00:29:22,870 --> 00:29:31,220
я собираюсь добавить еще одну цветовую переменную здесь, называемую background-moredark.

376
00:29:33,030 --> 00:29:39,080
Тогда соответствующий цвет 4527A0,

377
00:29:39,900 --> 00:29:47,480
это темная версия этого фона темного цвета, 4527A0.

378
00:29:47,480 --> 00:29:50,055
Тогда, для моего активного,

379
00:29:50,055 --> 00:29:52,720
то, что я собираюсь сделать, это, из активного класса,

380
00:29:52,720 --> 00:29:57,725
Я позволю классу определить фон,

381
00:29:57,725 --> 00:29:59,560
установить фон

382
00:29:59,560 --> 00:30:09,410
этого элемента на фоне более темный цвет.

383
00:30:10,170 --> 00:30:18,270
Таким образом, когда этот конкретный вид выбран и показан на странице,

384
00:30:18,270 --> 00:30:21,630
то этот активный класс будет применен к

385
00:30:21,630 --> 00:30:24,670
, что конкретный тег

386
00:30:24,670 --> 00:30:30,340
там по активной директиве маршрутизатора ссылка, которую мы применили здесь.

387
00:30:30,340 --> 00:30:34,750
Теперь, какие изменения это вызывает на нашей веб-странице.

388
00:30:34,750 --> 00:30:36,460
Теперь, перейдя на нашу веб-страницу,

389
00:30:36,460 --> 00:30:40,685
мы увидим, что это вводит на нашей веб-странице.

390
00:30:40,685 --> 00:30:43,390
Перейдя в наше приложение,

391
00:30:43,390 --> 00:30:45,360
вы теперь видите, что когда мы находимся в

392
00:30:45,360 --> 00:30:52,125
домашний вид в домашнем компоненте, который отображается здесь, его соответствующий вид.

393
00:30:52,125 --> 00:30:59,870
Затем кнопка Домой здесь имеет другой цвет фона, который применяется

394
00:30:59,870 --> 00:31:03,670
, потому что активный класс был добавлен, потому что мы

395
00:31:03,670 --> 00:31:08,150
определяем routerLinkActive для активного здесь.

396
00:31:08,150 --> 00:31:09,510
Итак, этот класс применяется.

397
00:31:09,510 --> 00:31:11,985
Аналогично, когда вы выбираете меню,

398
00:31:11,985 --> 00:31:17,205
то вы видите, что меню подсвечивается в заголовке,

399
00:31:17,205 --> 00:31:20,025
и вид меню отображается здесь,

400
00:31:20,025 --> 00:31:21,795
и аналогично для содержимого.

401
00:31:21,795 --> 00:31:29,035
Теперь, это позволяет нам увидеть с первого взгляда, на который платят конкретный вид VR,

402
00:31:29,035 --> 00:31:31,760
в нашем одностраничном приложении.

403
00:31:31,760 --> 00:31:38,145
Итак, это дополнительное небольшое предложение улучшения пользовательского интерфейса,

404
00:31:38,145 --> 00:31:42,255
, что позволяет нам увидеть некоторые интересные функции.

405
00:31:42,255 --> 00:31:46,004
Хотя, это не добавляет много функциональности приложения,

406
00:31:46,004 --> 00:31:54,370
, но просто добавить немного функции, которая будет полезным дополнением к вашему приложению.

407
00:31:54,370 --> 00:31:58,615
Итак, этим мы завершаем это упражнение.

408
00:31:58,615 --> 00:32:02,275
В этом упражнении мы работали над интеграцией

409
00:32:02,275 --> 00:32:07,495
контактного компонента в наше одностраничное приложение.

410
00:32:07,495 --> 00:32:15,800
Мы также разработали пару карт, которые мы включили в домашний компонент

411
00:32:15,800 --> 00:32:20,180
и добавили несколько новых функций в наше приложение.

412
00:32:20,180 --> 00:32:28,310
Пришло время, чтобы вы сохранили изменения в вашем репозитории Git с сообщением

413
00:32:28,310 --> 00:32:31,520
Одностраничное приложение Часть 1.