1
00:00:03,950 --> 00:00:06,915
В предыдущем упражнении

2
00:00:06,915 --> 00:00:12,510
мы вышили наше первое базовое приложение Angular.

3
00:00:12,510 --> 00:00:16,430
Как я уже упоминал, мы будем работать над этим Angular приложением и развивать

4
00:00:16,430 --> 00:00:20,350
его дальше в течение остальной части этого курса.

5
00:00:20,350 --> 00:00:24,230
Теперь, прежде чем мы начнем работать над нашим угловым приложением,

6
00:00:24,230 --> 00:00:29,509
давайте настроим наше угловое приложение, чтобы использовать несколько дополнительных модулей,

7
00:00:29,509 --> 00:00:34,035
, которые позволяют нам разрабатывать шаблоны для нашего углового приложения.

8
00:00:34,035 --> 00:00:40,810
Мы будем использовать модуль Angular Material для проектирования макетов пользовательского интерфейса.

9
00:00:40,810 --> 00:00:47,420
Модуль Angular Material предоставляет нам ряд интересных компонентов компоновки

10
00:00:47,420 --> 00:00:54,500
, которые мы можем использовать при разработке наших шаблонов угловых компонентов.

11
00:00:54,500 --> 00:01:01,915
Кроме того, мы будем использовать гибкий макет, который основан на CSS flex макет,

12
00:01:01,915 --> 00:01:08,015
, который позволяет нам делать отзывчивый дизайн в нашем угловом приложении.

13
00:01:08,015 --> 00:01:09,520
Итак, в этом упражнении

14
00:01:09,520 --> 00:01:11,330
мы собираемся сделать эти конфигурации.

15
00:01:11,330 --> 00:01:17,460
По пути мы узнаем наше первое краткое знание компонентов,

16
00:01:17,460 --> 00:01:23,980
еще до того, как мы перейдем к более подробному изучению компонентов в следующем уроке.

17
00:01:23,980 --> 00:01:31,810
Для начала, давайте начнем наше путешествие с быстрого посещения файла app.component.ts.

18
00:01:31,810 --> 00:01:33,769
Это файл, который поддерживает

19
00:01:33,769 --> 00:01:38,390
корневой компонент, который является частью нашего углового приложения.

20
00:01:38,390 --> 00:01:40,765
Теперь, взглядывая на этот корневой компонент,

21
00:01:40,765 --> 00:01:45,090
есть несколько вещей, которые станут вам очень понятны даже без особых объяснений.

22
00:01:45,090 --> 00:01:49,715
Первое, на что я хотел бы обратить ваше внимание, это заявление об импорте.

23
00:01:49,715 --> 00:01:56,300
Как вы можете видеть, это импорт класса компонентов из библиотеки Angular Core.

24
00:01:56,300 --> 00:02:01,185
Затем мы готовим наш класс AppComponent здесь,

25
00:02:01,185 --> 00:02:03,280
и экспортируем этот класс.

26
00:02:03,280 --> 00:02:07,160
Итак, в этом классе AppComponent, который мы объявили,

27
00:02:07,160 --> 00:02:12,080
у нас есть переменная, которую мы объявили здесь, называется title,

28
00:02:12,080 --> 00:02:15,330
, который в настоящее время назначен быть строкой.

29
00:02:15,330 --> 00:02:17,910
Теперь, быстро взглянув на эту переменную,

30
00:02:17,910 --> 00:02:20,360
вы сразу начинаете задаваться вопросом,

31
00:02:20,360 --> 00:02:24,740
, как это связано с тем, что мы видели в браузере,

32
00:02:24,740 --> 00:02:29,585
когда вы увидели наше угловое приложение показывается в браузере,

33
00:02:29,585 --> 00:02:33,740
Angular приложение отображало именно эти слова в браузере.

34
00:02:33,740 --> 00:02:38,630
Действительно, эта переменная играет важную роль в

35
00:02:38,630 --> 00:02:44,250
придумывая мнение, которое вы видели в нашем браузере.

