1
00:00:00,000 --> 00:00:06,150
Теперь мы перейдем к

2
00:00:06,150 --> 00:00:09,045
наше следующее упражнение, где мы создадим

3
00:00:09,045 --> 00:00:13,275
новый компонент и добавим его в наше угловое приложение.

4
00:00:13,275 --> 00:00:17,430
Затем мы будем использовать этот компонент для управления частью

5
00:00:17,430 --> 00:00:22,380
экрана, который мы разработали для нашего углового приложения.

6
00:00:22,380 --> 00:00:27,380
Экран для нашего углового приложения довольно скучный на данный момент.

7
00:00:27,380 --> 00:00:32,240
Все, что у нас есть, это панель инструментов в верхней части, а затем пустой,

8
00:00:32,240 --> 00:00:35,595
белый экран здесь, но это также дает нам идеи.

9
00:00:35,595 --> 00:00:39,560
Теперь мы можем взять дополнительный контент, а затем

10
00:00:39,560 --> 00:00:43,970
поместить его в эту часть экрана здесь. Как мы это сделаем?

11
00:00:43,970 --> 00:00:46,850
Мы можем создать новый компонент, а затем передать

12
00:00:46,850 --> 00:00:49,460
по этой части экрана этому компоненту и сказать:

13
00:00:49,460 --> 00:00:53,450
«Вы заботитесь о том, чтобы сделать все, что вы хотите, в эту часть экрана.»

14
00:00:53,450 --> 00:00:58,055
Таким образом, этот вид будет контролироваться новым компонентом.

15
00:00:58,055 --> 00:01:03,345
Как мы это сделаем? Давайте пройдем упражнение сейчас.

16
00:01:03,345 --> 00:01:06,610
Чтобы начать с упражнения,

17
00:01:06,610 --> 00:01:10,620
перейдите к инструкциям по упражнению, которые следуют этому видео.

18
00:01:10,620 --> 00:01:12,555
Затем в инструкции упражнения

19
00:01:12,555 --> 00:01:15,680
вы увидите некоторые ресурсы упражнений,

20
00:01:15,680 --> 00:01:18,290
, который является zip-файлом, доступным для вас.

21
00:01:18,290 --> 00:01:23,085
Загрузите этот zip-файл на ваш компьютер,

22
00:01:23,085 --> 00:01:28,320
, и это даст вам images.zip файлы.

23
00:01:28,320 --> 00:01:36,340
Итак, просто сохраните его как images.zip файл в папку загрузок,

24
00:01:36,340 --> 00:01:39,140
распаковать его, а затем это даст вам

25
00:01:39,140 --> 00:01:42,200
папку изображений, содержащую

26
00:01:42,200 --> 00:01:46,700
набор изображений, которые мы собираемся использовать в нашем приложении.

27
00:01:46,700 --> 00:01:51,379
Распакуйте файл images.zip, который вы только что скачали,

28
00:01:51,379 --> 00:01:56,415
и перемещайте этот файл images.zip в свой проект,

29
00:01:56,415 --> 00:01:58,130
и внутри вашего проекта,

30
00:01:58,130 --> 00:02:02,695
в папку источников и ресурсов здесь.

31
00:02:02,695 --> 00:02:08,645
Итак, снова переместите папку изображений, которую вы получаете

32
00:02:08,645 --> 00:02:15,110
распаковывая файл images.zip, а затем переместить эту папку изображений в ваше приложение,

33
00:02:15,110 --> 00:02:17,465
так, внутри вашего приложения,

34
00:02:17,465 --> 00:02:22,670
в подпапку источников и активов.

35
00:02:22,670 --> 00:02:26,975
Эти изображения, поставляемые здесь, будут

36
00:02:26,975 --> 00:02:31,690
доступны для использования в приложении Angular.

37
00:02:31,690 --> 00:02:37,310
Теперь мы собираемся использовать угловой CLI для

38
00:02:37,310 --> 00:02:43,025
автоматически генерировать компонент для нас и добавить его в наше угловое приложение.

39
00:02:43,025 --> 00:02:45,750
Итак, в терминале

40
00:02:45,750 --> 00:02:50,420
перейдите в папку, содержащую ваше угловое приложение и введите

41
00:02:50,420 --> 00:02:56,960
ng генерировать меню компонента.

42
00:02:56,960 --> 00:03:00,570
Итак, мы назовем этот компонент как MenuComponent.

43
00:03:00,570 --> 00:03:03,980
Этот MenuComponent будет содержать меню для

44
00:03:03,980 --> 00:03:08,390
ресторан, который мы готовим наше угловое приложение для.

45
00:03:08,390 --> 00:03:10,460
Таким образом, когда вы вводите это,

46
00:03:10,460 --> 00:03:11,975
это автоматически генерирует

47
00:03:11,975 --> 00:03:16,350
MenuComponent, а затем добавит его в ваше угловое приложение.

48
00:03:16,350 --> 00:03:19,970
Этот MenuComponent будет создан и добавлен в

49
00:03:19,970 --> 00:03:27,300
папку источника/приложения/меню вашего приложения.

50
00:03:27,300 --> 00:03:33,050
Таким образом, он создаст набор файлов в папке меню.

51
00:03:33,050 --> 00:03:35,550
Таким образом, вы можете видеть, что он создает файл SCSS,

52
00:03:35,550 --> 00:03:38,310
файл HTML, и файл ts,

53
00:03:38,310 --> 00:03:40,630
, а затем что-то называется файл спектральных ts.

54
00:03:40,630 --> 00:03:42,495
Мы вернемся к этому позже.