36
00:02:44,250 --> 00:02:46,730
Теперь, кроме того, вы также видите, что

37
00:02:46,730 --> 00:02:53,790
этот класс компонента добавляется с декоратором здесь.

38
00:02:53,790 --> 00:02:58,395
Так что опять же, это еще один декоратор, с которым вы столкнетесь в Angular.

39
00:02:58,395 --> 00:03:01,590
Итак, это, как мы видим, компонентный декоратор.

40
00:03:01,590 --> 00:03:08,240
Декоратор компонентов внутри принимает объект JavaScript в качестве параметра здесь,

41
00:03:08,240 --> 00:03:14,700
и первое свойство, которое вы видите здесь, называется selector: app-root.

42
00:03:14,700 --> 00:03:19,100
Теперь, если вы помните, когда мы смотрели на файл index.HTML,

43
00:03:19,100 --> 00:03:23,275
мы увидели, что мы включили элемент там под названием app-root.

44
00:03:23,275 --> 00:03:26,865
Теперь вы начинаете видеть, откуда взялся этот корень приложения.

45
00:03:26,865 --> 00:03:31,250
Итак, это селектор для компонента, который мы объявляем здесь,

46
00:03:31,250 --> 00:03:36,020
который является то, что используется в нашем классе шаблонов, чтобы указать, где

47
00:03:36,020 --> 00:03:41,960
представление, соответствующее этому компоненту, должно быть отображено в браузере.

48
00:03:41,960 --> 00:03:47,845
Второе свойство, которое вы определяете здесь, является templateUrl.

49
00:03:47,845 --> 00:03:50,890
Это указывает на файл,

50
00:03:50,890 --> 00:03:53,030
файл HTML, как вы можете видеть,

51
00:03:53,030 --> 00:03:57,945
, который содержит шаблон, соответствующий этому конкретному компоненту.

52
00:03:57,945 --> 00:04:02,335
Шаблон, который определяет представление для этого компонента.

53
00:04:02,335 --> 00:04:07,565
Третье свойство, которое вы определяете здесь, как вы можете видеть, говорит, styleUrls,

54
00:04:07,565 --> 00:04:14,450
, которое, как вы заметили здесь, назначается файлу app.component.scss.

55
00:04:14,450 --> 00:04:19,130
Таким образом, этот файл должен содержать весь код scss, который может быть

56
00:04:19,130 --> 00:04:24,310
использован для CSS стиля для нашего шаблона компонентов.

57
00:04:24,310 --> 00:04:29,260
Итак, это быстрый визит к файлу app.component.ts.

58
00:04:29,260 --> 00:04:33,365
Теперь давайте перейдем к файлу app.component.HTML,

59
00:04:33,365 --> 00:04:36,905
и быстро посмотрим на шаблон.

60
00:04:36,905 --> 00:04:40,480
Перейдите в файл app.component.HTML,

61
00:04:40,480 --> 00:04:43,635
вы видите, что этот файл app.component,

62
00:04:43,635 --> 00:04:51,384
HTML-код здесь содержит только тег h1 с чем-то здесь с двойными скобками.

63
00:04:51,384 --> 00:04:58,310
Теперь, очевидно, это не то, что вы привыкли к вашим знаниям HTML,

64
00:04:58,310 --> 00:05:01,755
или CSS или JavaScript, которые вы видели раньше.

65
00:05:01,755 --> 00:05:04,325
Это угловой синтаксис.

66
00:05:04,325 --> 00:05:07,055
Это то, что мы называем интерполяцией.

67
00:05:07,055 --> 00:05:12,350
Это использует одностороннюю привязку данных Angular.

68
00:05:12,350 --> 00:05:16,775
В этот момент я бросаю тебе несколько терминов.

69
00:05:16,775 --> 00:05:20,690
Держите эти условия, мы вернемся, чтобы посмотреть на эти термины в

70
00:05:20,690 --> 00:05:25,185
более подробно в оставшихся уроках этого курса.

71
00:05:25,185 --> 00:05:28,140
Первое, что я упомянул, это интерполяция,

72
00:05:28,140 --> 00:05:33,290
второй, который я упомянул, является односторонней привязкой данных.

73
00:05:33,680 --> 00:05:42,200
Кроме того, вы сразу видите, что это переменная, которую вы видели в сопутствующем файле

74
00:05:42,200 --> 00:05:48,560
typeScript, который определяет код TypeScript, соответствующий компоненту App.

75
00:05:48,560 --> 00:05:51,640
Итак, как только вы укажете что-то вроде этого здесь,

76
00:05:51,640 --> 00:05:58,970
подразумевается, что независимо от значения этого заголовка будет заменено на месте

77
00:05:58,970 --> 00:06:08,170
здесь и будет использоваться как внутренний HTML-код для этого тега h1 здесь.

78
00:06:08,170 --> 00:06:11,600
Это цель включить это здесь.

79
00:06:11,600 --> 00:06:15,140
Теперь мы перейдем к установке некоторых из

80
00:06:15,140 --> 00:06:22,410
других модулей угловых отношений, которые позволят нам разрабатывать шаблоны.

81
00:06:22,410 --> 00:06:25,985
Тогда мы вернемся к этому файлу app.component.HTML.

82
00:06:25,985 --> 00:06:31,375
Затем измените дизайн этого шаблона немного позже в этом упражнении.

83
00:06:31,375 --> 00:06:38,330
Чтобы помочь нам разработать отзывчивые представления в нашем угловом приложении,

84
00:06:38,330 --> 00:06:40,340
мы собираемся воспользоваться помощью нескольких связанных с

85
00:06:40,340 --> 00:06:45,360
модулей для Angular называется модулем Angular Material.

86
00:06:45,360 --> 00:06:49,705
Модуль углового материала предоставляет нам ряд компонентов.

87
00:06:49,705 --> 00:06:53,795
Компоненты макета, которые мы можем использовать при проектировании

88
00:06:53,795 --> 00:06:59,595
наших новых шаблонов для наших угловых компонентов.

89
00:06:59,595 --> 00:07:06,290
Модуль Angular Material, если вы хотите сравнить это, похоже на то, что Bootstrap

90
00:07:06,290 --> 00:07:14,055
предоставил нам для разработки наших веб-страниц, которые мы изучили в предыдущем курсе.

91
00:07:14,055 --> 00:07:19,850
Кроме того, я буду использовать другой модуль, называемый модулем макета Angular flex.

92
00:07:19,850 --> 00:07:26,195
Модуль гибкого макета обеспечивает поддержку использования макета CSS

93
00:07:26,195 --> 00:07:33,440
flex в наших угловых шаблонах для наших угловых компонентов.

94
00:07:33,440 --> 00:07:36,620
Теперь эти два модуля должны быть явно установлены

95
00:07:36,620 --> 00:07:40,195
, а затем импортированы в наше угловое приложение,

96
00:07:40,195 --> 00:07:43,530
, это то, что мы собираемся сделать на следующем шаге.

97
00:07:43,530 --> 00:07:45,645
Но прежде чем мы идем вперед,

98
00:07:45,645 --> 00:07:48,910
один вопрос, который вам может быть интересно, это:

99
00:07:48,910 --> 00:07:58,350
почему бы не использовать Bootstrap для разработки шаблонов для нашего углового приложения?

100
00:07:58,350 --> 00:08:05,220
Действительно, вы также можете использовать Bootstrap для разработки шаблонов для нашего углового приложения.

101
00:08:05,220 --> 00:08:07,310
Но вы можете использовать только

102
00:08:07,310 --> 00:08:12,850
компоненты CSS Bootstrap в вашем угловом приложении.

103
00:08:12,850 --> 00:08:16,800
Компоненты на основе jQuery.

104
00:08:16,800 --> 00:08:21,709
Компоненты JavaScript не могут быть явно использованы, могут быть некоторые конфликты

105
00:08:21,709 --> 00:08:27,870
между компонентами на основе jQuery из Bootstrap и самим угловым кодом.

106
00:08:27,870 --> 00:08:33,800
Таким образом, лучше избегать использования компонентов JavaScript из Bootstrap