55
00:03:42,495 --> 00:03:48,140
Затем, также, он обновит ваш файл module.ts.

56
00:03:48,140 --> 00:03:52,920
Итак, давайте посмотрим, что только что произошло, когда вы

57
00:03:52,920 --> 00:03:58,415
создали этот MenuComponent и добавили его в ваше угловое приложение.

58
00:03:58,415 --> 00:04:01,040
Пойдем в редакцию.

59
00:04:01,040 --> 00:04:03,930
Приходя в наш редактор,

60
00:04:03,930 --> 00:04:05,245
вы теперь заметите, что,

61
00:04:05,245 --> 00:04:06,650
в папке приложения,

62
00:04:06,650 --> 00:04:09,380
есть новая папка называется меню там,

63
00:04:09,380 --> 00:04:16,210
и эта папка меню содержит все файлы, связанные с MenuComponent.

64
00:04:16,210 --> 00:04:22,385
Угловой интерфейс командной строки соответствует руководству по стилю Angular Standard.

65
00:04:22,385 --> 00:04:25,715
Руководство по стилю предполагает, что каждый компонент должен быть помещен

66
00:04:25,715 --> 00:04:29,765
в свою собственную папку, как видно здесь,

67
00:04:29,765 --> 00:04:34,220
, и мне очень нравится это, потому что я очень навязчиво отношусь к

68
00:04:34,220 --> 00:04:38,840
, сохраняя его чистую иерархию для моих папок приложений здесь.

69
00:04:38,840 --> 00:04:41,825
Итак, это работает очень хорошо для меня.

70
00:04:41,825 --> 00:04:44,545
Некоторые люди любят плоскую иерархию,

71
00:04:44,545 --> 00:04:46,570
но я просто путаюсь с этой частью.

72
00:04:46,570 --> 00:04:51,455
Итак, я предпочитаю хранить каждый компонент в своей собственной папке.

73
00:04:51,455 --> 00:04:53,480
Итак, это хорошо работает для меня.

74
00:04:53,480 --> 00:04:58,430
Теперь, если вы откроете файл app module.ts,

75
00:04:58,430 --> 00:05:02,390
вы заметите, что файл app module.ts был обновлен

76
00:05:02,390 --> 00:05:06,810
, включив другой импорт в файл app module.ts.

77
00:05:06,810 --> 00:05:09,435
Итак, вы видите, что вместе с AppComponent

78
00:05:09,435 --> 00:05:15,235
MenuComponent был автоматически добавлен в качестве импорта в ваш модуль приложения.

79
00:05:15,235 --> 00:05:17,570
Таким образом, это означает, что MenuComponent теперь

80
00:05:17,570 --> 00:05:20,470
доступен для вашего углового приложения.

81
00:05:20,470 --> 00:05:26,590
Также, если вы проверите свойство объявлений внутри декоратора NgModule,

82
00:05:26,590 --> 00:05:29,160
вы увидите, что в свойстве декларации

83
00:05:29,160 --> 00:05:31,465
в дополнение к AppComponent,

84
00:05:31,465 --> 00:05:34,120
у вас также есть MenuComponent.

85
00:05:34,120 --> 00:05:37,270
Вот почему я люблю Angular CLI,

86
00:05:37,270 --> 00:05:40,035
, потому что это упрощает все это работало для меня.

87
00:05:40,035 --> 00:05:41,945
Если я должен был сделать это вручную,

88
00:05:41,945 --> 00:05:48,710
мне придется вручную зайти в приложение module.ts, а затем ввести весь этот код там

89
00:05:48,710 --> 00:05:53,830
, и есть большая вероятность, что я в конечном итоге допущу ошибки там.

90
00:05:53,830 --> 00:05:57,800
Итак, мы спасаем себя много неприятностей, используя угловой интерфейс командной строки.

91
00:05:57,800 --> 00:05:59,720
Итак, вот почему я влюбился в

92
00:05:59,720 --> 00:06:04,455
Angular CLI для создания своих угловых приложений.

93
00:06:04,455 --> 00:06:07,965
Таким образом, с этим, мы настроили

94
00:06:07,965 --> 00:06:11,570
наш MenuComponent, чтобы быть доступным для нашего углового приложения.

95
00:06:11,570 --> 00:06:14,505
Теперь, где я собираюсь использовать MenuComponent?

96
00:06:14,505 --> 00:06:21,460
Я собираюсь использовать MenuComponent внутри моего шаблона AppComponents.

97
00:06:21,460 --> 00:06:25,275
Итак, я перейду к шаблону AppComponents, а затем

98
00:06:25,275 --> 00:06:29,810
включу MenuComponent здесь, в моем AppComponent.

99
00:06:29,810 --> 00:06:37,795
Таким образом, это по существу передат эту часть экрана моему MenuComponent.

100
00:06:37,795 --> 00:06:38,980
Как мы это сделаем?

101
00:06:38,980 --> 00:06:44,300
Для этого сначала мы рассмотрим файл MenuComponent.ts.

102
00:06:44,300 --> 00:06:47,425
Итак, когда вы открываете файл MenuComponent.ts,

103
00:06:47,425 --> 00:06:54,225
вы увидите, что селектор для MenuComponent был определен как меню приложения.

104
00:06:54,225 --> 00:07:02,615
Итак, это стандартное имя селектора, которое дает угловой CLI для ваших компонентов.

105
00:07:02,615 --> 00:07:04,840
Вы можете изменить это, если хотите,