107
00:08:33,800 --> 00:08:40,925
в случае, если вы решите использовать Bootstrap как способ разработки ваших угловых шаблонов.

108
00:08:40,925 --> 00:08:42,980
Но с другой стороны,

109
00:08:42,980 --> 00:08:47,000
Я также думал, что это предоставит нам хорошую возможность обучения получить

110
00:08:47,000 --> 00:08:54,350
другую структуру макета пользовательского интерфейса, которая является основой углового материала.

111
00:08:54,350 --> 00:08:58,640
Итак, именно поэтому я решил использовать структуру углового материала

112
00:08:58,640 --> 00:09:03,745
и макет Angular flex в этом конкретном курсе.

113
00:09:03,745 --> 00:09:07,540
Теперь, когда мы проходим остаток этого курса,

114
00:09:07,540 --> 00:09:10,450
я не буду явно объяснять, как использовать

115
00:09:10,450 --> 00:09:14,980
компоненты углового материала или как использовать угловой гибкий макет.

116
00:09:14,980 --> 00:09:20,615
Вместо этого мы узнаем их, глядя на примеры.

117
00:09:20,615 --> 00:09:22,620
Мы будем использовать эти два,

118
00:09:22,620 --> 00:09:29,135
как лучшие компоненты Angular Material и поддержка Angular Flex-Layout,

119
00:09:29,135 --> 00:09:36,715
, когда мы разрабатываем наши шаблоны для наших Angular компонентов в этом конкретном курсе.

120
00:09:36,715 --> 00:09:41,495
Таким образом, в процессе использования этих компонентов,

121
00:09:41,495 --> 00:09:44,025
вы также будете по пути,

122
00:09:44,025 --> 00:09:47,650
узнать, как использовать как угловой материал, так и

123
00:09:47,650 --> 00:09:51,495
Angular Flex-Layout в вашем угловом приложении.

124
00:09:51,495 --> 00:09:54,685
Я думал, что выполняя упражнения,

125
00:09:54,685 --> 00:09:57,060
вы узнаете намного больше об угловом материале.

126
00:09:57,060 --> 00:10:01,505
Теперь, чтобы объяснить концептуальные аспекты того, почему

127
00:10:01,505 --> 00:10:07,440
Angular Material компоненты работают так же, как они работают, или как работает сетка, например

128
00:10:07,440 --> 00:10:09,915
или как работает гибкий дизайн,

129
00:10:09,915 --> 00:10:14,150
мы уже рассмотрели некоторые из них в предыдущем курсе на Bootstrap.

130
00:10:14,150 --> 00:10:17,935
Таким образом, те же концепции тоже придут на помощь.

131
00:10:17,935 --> 00:10:23,260
Вместо этого мы рассмотрим механику использования как углового материала, так и

132
00:10:23,260 --> 00:10:30,385
углового гибкого макета в нашем угловом приложении в этом конкретном курсе.

133
00:10:30,385 --> 00:10:33,005
Чтобы начать использовать угловой материал,

134
00:10:33,005 --> 00:10:37,655
, конечно, первое, что вам нужно сделать, это установить модуль Angular Material.

135
00:10:37,655 --> 00:10:46,230
Итак, в подсказке введите npm install —save @angular /material.

136
00:10:48,950 --> 00:10:51,240
Итак, как вы можете видеть,

137
00:10:51,240 --> 00:10:55,390
мы указываем все угловые связанные модули с @angular,

138
00:10:55,390 --> 00:10:58,650
, так что вы увидите также то же самое для Flex-Layout.

139
00:10:58,650 --> 00:11:03,980
Мы устанавливаем версию 6.4.7 модуля углового материала.

140
00:11:03,980 --> 00:11:09,440
Кроме того, модуль материалов требует установки CDK.

141
00:11:09,440 --> 00:11:12,730
Итак, мы также установим это, выполнив

142
00:11:12,730 --> 00:11:21,100
npm установить @angular /cdk @6 .4.7 —сохранить,

143
00:11:21,100 --> 00:11:25,035
и установить это вместе с угловым материалом.

144
00:11:25,035 --> 00:11:31,495
Таким образом, Angular Material использует угловой cdk для своих компонентов.

145
00:11:31,495 --> 00:11:35,595
Кроме того, при использовании углового материала

146
00:11:35,595 --> 00:11:43,035
вам также необходимо импортировать модуль Angular Animations в приложение Angular.

147
00:11:43,035 --> 00:11:46,445
Начиная с угловой версии 4,

148
00:11:46,445 --> 00:11:49,740
была извлечена поддержка угловой анимации

149
00:11:49,740 --> 00:11:53,695
из основных модулей в свой отдельный модуль.

150
00:11:53,695 --> 00:11:56,130
Итак, что означает, что если вам нужно

151
00:11:56,130 --> 00:11:58,900
использовать анимации в вашем Angular приложении,

152
00:11:58,900 --> 00:12:04,370
вам нужно явно установить модуль Angular Animations.

153
00:12:04,370 --> 00:12:07,275
Итак, давайте продолжим и установим это тоже.

154
00:12:07,275 --> 00:12:08,325
Итак, вы скажете

155
00:12:08,325 --> 00:12:18,940
npm install —save @angular /animations @6 .1.7.

156
00:12:20,040 --> 00:12:23,290
Кроме того, еще один модуль, который я установлю

157
00:12:23,290 --> 00:12:33,130
вместе называется HammerJS.

158
00:12:33,130 --> 00:12:36,940
Модуль HammerJS используется Angular

159
00:12:36,940 --> 00:12:40,700
для поддержки некоторых жестов в приложении Angular.

160
00:12:40,700 --> 00:12:45,750
Итак, это причина, по которой мы устанавливаем HammerJS также в нашем приложении

161
00:12:45,750 --> 00:12:51,830
и текущая версия HammerJS, которую мы используем, 2.0.8.

162
00:12:51,830 --> 00:12:56,050
Теперь мы установили все, что нам нужно

163
00:12:56,050 --> 00:13:01,185
для модуля углового материала, который будет использоваться в нашем угловом приложении.

164
00:13:01,185 --> 00:13:04,605
Далее, я собираюсь перейти к установке

165
00:13:04,605 --> 00:13:09,415
Angular Flex-Layout в моем угловом приложении.

166
00:13:09,415 --> 00:13:11,460
Итак, чтобы сделать это, я накладываю приглашение

167
00:13:11,460 --> 00:13:19,000
npm install —save @angular/flex-layout

168
00:13:19,000 --> 00:13:22,970
, и мы установим последнюю версию этого.

169
00:13:24,760 --> 00:13:31,720
Итак, теперь, когда у нас есть все части, которые нам нужны для нашего углового приложения установлены,

170
00:13:31,720 --> 00:13:36,290
давайте идти вперед, а затем настроить наше угловое приложение, чтобы сделать

171
00:13:36,290 --> 00:13:41,025
использовать эти новые модули, которые мы установили в нашем угловом приложении.

172
00:13:41,025 --> 00:13:46,205
Первое, что мы сделаем, это перейти к index.HTML файл,

173
00:13:46,205 --> 00:13:51,975
, а затем мы настроим файл index.HTML для использования значков углового материала.

174
00:13:51,975 --> 00:13:55,800
Итак, включить иконки углового материала, чтобы они могли быть

175
00:13:55,800 --> 00:13:59,580
использованы в шаблонах вашего углового приложения, так что

176
00:13:59,580 --> 00:14:04,020
позвольте мне пойти прямо там в голове index.HTML,

177
00:14:04,020 --> 00:14:11,905
, а затем создать новую ссылку с

178
00:14:11,905 --> 00:14:47,075
href=» https://fonts.googleapis.com/icon?family=Material+Icons "и это таблицы стилей.

179
00:14:47,075 --> 00:14:52,110
Таким образом, с этим, я теперь могу использовать значки углового материала в

180
00:14:52,110 --> 00:14:58,865
моего углового приложения, где бы я ни решил сделать это в шаблонах.