106
00:07:04,840 --> 00:07:07,970
, но какой бы селектор вы ни указали здесь,

107
00:07:07,970 --> 00:07:15,670
, который сформирует теги, которые вы используете, чтобы включить его в файл шаблона.

108
00:07:15,670 --> 00:07:20,195
Итак, возвращаясь к AppComponent.html,

109
00:07:20,195 --> 00:07:23,795
сейчас, если я хочу включить файл меню здесь,

110
00:07:23,795 --> 00:07:24,930
, так что я просто скажу,

111
00:07:24,930 --> 00:07:31,775
тег меню приложения и вуаля,

112
00:07:31,775 --> 00:07:35,360
, что часть экрана теперь передается моему MenuComponent,

113
00:07:35,360 --> 00:07:40,640
и это до MenuComponent, чтобы решить, что он хочет разместить там.

114
00:07:40,640 --> 00:07:42,420
Итак, что бы ни было определено,

115
00:07:42,420 --> 00:07:49,535
шаблон MenuComponents будет размещен здесь.

116
00:07:49,535 --> 00:07:53,630
Итак, теперь все, что нам осталось, это пойти и подготовить

117
00:07:53,630 --> 00:07:58,695
наш MenuComponent, чтобы показать соответствующую информацию для нас.

118
00:07:58,695 --> 00:08:00,885
Давайте сохраним изменения

119
00:08:00,885 --> 00:08:04,825
, а затем мы перейдем на

120
00:08:04,825 --> 00:08:11,715
следующий шаг, где мы создадим меню для нашего ресторана с помощью MenuComponent.

121
00:08:11,715 --> 00:08:14,845
Прежде чем я это сделаю,

122
00:08:14,845 --> 00:08:17,625
, что я собираюсь сделать, это,

123
00:08:17,625 --> 00:08:19,830
перейдите в папку приложения здесь,

124
00:08:19,830 --> 00:08:22,090
, а затем в папке приложения,

125
00:08:22,090 --> 00:08:29,660
я собираюсь создать новую подпапку и имя, что как общая подпапка.

126
00:08:29,660 --> 00:08:34,015
Теперь, любые файлы, которые я собираюсь поделиться между различными компонентами,

127
00:08:34,015 --> 00:08:37,040
Я собираюсь поместить его в общую папку здесь.

128
00:08:37,040 --> 00:08:39,160
Теперь, внутри общей папки,

129
00:08:39,160 --> 00:08:45,895
я собираюсь создать новый файл с именем dish.ts.

130
00:08:45,895 --> 00:08:51,650
Внутри этого dish.ts я собираюсь создать класс, чтобы определить

131
00:08:51,650 --> 00:08:59,050
блюдо и сделать его доступным для остальных компонентов для использования.

132
00:08:59,050 --> 00:09:02,555
Итак, чтобы определить класс TypeScript здесь,

133
00:09:02,555 --> 00:09:04,240
я скажу экспорт,

134
00:09:04,240 --> 00:09:07,525
, поэтому я экспортирую этот класс TypeScript здесь,

135
00:09:07,525 --> 00:09:13,550
класс экспорта, а затем я назовем класс как блюдо.

136
00:09:13,550 --> 00:09:16,230
Внутри этого класса блюд

137
00:09:16,230 --> 00:09:20,175
теперь я могу определить различные свойства.

138
00:09:20,175 --> 00:09:21,550
Итак, для класса блюд

139
00:09:21,550 --> 00:09:23,050
я определяю одно свойство,

140
00:09:23,050 --> 00:09:27,425
, которое является идентификатором, который я определяю как строку.

141
00:09:27,425 --> 00:09:31,330
Теперь обратите внимание, что если вы пришли из мира JavaScript,

142
00:09:31,330 --> 00:09:35,975
в JavaScript, вам не нужно указывать тип любой переменной.

143
00:09:35,975 --> 00:09:43,380
TypeScript вносит в этот объект для вас, чтобы указать тип для каждой переменной.

144
00:09:43,380 --> 00:09:46,405
Итак, если вы укажете имя, столбец и строку,

145
00:09:46,405 --> 00:09:51,785
это означает, что переменная имени всегда будет строковым типом.

146
00:09:51,785 --> 00:09:55,595
Итак, если вы попытаетесь назначить целое число имени,

147
00:09:55,595 --> 00:09:58,400
, то компилятор TypeScript автоматически

148
00:09:58,400 --> 00:10:01,850
поймает это для вас, а затем скажет вам, что есть ошибка.

149
00:10:01,850 --> 00:10:04,855
Вот почему, используя TypeScript,

150
00:10:04,855 --> 00:10:08,155
вы можете уменьшить количество ошибок, которые вы можете вызвать.

151
00:10:08,155 --> 00:10:11,850
JavaScript традиционно не выполняет эту ошибку

152
00:10:11,850 --> 00:10:16,790
, потому что он не имеет понятия типов данных.

153
00:10:16,790 --> 00:10:22,025
Но если вы исходите из традиционного языка программирования, такого как C ++ или Java,

154
00:10:22,025 --> 00:10:24,945
вы очень знакомы с типами данных,

155
00:10:24,945 --> 00:10:28,565
примитивными типами данных и

156
00:10:28,565 --> 00:10:33,290
другими типами данных, которые уже определены в языке.

157
00:10:33,290 --> 00:10:41,315
TypeScript приносит эту функцию в JavaScript или, скорее, как часть TypeScript,

158
00:10:41,315 --> 00:10:47,865
и это позволяет вам определять переменные и присоединять типы к этим переменным,