181
00:14:58,865 --> 00:15:04,530
Следующий шаг - перейти в приложение module.ts и

182
00:15:04,530 --> 00:15:09,825
затем импортировать три модуля, которые мы только что установили.

183
00:15:09,825 --> 00:15:14,345
Итак, первый, который я собираюсь импортировать, называется

184
00:15:14,345 --> 00:15:29,460
BrowserAnimationsModule, который я буду импортировать из

185
00:15:38,170 --> 00:15:47,230
@angular /платформ-браузер/анимации. Итак, теперь следующий

186
00:15:47,230 --> 00:15:54,115
, который я собираюсь импортировать, - это MaterialToolbarModule.

187
00:15:54,115 --> 00:16:00,370
Таким образом, это импортирует модуль @angular /materal/toolbar

188
00:16:00,370 --> 00:16:06,100
, который можно использовать в наших шаблонах угловых приложений.

189
00:16:06,100 --> 00:16:14,305
Итак, угловой материал, а также импортировать

190
00:16:14,305 --> 00:16:26,720
FlexLayoutModule из @angular /flex-layout.

191
00:16:27,470 --> 00:16:34,050
Итак, как только у нас все эти модули импортированы, то одно дополнительное изменение, которое мне нужно сделать

192
00:16:34,050 --> 00:16:40,035
- oh позвольте мне также импортировать Hammer.JS, пока я прямо там.

193
00:16:40,035 --> 00:16:43,100
Итак, позвольте мне импортировать

194
00:16:45,260 --> 00:16:51,585
Hammer.JS в мое приложение.

195
00:16:51,585 --> 00:16:53,830
И как только я нахожусь на нем,

196
00:16:53,830 --> 00:16:58,400
другое изменение, которое мне нужно сделать, также включить

197
00:16:58,400 --> 00:17:04,165
эти модули во входы декоратора модуля NG здесь.

198
00:17:04,165 --> 00:17:06,845
Итак, я собираюсь пойти туда и сказать модуль браузера,

199
00:17:06,845 --> 00:17:13,440
модуль анимации браузера там, а затем после модуля HTTP,

200
00:17:13,440 --> 00:17:21,009
я импортирую модуль панели материалов, а также модуль гибкого

201
00:17:21,009 --> 00:17:29,350
как часть входов внутри декоратора модуля NG для моего модуля приложения.

202
00:17:29,350 --> 00:17:36,215
Итак, с этим все мои конфигурации использовать модуль панели материалов и

203
00:17:36,215 --> 00:17:38,975
модуль углового гибкого макета и вместе с

204
00:17:38,975 --> 00:17:44,680
модуль анимации в угловом завершена.

205
00:17:44,680 --> 00:17:50,270
Теперь давайте шаг в шаблон компонентов и использовать

206
00:17:50,270 --> 00:17:54,570
наш первый компонент углового материала при разработке макета

207
00:17:54,570 --> 00:18:00,110
для нашего приложения компонента.

208
00:18:00,750 --> 00:18:06,020
Перейдя к файлу шаблона компонентов приложения,

209
00:18:06,020 --> 00:18:09,460
Я собираюсь заменить это сейчас на

210
00:18:09,460 --> 00:18:17,895
компонент углового материала

211
00:18:17,895 --> 00:18:21,480
называемый как матовая панель инструментов.

212
00:18:21,480 --> 00:18:24,645
Таким образом, матовая панель инструментов позволяет мне проектировать

213
00:18:24,645 --> 00:18:29,410
панель инструментов, которую я могу использовать в своем угловом приложении.

214
00:18:29,410 --> 00:18:35,805
Панель инструментов обычно отображается в верхней части страницы вашего приложения.

215
00:18:35,805 --> 00:18:41,395
Итак, для этой панели инструментов я буду указывать цвет как основной.

216
00:18:41,395 --> 00:18:44,145
Мы увидим, что это значит в ближайшее время.

217
00:18:44,145 --> 00:18:50,245
А также мы закроем эту панель инструментов MD здесь.