159
00:10:47,865 --> 00:10:49,950
отсюда имя TypeScript.

160
00:10:49,950 --> 00:10:51,500
Итак, для блюда

161
00:10:51,500 --> 00:10:53,970
я собираюсь создать свойство имени.

162
00:10:53,970 --> 00:10:57,870
Затем я собираюсь создать свойство изображения,

163
00:10:57,870 --> 00:10:59,640
, которое также является строкой.

164
00:10:59,640 --> 00:11:03,710
Эта строка изображения будет строкой, которая указывает на

165
00:11:03,710 --> 00:11:08,635
URL изображения, которое я собираюсь использовать для этого конкретного блюда.

166
00:11:08,635 --> 00:11:18,230
Тогда я определяю категорию для этого блюда, а также другую строку, обозначаемую как Boolean,

167
00:11:18,230 --> 00:11:21,130
label в виде строки.

168
00:11:21,150 --> 00:11:31,810
Цена в виде строки, а затем описание в виде строки.

169
00:11:31,810 --> 00:11:37,695
Итак, это свойства, которые я связываю с классом блюд.

170
00:11:37,695 --> 00:11:43,440
Таким образом, это определит различные блюда в моем меню моего ресторана,

171
00:11:43,440 --> 00:11:48,060
и для каждого блюда мне нужно указать все эти различные свойства.

172
00:11:48,060 --> 00:11:49,325
Зачем мне это нужно?

173
00:11:49,325 --> 00:11:54,400
Это поможет мне построить меню для моего ресторана, как вы увидите довольно скоро.

174
00:11:54,400 --> 00:12:02,890
Итак, с этим мы завершаем определение моего класса там.

175
00:12:02,890 --> 00:12:06,940
Давайте сохраним изменения в файле dish.ts.

176
00:12:06,940 --> 00:12:11,300
Теперь этот файл dish.ts экспортирует класс.

177
00:12:11,300 --> 00:12:15,820
Теперь я могу импортировать этот класс в любой из

178
00:12:15,820 --> 00:12:22,485
файлов сценариев типа компонента моего приложения.

179
00:12:22,485 --> 00:12:28,550
Далее я перейду к моему файлу menu.component.ts.

180
00:12:28,550 --> 00:12:34,484
Внутри файла menu.component.ts в дополнение к импорту компонента

181
00:12:34,484 --> 00:12:38,420
я также увижу, что вы импортируете OnInit туда.

182
00:12:38,420 --> 00:12:41,885
Придем к части OnInit в одном из последующих упражнений.

183
00:12:41,885 --> 00:12:45,475
Я объясню, что это делает в последующем упражнении.

184
00:12:45,475 --> 00:12:53,820
Мы также импортируем новый класс, который мы создали под названием Dish class.

185
00:12:53,820 --> 00:12:56,160
Почему мы импортируем этот класс блюд?

186
00:12:56,160 --> 00:13:03,180
Чтобы мы могли использовать это как тип для переменной, которую я определяю здесь.

187
00:13:03,180 --> 00:13:04,850
Итак, где этот класс блюд?

188
00:13:04,850 --> 00:13:13,955
Это в../shared/dish папка.

189
00:13:13,955 --> 00:13:17,890
Итак, это в общей папке с блюдом.

190
00:13:17,890 --> 00:13:22,460
Тогда вы увидите, что мы определили компонент меню здесь.

191
00:13:22,460 --> 00:13:23,640
Итак, вы можете видеть, что он говорит

192
00:13:23,640 --> 00:13:27,950
«Экспорт компонента меню класса», а затем говорит: «Реализация на нем».

193
00:13:27,950 --> 00:13:30,630
Мы вернемся к этому чуть позже.

194
00:13:30,630 --> 00:13:37,130
Вы также видите, что есть конструктор, и есть еще один метод здесь называется ngOnit.

195
00:13:37,130 --> 00:13:40,170
Мы собираемся использовать их в некоторых из последующих упражнений.

196
00:13:40,170 --> 00:13:42,970
Итак, давайте просто оставим его там, и мы вернемся

197
00:13:42,970 --> 00:13:46,565
, чтобы понять, что это за короткое время.

198
00:13:46,565 --> 00:13:48,940
Также обратите внимание, что для этого компонента

199
00:13:48,940 --> 00:13:52,040
шаблон определяется в элементе меню точки HTML,

200
00:13:52,040 --> 00:13:56,070
и URL стиля, определенные там.

201
00:13:56,070 --> 00:14:02,170
Теперь, кроме того, в мой класс компонентов меню

202
00:14:02,170 --> 00:14:07,100
я собираюсь включить новую переменную под названием

203
00:14:07,100 --> 00:14:14,660
блюда, которая будет массивом типа блюда.

204
00:14:14,660 --> 00:14:21,540
Хорошо? Затем я просто включу набор блюд

205
00:14:21,540 --> 00:14:29,955
в мою переменную блюд, которую я определил здесь.

206
00:14:29,955 --> 00:14:35,040
Теперь, чтобы набрать все это вручную, у меня уйдёт много времени.

207
00:14:35,040 --> 00:14:39,060
Поэтому вместо этого, то, что я бы предложил вам сделать, это просто пойти и скопировать

208
00:14:39,060 --> 00:14:45,780
содержание непосредственно из инструкций, которые следуют этому видео.

209
00:14:45,780 --> 00:14:47,350
Так вот, что я собираюсь сделать.

210
00:14:47,350 --> 00:14:50,810
Тогда вернись и вставь это сюда.

211
00:14:50,810 --> 00:14:55,720
Теперь вы можете видеть, что я вырезал и наклеил информацию для

212
00:14:55,720 --> 00:15:00,120
все мои блюда из инструкции здесь.

213
00:15:00,120 --> 00:15:07,045
Итак, это завершает массив всех блюд, которые определены в моих инструкциях.

214
00:15:07,045 --> 00:15:11,035
Итак, это самый простой способ получить эту информацию.

215
00:15:11,035 --> 00:15:13,525
Так что просто вырежьте и вставьте его оттуда.

216
00:15:13,525 --> 00:15:16,800
Теперь обратите внимание, что для этого блюда

217
00:15:16,800 --> 00:15:20,885
каждый из них является объектом JavaScript здесь.

218
00:15:20,885 --> 00:15:25,240
Таким образом, это может быть сопоставлено с соответствующим классом скрипта типа.

219
00:15:25,240 --> 00:15:28,700
Итак, вы можете видеть, что каждый объект JavaScript имеет свойства там,

220
00:15:28,700 --> 00:15:35,245
, и эти свойства точно соответствуют свойствам, которые я определил для моего класса блюд.

221
00:15:35,245 --> 00:15:37,080
Итак, как только я определяю это,

222
00:15:37,080 --> 00:15:39,430
то эти блюда теперь станут массивом

223
00:15:39,430 --> 00:15:42,020
блюд, и теперь это станет доступно для

224
00:15:42,020 --> 00:15:48,420
мне использовать, когда я определяю свой HTML-шаблон для моего меню.

225
00:15:48,420 --> 00:15:59,410
Давайте сохраним изменения, которые мы сделали до сих пор, а затем мы откроем файл menu.component.html.

226
00:15:59,410 --> 00:16:02,580
Итак, мы перейдем к файлу menu.component.html.

227
00:16:02,580 --> 00:16:06,280
Вы увидите, что в файле menu.component.html,

228
00:16:06,280 --> 00:16:11,390
у вас в настоящее время есть только P с меню работает здесь.

229
00:16:11,390 --> 00:16:17,390
Итак, если вы просто вставили его туда, а затем увидели, как работает приложение,

230
00:16:17,390 --> 00:16:20,500
вы бы видели только это меню работает на экране.

231
00:16:20,500 --> 00:16:25,640
Я собираюсь заменить это своим собственным кодом шаблона здесь.

232
00:16:25,640 --> 00:16:31,230
Вот где я собираюсь воспользоваться помощью углового гибкого макета, чтобы помочь мне

233
00:16:31,230 --> 00:16:37,125
хорошо выложить мой контент на моем экране.

234
00:16:37,125 --> 00:16:38,885
Итак, чтобы начать,

235
00:16:38,885 --> 00:16:41,490
я начну с div,

236
00:16:41,490 --> 00:16:46,480
, к которому я буду применять класс, называемый контейнером.

237
00:16:46,480 --> 00:16:49,710
Я собираюсь определить класс контейнера, используя

238
00:16:49,710 --> 00:16:55,360
некоторый код CSS немного позже в этом упражнении.

239
00:16:55,360 --> 00:16:57,715
Итак, я применим контейнер класса здесь.

240
00:16:57,715 --> 00:17:04,640
Я также собираюсь определить свойство, называемое fxlayout.

241
00:17:04,640 --> 00:17:07,545
Атрибут под названием fxlayt.

242
00:17:07,545 --> 00:17:10,205
Теперь этот fxlayout является атрибутом

243
00:17:10,205 --> 00:17:15,015
, который угловой гибкий макет позволяет мне применить к div.

244
00:17:15,015 --> 00:17:20,295
Это указывает, должен ли различный контент

245
00:17:20,295 --> 00:17:25,440
, который я включаю внутри этих div, быть выложен либо горизонтально, либо вертикально.

246
00:17:25,440 --> 00:17:28,755
Итак, я собираюсь указать, что это будет столбец.

247
00:17:28,755 --> 00:17:32,675
Итак, независимо от содержимого, которое я включу в этот div,

248
00:17:32,675 --> 00:17:36,105
будет выложен вертикально один ниже другого на моем экране.

249
00:17:36,105 --> 00:17:43,855
Если вы видели сетчатый способ работы с контентом в Bootstrap,

250
00:17:43,855 --> 00:17:47,100
вы увидите, что это, по сути, говорит мне, что я собираюсь

251
00:17:47,100 --> 00:17:50,970
сложить все в один столбец.

252
00:17:50,970 --> 00:17:55,700
Не путайте этот столбец со столбцом Bootstrap из сетки Bootstrap.

253
00:17:55,700 --> 00:17:57,185
Это две разные вещи.

254
00:17:57,185 --> 00:18:01,290
Здесь атрибут fxlayt, и я указываю столбец.

255
00:18:01,290 --> 00:18:03,240
Я также могу указать это как строку

256
00:18:03,240 --> 00:18:07,470
, что означает, что контент будет выложен горизонтально.

257
00:18:07,470 --> 00:18:14,590
Теперь также, еще один атрибут, который я собираюсь указать для этого, - fxLayoutGap,

258
00:18:14,590 --> 00:18:18,705
, который я буду указывать как 10 пикселей.

259
00:18:18,705 --> 00:18:23,330
Итак, это означает, что любой контент, который я включу здесь

260
00:18:23,330 --> 00:18:27,690
, будет отделен друг от друга 10-пиксельным разрывом между каждым из них.

261
00:18:27,690 --> 00:18:33,745
Из знаний Bootstraps, вы видите, что такое отсечение.