218
00:18:50,245 --> 00:18:56,230
Теперь внутри этого я собираюсь использовать span с

219
00:18:56,230 --> 00:19:05,790
название моего ресторана, для которого я разрабатываю этот сайт.

220
00:19:05,790 --> 00:19:08,150
Итак, Ристорант Кон Фьюжн.

221
00:19:08,150 --> 00:19:12,650
Теперь вы понимаете, почему я назвал эту папку Путаница.

222
00:19:12,650 --> 00:19:19,765
Итак, каково обновление, которое нам нужно сделать для HTML-файла компонента приложения.

223
00:19:19,765 --> 00:19:29,315
Пока мы на нем, мы также будем включать несколько обновлений SCSS для моего файла styles.SCSS.

224
00:19:29,315 --> 00:19:32,470
Итак, если вы заходите в свой код здесь,

225
00:19:32,470 --> 00:19:37,000
вы найдете этот файл styles.SCSS здесь.

226
00:19:37,000 --> 00:19:40,450
Итак, вот где вы можете включить все глобальные стили в

227
00:19:40,450 --> 00:19:44,810
этот файл, и это будет доступно для всех компонентов, чтобы использовать.

228
00:19:44,810 --> 00:19:51,970
Каждый компонент имеет свои собственные файлы SCSS, где вы можете включить компонент

229
00:19:51,970 --> 00:19:54,620
настройка уровня или код SCSS уровня

230
00:19:54,620 --> 00:20:00,280
, который будет использоваться в рамках этого конкретного компонента.

231
00:20:00,280 --> 00:20:03,090
Мы будем использовать оба подхода в рамках

232
00:20:03,090 --> 00:20:07,980
это угловое приложение, которое мы разрабатываем в этом курсе.

233
00:20:07,980 --> 00:20:13,530
Но прямо сейчас я собираюсь обновить основной файл styles.SCSS

234
00:20:13,530 --> 00:20:20,270
с некоторым кодом, который будет полезен для всего моего углового приложения.

235
00:20:20,270 --> 00:20:22,185
Первое, что я собираюсь сделать,

236
00:20:22,185 --> 00:20:28,160
, это импортировать готовую тему, которая доступна через угловой материал.

237
00:20:28,160 --> 00:20:33,380
Эта готовая тема в угловом материале предоставляет нам способ указания

238
00:20:33,380 --> 00:20:36,000
определенных цветов и способ некоторые вещи выложены

239
00:20:36,000 --> 00:20:39,265
в пределах моих компонентов углового материала.

240
00:20:39,265 --> 00:20:44,800
Цвета, которые будут доступны через предварительно построенный кадр наш основной цвет,

241
00:20:44,800 --> 00:20:49,050
цвет акцента и цвет предупреждения.

242
00:20:49,050 --> 00:20:53,000
Теперь конкретная тема, которую я буду использовать, называется глубокий фиолетовый.

243
00:20:53,000 --> 00:20:56,870
Итак, в этом случае основным цветом будет глубокий Фиолетовый.

244
00:20:56,870 --> 00:21:01,860
Цвет акцента будет янтарным, а предупреждающий цвет будет красным в этом случае.

245
00:21:01,860 --> 00:21:07,880
Теперь вы можете построить свои собственные угловые темы материала, которые

246
00:21:07,880 --> 00:21:14,385
вы можете использовать в своем приложении, но я оставлю это как упражнение для вас, чтобы исследовать самостоятельно.

247
00:21:14,385 --> 00:21:17,930
Прямо сейчас в моем угловом приложении я собираюсь использовать один

248
00:21:17,930 --> 00:21:21,510
из встроенных вещей, называемых темно-фиолетовым янтарным.

249
00:21:21,510 --> 00:21:25,575
Итак, чтобы сделать это, идя к файлу styles.SCSS,

250
00:21:25,575 --> 00:21:28,870
я буду импортировать

251
00:21:32,190 --> 00:21:38,080
угловой материал

252
00:21:38,080 --> 00:21:48,640
предварительно построенные темы глубокий фиолетовый янбер.CSS.