262
00:18:33,745 --> 00:18:38,050
Это определяет разделение среза между

263
00:18:38,050 --> 00:18:42,925
двумя частями содержимого в моем шаблоне приложения.

264
00:18:42,925 --> 00:18:46,945
Итак, с этим мы закроем div здесь.

265
00:18:46,945 --> 00:18:49,080
Теперь, внутри этого div,

266
00:18:49,080 --> 00:18:57,735
я собираюсь определить фактическое содержимое, которое войдет в мой файл menu.component.html.

267
00:18:57,735 --> 00:19:04,035
Теперь здесь, я собираюсь использовать другой компонент, который

268
00:19:04,035 --> 00:19:10,745
дизайн материала предоставляет мне называется компонентом списка ковриков.

269
00:19:10,745 --> 00:19:14,470
Таким образом, этот компонент позволяет мне создать список

270
00:19:14,470 --> 00:19:19,215
элементов, которые я включаю в свой шаблон здесь.

271
00:19:19,215 --> 00:19:25,360
Итак, это компонент списка угловых материалов.

272
00:19:25,360 --> 00:19:30,980
Из Bootstrap вы замечаете, что в Bootstrap у нас был медиа-объект.

273
00:19:30,980 --> 00:19:36,430
Итак, список матов похож на медиа-объект в некотором смысле из Bootstrap.

274
00:19:36,430 --> 00:19:39,470
Теперь к этому я собираюсь применить класс

275
00:19:39,470 --> 00:19:42,095
атрибут, называемый fxFlex.

276
00:19:42,095 --> 00:19:49,990
Теперь, это означает, что все это будет рассматриваться как одна единица или одна часть контента

277
00:19:49,990 --> 00:19:58,180
, что они будут выложены моим гибким макетом здесь.

278
00:19:58,180 --> 00:20:01,100
Итак, если вы знакомы с CSS flex макетом.

279
00:20:01,100 --> 00:20:05,505
Итак, это один кусок контента, который будет выложен моим макетом CSS flex.

280
00:20:05,505 --> 00:20:09,420
Итак, примените fxFlex здесь,

281
00:20:09,420 --> 00:20:16,610
, а затем внутри здесь я собираюсь определить mat-list-item.

282
00:20:16,610 --> 00:20:18,380
Итак, это пункт списка.

283
00:20:18,380 --> 00:20:22,250
Итак, из ваших знаний HTML,

284
00:20:22,250 --> 00:20:28,090
, если тег LI, который вы используете в HTML, похож на это здесь.

285
00:20:28,090 --> 00:20:31,240
Итак, это пункт списка мг здесь.

286
00:20:31,240 --> 00:20:34,705
Итак, очевидно, внутри этого элемента списка

287
00:20:34,705 --> 00:20:39,220
вы будете определять список вещей.

288
00:20:39,220 --> 00:20:45,750
Теперь angular предоставляет некоторые структурные директивы, которые вы можете применить

289
00:20:45,750 --> 00:20:53,455
к вашим тегам здесь, что позволяет создавать ваш контент.

290
00:20:53,455 --> 00:20:58,375
Теперь я собираюсь использовать одну структурную директиву под названием ngFor.

291
00:20:58,375 --> 00:21:01,990
Посмотрим, как мы используем его в этом шаблоне.

292
00:21:01,990 --> 00:21:04,050
Затем, после этого упражнения,

293
00:21:04,050 --> 00:21:07,250
я кратко объясню вам, что такое структурные директивы и

294
00:21:07,250 --> 00:21:11,625
, какова цель они служат при определении ваших шаблонов здесь.

295
00:21:11,625 --> 00:21:15,960
Итак, внутри этого пустого элемента списка, я собираюсь сказать,

296
00:21:15,960 --> 00:21:21,480
звезда, обратите внимание на синтаксис, звезда ngFor.

297
00:21:22,470 --> 00:21:25,500
Итак, это структурная директива,

298
00:21:25,500 --> 00:21:29,585
ngFor структурная директива в угловом.

299
00:21:29,585 --> 00:21:34,690
То, что эта структурная директива ngFor позволяет вам сделать, это

300
00:21:34,690 --> 00:21:40,855
для итерации по массиву элементов.

301
00:21:40,855 --> 00:21:48,805
Помните, что мы определили блюда как массив объектов блюд в нашем коде.

302
00:21:48,805 --> 00:21:51,040
Теперь, в моем шаблоне,

303
00:21:51,040 --> 00:21:54,095
я буду иметь доступ к этому объекту посуды.

304
00:21:54,095 --> 00:21:56,945
Так что здесь, если я хочу перебирать его,

305
00:21:56,945 --> 00:21:59,160
как я указываю это, я скажу,

306
00:21:59,160 --> 00:22:04,950
«Пусть блюдо блюд».

307
00:22:04,950 --> 00:22:11,495
Вот как работает синтаксис для структурной директивы ngFor.

308
00:22:11,495 --> 00:22:14,020
Итак, пусть блюдо из блюд.

309
00:22:14,020 --> 00:22:21,805
Это означает, что блюда являются массивом предметов посуды.

310
00:22:21,805 --> 00:22:24,245
Когда мы выбираем скажем пусть блюдо блюд,

311
00:22:24,245 --> 00:22:27,130
это позволит мне получить доступ к каждому элементу

312
00:22:27,130 --> 00:22:30,460
массива, а затем он помогает мне перебирать массив.

313
00:22:30,460 --> 00:22:32,085
Это похоже на цикл for,

314
00:22:32,085 --> 00:22:36,210
, если вы знакомы с циклами программирования.

315
00:22:36,210 --> 00:22:40,630
Итак, это действует как цикл for для вас, а затем он помогает вам перебирать

316
00:22:40,630 --> 00:22:46,855
по всем элементам массива посуды здесь.

317
00:22:46,855 --> 00:22:51,050
Это блюдо становится объектом JavaScript, который позволяет мне

318
00:22:51,050 --> 00:22:55,350
получить доступ к каждому элементу этого массива.

319
00:22:55,350 --> 00:23:00,680
Теперь, из этого, мы также можем получить

320
00:23:00,680 --> 00:23:06,775
доступ к свойствам каждого отдельного объекта внутри моего массива посуды.

321
00:23:06,775 --> 00:23:13,335
Итак, я могу использовать их для определения моего шаблона здесь.

322
00:23:13,335 --> 00:23:16,120
Позвольте мне выложить шаблон, а затем мы вернемся и

323
00:23:16,120 --> 00:23:19,185
посмотрим, как эти два взаимосвязаны здесь.

324
00:23:19,185 --> 00:23:21,760
Теперь, внутри моего пустого элемента списка,

325
00:23:21,760 --> 00:23:28,480
я могу включить изображение с атрибутом как matListAvatar.

326
00:23:30,040 --> 00:23:38,625
Таким образом, это позволяет мне включить изображение, а затем с указанным здесь источником.

327
00:23:38,625 --> 00:23:44,275
Теперь интересно, посмотрите на синтаксис, который я использую здесь.

328
00:23:44,275 --> 00:23:48,380
Внутри двойных брекетов, я собираюсь сказать dish.image.

329
00:23:48,560 --> 00:23:55,985
Это означает, что это односторонняя интерполяция, о которой мы говорим.

330
00:23:55,985 --> 00:23:58,885
Здесь, когда я указываю это,

331
00:23:58,885 --> 00:24:07,635
, что это означает, что этот источник получит значение dish.image, которое определило в

332
00:24:07,635 --> 00:24:10,515
мой объект JavaScript, который я определил в

333
00:24:10,515 --> 00:24:17,050
мой класс скрипта типа там и который доступен для меня, чтобы сделать макет здесь.

334
00:24:17,050 --> 00:24:22,510
Итак, что значение dish.image будет доступно мне, а также для этого изображения,

335
00:24:22,510 --> 00:24:28,255
я буду указывать альтернативное значение как dish.name.

336
00:24:28,255 --> 00:24:33,770
Вспомните, что мое блюдо также имело свойство имени, доступное

337
00:24:33,770 --> 00:24:39,240
мне, так что определяет изображение для моего списка здесь.

338
00:24:39,240 --> 00:24:42,460
Вы скоро поймете, как выглядит этот список на

339
00:24:42,460 --> 00:24:46,010
экрана, когда мы закончим этот шаблон здесь.

340
00:24:46,010 --> 00:24:53,140
Кроме того, я собираюсь использовать h1 с тегом matLine.

341
00:24:53,140 --> 00:24:56,500
Опять же, это использование

342
00:24:56,500 --> 00:25:04,900
компонента углового материала списка для определения моего шаблона здесь.

343
00:25:04,900 --> 00:25:12,800
Итак, я говорю h1 matLine, поэтому это помогает мне определить строку здесь, а затем внутри,

344
00:25:12,800 --> 00:25:17,170
Я собираюсь использовать двойные скобки и сказать dish.name здесь.

345
00:25:17,170 --> 00:25:24,930
Итак, это позволяет мне получить значение названия блюда там.

346
00:25:24,930 --> 00:25:33,140
Итак, это определяет одну строку, а затем в следующей строке я собираюсь сказать p matLine.

347
00:25:33,140 --> 00:25:36,370
Итак, я собираюсь использовать p тег здесь, а затем закрыть

348
00:25:36,370 --> 00:25:39,655
с тега p, а затем внутри p тега,

349
00:25:39,655 --> 00:25:48,000
Я собираюсь использовать диапазон для определения dish.description.

350
00:25:48,000 --> 00:25:52,025
Итак, если вы знакомы с объектами JavaScript,

351
00:25:52,025 --> 00:25:56,180
вы теперь видите, как я обращаюсь к свойствам

352
00:25:56,180 --> 00:26:02,030
моего объекта JavaScript здесь, dish.description здесь.

353
00:26:02,030 --> 00:26:06,595
Для примечания, запуск через это еще раз

354
00:26:06,595 --> 00:26:13,630
атрибут ngFor позволяет мне перебирать массив объектов здесь.

355
00:26:13,630 --> 00:26:17,700
Итак, блюда здесь представляет собой массив предметов посуды.

356
00:26:17,700 --> 00:26:20,865
Итак, когда я говорю пусть блюдо блюд,

357
00:26:20,865 --> 00:26:28,070
это блюдо даст мне доступ к каждому элементу

358
00:26:28,070 --> 00:26:32,170
мой массив блюд, и я перебираю каждый элемент массива

359
00:26:32,170 --> 00:26:36,525
, а затем я буду создавать этот контент для каждого из них.

360
00:26:36,525 --> 00:26:39,205
Итак, этот пустой элемент списка,

361
00:26:39,205 --> 00:26:43,500
по существу действует как цикл for от

362
00:26:43,500 --> 00:26:47,830
вашего традиционного компьютерного языка, а затем он перебирает

363
00:26:47,830 --> 00:26:52,890
список блюд, а затем выкладывает каждый из них на моем экране.