253
00:21:48,640 --> 00:21:54,015
Итак, эта одна готовая тема, которую я буду использовать в своем угловом приложении.

254
00:21:54,015 --> 00:21:58,335
Вы скоро увидите, как эта готовая тема работает в

255
00:21:58,335 --> 00:22:03,060
угловом приложении в шаблонах, которые мы разработали для нашего углового приложения.

256
00:22:03,060 --> 00:22:08,360
Кроме того, я собираюсь настроить некоторые свойства для

257
00:22:08,360 --> 00:22:16,530
моего тела страницы index.HTML, поэтому я буду указывать заполнение как ноль,

258
00:22:16,530 --> 00:22:23,230
маржа как ноль, а затем семейство шрифтов, которое я буду использовать

259
00:22:23,230 --> 00:22:30,360
, является rubato или sans serif в моем приложении.

260
00:22:30,360 --> 00:22:34,320
Вы можете использовать все, что вы хотите, в ваших угловых приложениях.

261
00:22:34,320 --> 00:22:38,095
Я выбрал для использования этих двух в моем угловом приложении.

262
00:22:38,095 --> 00:22:40,130
Давайте сохраним изменения,

263
00:22:40,130 --> 00:22:46,495
и пойдем и быстро посмотрим на наше угловое приложение в браузере.

264
00:22:46,495 --> 00:22:48,040
Прежде чем сделать это,

265
00:22:48,040 --> 00:22:53,080
убедитесь, что служба NG работает в

266
00:22:53,080 --> 00:22:58,940
одно из окон терминала на вашем компьютере.

267
00:22:58,940 --> 00:23:04,870
Сервер разработки должен постоянно работать, чтобы он автоматически выполнял декомпиляцию

268
00:23:04,870 --> 00:23:07,040
, а затем загружал

269
00:23:07,040 --> 00:23:11,975
обновленную версию углового приложения в окно браузера.

270
00:23:11,975 --> 00:23:14,290
Перейдя в браузер,

271
00:23:14,290 --> 00:23:17,925
вы теперь видите изменения, которые мы сделали в

272
00:23:17,925 --> 00:23:24,090
угловое приложение отражено в представлении в

273
00:23:24,090 --> 00:23:30,085
мой браузер, так что вы можете видеть, что у нас теперь есть панель инструментов в верхней с

274
00:23:30,085 --> 00:23:37,095
слова, которые мы включили в файл шаблона компонентов приложения там.

275
00:23:37,095 --> 00:23:41,290
И вы можете увидеть цвет, который был применен к панели инструментов.

276
00:23:41,290 --> 00:23:42,580
Так цвет, основной цвет,

277
00:23:42,580 --> 00:23:46,180
так что это глубокий фиолетовый цвет, который применяется к панели инструментов.

278
00:23:46,180 --> 00:23:52,000
Теперь тема, которую мы определили, добавит либо темно-фиолетовый или янтарный цвет,

279
00:23:52,000 --> 00:23:56,590
в зависимости от того, что используется конкретными компонентами углового материала

280
00:23:56,590 --> 00:24:01,750
, которые мы используем в наших шаблонах угловых приложений.

281
00:24:01,750 --> 00:24:05,285
С этим мы завершаем это упражнение.

282
00:24:05,285 --> 00:24:09,470
В этом упражнении мы настроили наше угловое приложение на использование

283
00:24:09,470 --> 00:24:13,880
углового материала и угловой гибкой компоновки.

284
00:24:13,880 --> 00:24:16,410
Мы также использовали

285
00:24:16,410 --> 00:24:22,150
наш первый компонент углового материала в файле шаблона компонентов приложения.

286
00:24:22,150 --> 00:24:29,605
И мы использовали встроенную тему из углового материала для нашего углового применения.

287
00:24:29,605 --> 00:24:34,530
Сохраните все изменения, и тогда это подходящее время для вас

288
00:24:34,530 --> 00:24:39,880
, чтобы сделать git commit с помощью настройки углового сообщения.