364
00:26:52,890 --> 00:26:54,895
Итак, с этим изменением

365
00:26:54,895 --> 00:27:00,145
давайте сохраним файл компонента меню.

366
00:27:00,145 --> 00:27:06,800
Далее мы переходим к app.module.ts и нам нужно импортировать модуль matList в это.

367
00:27:06,800 --> 00:27:11,840
Итак, мы говорим, импортировать MatListModule

368
00:27:11,840 --> 00:27:20,380
из угловой/материал/list.Once мы импортировали это там,

369
00:27:20,380 --> 00:27:25,390
то мы идем вниз, а затем обновляем импорт в

370
00:27:25,390 --> 00:27:30,320
Ng модуль декоратор и добавить в

371
00:27:30,320 --> 00:27:36,435
модуль matList к списку импорта там.

372
00:27:36,435 --> 00:27:42,430
Это мое приложение module.ts теперь обновляется, а затем также

373
00:27:42,430 --> 00:27:47,770
Я собираюсь перейти к файлу styles.scss, а затем добавить

374
00:27:47,770 --> 00:27:53,575
в класс контейнера здесь.

375
00:27:53,575 --> 00:27:55,890
Что определяет класс контейнера здесь?

376
00:27:55,890 --> 00:28:00,995
Класс контейнера имеет поле 20 пикселей

377
00:28:00,995 --> 00:28:07,830
и отображает гибкий и сохраняет изменения.

378
00:28:07,830 --> 00:28:12,210
Теперь пойдем и посмотрим на нашу веб-страницу.

379
00:28:12,210 --> 00:28:14,180
Перейти на нашу веб-страницу.

380
00:28:14,180 --> 00:28:15,885
Вуаля. Вот ты идешь.

381
00:28:15,885 --> 00:28:22,250
Меню для нашего ресторана показано во всем своем великолепии на экране.

382
00:28:22,250 --> 00:28:25,365
Вы видите, как было создано это меню.

383
00:28:25,365 --> 00:28:30,455
Посмотрите на массив объектов JavaScript, который вы видели.

384
00:28:30,455 --> 00:28:35,250
Посмотрите, как было использовано каждое из свойств массива объектов JavaScript и

385
00:28:35,250 --> 00:28:40,490
сопоставлено с четырьмя элементами в моем списке.

386
00:28:40,490 --> 00:28:44,170
Посмотрите, как соответствующие изображения были включены здесь

387
00:28:44,170 --> 00:28:48,430
с помощью matListAvatar здесь.

388
00:28:48,430 --> 00:28:55,150
Таким образом, это создает круглые изображения здесь, а затем обратите внимание, как имя

389
00:28:55,150 --> 00:29:03,155
блюдо отображается здесь, а затем описание блюда, включенного здесь.

390
00:29:03,155 --> 00:29:09,010
Замечательно. Теперь у нас есть меню для нашего ресторана на

391
00:29:09,010 --> 00:29:14,925
экран, используя компонент меню в Angular.

392
00:29:14,925 --> 00:29:17,625
Это завершает это упражнение.

393
00:29:17,625 --> 00:29:21,860
В этом упражнении мы научились создавать новый компонент.

394
00:29:21,860 --> 00:29:25,165
добавить его в наше угловое приложение,

395
00:29:25,165 --> 00:29:28,270
как включить этот компонент в шаблон

396
00:29:28,270 --> 00:29:32,365
другой компонент, чтобы создать иерархию компонентов.

397
00:29:32,365 --> 00:29:39,255
Затем мы увидели, как мы можем использовать угловой гибкий макет, а также

398
00:29:39,255 --> 00:29:42,700
компоненты дизайна материала для разработки

399
00:29:42,700 --> 00:29:47,560
шаблон для нашего компонента меню для отображения содержимого здесь.

400
00:29:47,560 --> 00:29:52,710
Теперь, если ты спросишь меня, как я помню все эти вещи.

401
00:29:52,710 --> 00:29:54,535
Ну, если честно,

402
00:29:54,535 --> 00:29:59,435
вы не можете вспомнить все, но нужно понимать подход.

403
00:29:59,435 --> 00:30:03,035
Это важнее, чем пытаться запомнить любую из этих вещей.

404
00:30:03,035 --> 00:30:06,735
Теперь, если вы спросите меня, где я могу получить информацию о

405
00:30:06,735 --> 00:30:12,740
компоненте списка из углового материала.

406
00:30:12,740 --> 00:30:16,560
Мы можем отсортировать документацию углового материала и там у вас

407
00:30:16,560 --> 00:30:21,005
будет подробная информация о том, как должен быть подготовлен компонент списка.

408
00:30:21,005 --> 00:30:29,405
Теперь, где мы получаем подробности о том, как мы разрабатываем компонент в угловом?

409
00:30:29,405 --> 00:30:33,240
Мы только что изучили немного этого, а затем в этом упражнении

410
00:30:33,240 --> 00:30:41,080
мы узнали, как создать новый компонент, а затем применить его в нашем угловом приложении.

411
00:30:41,080 --> 00:30:44,790
Итак, это хороший момент для вас, чтобы сделать

412
00:30:44,790 --> 00:30:48,905
получить комментарий с компонентами сообщения первой части.

413
00:30:48,905 --> 00:30:50,540
В следующем упражнении

414
00:30:50,540 --> 00:30:54,895
мы собираемся улучшить это немного больше, используя другой вид

415
00:30:54,895 --> 00:31:00,920
углового материала компонента для выкладки содержимого на моем экране.