1
00:00:03,920 --> 00:00:10,619
Прежде чем мы двигаться вперед с остальными упражнениями и заданиями в этом курсе,

2
00:00:10,619 --> 00:00:13,245
я думал, что это будет хорошее время для меня

3
00:00:13,245 --> 00:00:16,450
дать моему угловой приложению хорошую структуру.

4
00:00:16,450 --> 00:00:19,660
Итак, вот где я собираюсь добавить в верхний и нижний колонтитул

5
00:00:19,660 --> 00:00:22,875
для моего углового приложения, чтобы способ

6
00:00:22,875 --> 00:00:29,635
визуализируется пользовательский интерфейс намного более привлекательным, чем то, что было до сих пор.

7
00:00:29,635 --> 00:00:34,010
Итак, давайте посмотрим, как мы можем создать несколько компонентов, чтобы

8
00:00:34,010 --> 00:00:38,150
занимать разные части экрана в нашем угловом приложении.

9
00:00:38,150 --> 00:00:43,445
Итак, здесь, вы увидите, что мое угловое приложение теперь будет состоять из заголовка,

10
00:00:43,445 --> 00:00:46,830
который является отдельным компонентом, нижний колонтитул,

11
00:00:46,830 --> 00:00:48,400
который является еще одним компонентом,

12
00:00:48,400 --> 00:00:50,145
, а затем в промежутке между ними,

13
00:00:50,145 --> 00:00:54,860
я буду иметь часть моего углового приложения, которая будет

14
00:00:54,860 --> 00:01:00,080
управляться позже с помощью углового маршрутизатора.

15
00:01:00,080 --> 00:01:06,740
Итак, видите ли, я создаю сцену для того, что будет дальше в этом курсе.

16
00:01:06,740 --> 00:01:08,840
Итак, по пути

17
00:01:08,840 --> 00:01:14,195
мы также будем использовать шрифт Awesome Icons в нашем угловом приложении.

18
00:01:14,195 --> 00:01:16,540
Я просто люблю шрифт Awesome Icons,

19
00:01:16,540 --> 00:01:18,890
, поэтому я подумал, что это будет хорошее место, чтобы

20
00:01:18,890 --> 00:01:23,005
ввести эти иконки в мое угловое приложение.

21
00:01:23,005 --> 00:01:28,715
Чтобы продолжить, давайте установим шрифт удивительный в наше угловое приложение.

22
00:01:28,715 --> 00:01:31,920
Итак, чтобы сделать это, я буду использовать NPM, чтобы пойти,

23
00:01:31,920 --> 00:01:34,320
и получить шрифт-awesome для меня,

24
00:01:34,320 --> 00:01:41,475
, поэтому NPM установить шрифт-awesome 4.7.0 и сохранить.

25
00:01:41,475 --> 00:01:44,055
Тогда пусть font-awesome будет установлен.

26
00:01:44,055 --> 00:01:48,435
Итак, как только font-awesome попадает в наше угловое приложение,

27
00:01:48,435 --> 00:01:50,570
, а затем становится частью модулей узла

28
00:01:50,570 --> 00:01:53,055
, которые включены в наше угловое приложение,

29
00:01:53,055 --> 00:01:58,465
следующим шагом является сделать его доступным для нашего углового приложения.

30
00:01:58,465 --> 00:02:03,355
Нам нужно интегрировать font-awesome в наше угловое приложение.

31
00:02:03,355 --> 00:02:04,710
Итак, для этого

32
00:02:04,710 --> 00:02:06,510
перейдите в исходную папку

33
00:02:06,510 --> 00:02:14,280
, а затем создайте файл с именем _variables.SCSS в исходной папке.

34
00:02:14,280 --> 00:02:18,400
В переменных.SCSS файл

35
00:02:18,400 --> 00:02:27,860
добавить в $fa-font-path: и

36
00:02:27,860 --> 00:02:33,810
затем в кавычки, поставить../node_modules/font-awesome/шрифты.

37
00:02:38,510 --> 00:02:45,080
Итак, мы указываем путь шрифта для наших удивительных файлов шрифтов здесь.

38
00:02:45,330 --> 00:02:51,245
Затем откройте файл styles.SCSS,

39
00:02:51,245 --> 00:02:53,995
, а затем в файле styles.SCSS,

40
00:02:53,995 --> 00:02:56,720
мы собираемся добавить в пару строк там.

41
00:02:56,720 --> 00:03:05,335
Во-первых, мы импортируем переменные, которые мы только что объявили, говоря @import,

42
00:03:05,335 --> 00:03:08,550
и в кавычках переменных,

43
00:03:08,550 --> 00:03:14,025
затем мы будем импортировать шрифт-удивительные файлы там,

44
00:03:14,025 --> 00:03:15,790
то мы скажем

45
00:03:16,040 --> 00:03:30,020
@import../node_modules/шрифт-awesome/SCSS/шрифт-awesome. Мы импортируем версию

46
00:03:30,020 --> 00:03:36,540
SCSS, потому что мы используем SCSS в нашем угловом приложении.

47
00:03:36,670 --> 00:03:41,850
После того, как мы изменили стили для файла CSS,

48
00:03:41,850 --> 00:03:43,680
давайте сохраним изменения.

49
00:03:43,680 --> 00:03:46,580
На данный момент нам может понадобиться перезапустить

50
00:03:46,580 --> 00:03:50,840
наш сервер, который обслуживал наше угловое приложение.

51
00:03:50,840 --> 00:03:53,590
Итак, где вы набрали NG serve,

52
00:03:53,590 --> 00:03:58,010
вы можете остановить сервер, который обслуживает ваше угловое приложение и

53
00:03:58,010 --> 00:04:03,135
перезапустить его так, чтобы он включал эти новые изменения, которые были сделаны.

54
00:04:03,135 --> 00:04:05,280
Итак, перейдя к моему терминалу,

55
00:04:05,280 --> 00:04:09,110
Я собираюсь остановить свой сервер,

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

57
00:04:15,095 --> 00:04:18,530
Вы увидите текущее состояние

58
00:04:18,530 --> 00:04:21,770
нашего углового приложения, глядя на него в браузере.

59
00:04:21,770 --> 00:04:25,040
Итак, это то, что мы имеем в нашем угловом приложении.

60
00:04:25,040 --> 00:04:28,160
Я хочу иметь возможность добавить верхний и нижний колонтитул в

61
00:04:28,160 --> 00:04:33,320
это представление, чтобы я мог использовать как верхний, так и нижний колонтитул,

62
00:04:33,320 --> 00:04:36,680
, а затем фактическое содержимое между заголовком

63
00:04:36,680 --> 00:04:40,550
и нижний колонтитул таким образом, как я создаю свое угловое приложение.

64
00:04:40,550 --> 00:04:41,690
Итак, чтобы сделать это,

65
00:04:41,690 --> 00:04:46,135
я собираюсь создать два новых компонента, называемых заголовком и нижним колонтитулом,

66
00:04:46,135 --> 00:04:51,510
и позволить им управлять своей частью экрана, которая выделена для них.

67
00:04:51,510 --> 00:04:56,290
Переходя к подсказке, позвольте мне сгенерировать новый компонент заголовка.

68
00:04:56,290 --> 00:04:58,950
Я даже могу сказать, что ng g,

69
00:04:58,950 --> 00:05:02,420
этого достаточно для углового CLI, чтобы

70
00:05:02,420 --> 00:05:06,190
признать, что он хочет сгенерировать компонент.

71
00:05:06,190 --> 00:05:11,310
Итак, я говорю, что заголовок компонента ng,

72
00:05:11,760 --> 00:05:17,370
, а также нижний колонтитул компонента ng.

73
00:05:17,370 --> 00:05:20,900
Итак, теперь у меня есть два компонента, которые доступны для меня

74
00:05:20,900 --> 00:05:25,030
, чтобы использовать в моем угловом приложении.

75
00:05:25,030 --> 00:05:28,445
Как я буду использовать эти два компонента?

76
00:05:28,445 --> 00:05:31,665
Давайте перейдем к файлу App component.html,

77
00:05:31,665 --> 00:05:35,360
, а затем использовать эти два компонента так, как мы

78
00:05:35,360 --> 00:05:40,340
составляем весь экран для нашего углового приложения.

79
00:05:40,340 --> 00:05:43,185
Возвращаясь к нашему приложению,

80
00:05:43,185 --> 00:05:48,620
мы видим, что файл module.ts

81
00:05:48,620 --> 00:05:51,680
уже включает заголовок и нижний колонтитул

82
00:05:51,680 --> 00:05:54,965
и они уже были включены в объявления здесь.

83
00:05:54,965 --> 00:05:58,075
Таким образом, это преимущество использования углового CLI,

84
00:05:58,075 --> 00:06:01,610
он заботится обо всем этом фундамент для

85
00:06:01,610 --> 00:06:05,825
вы, так что вы можете сосредоточиться на просто построении вашего углового приложения.

86
00:06:05,825 --> 00:06:09,340
Итак, вот почему я люблю угловой CLI

87
00:06:09,340 --> 00:06:13,490
как подход к построению моего углового приложения.

88
00:06:13,490 --> 00:06:20,640
Итак, теперь давайте перейдем к HTML-файлу компонентов приложения.

89
00:06:20,640 --> 00:06:24,530
Итак, здесь вы видите, что мы включили там меню приложения.

90
00:06:24,530 --> 00:06:29,430
Я собираюсь удалить эту панель инструментов из HTML-файла компонентов приложения.

91
00:06:29,430 --> 00:06:37,650
Эта панель инструментов станет частью шаблона заголовка для моего компонента заголовка.

92
00:06:37,650 --> 00:06:45,500
Таким образом, вместо этого мой шаблон компонентов приложения

93
00:06:45,500 --> 00:06:54,310
файл будет содержать только заголовок и нижний колонтитул внизу.

94
00:06:56,450 --> 00:06:59,065
Итак, вы видите, что теперь

95
00:06:59,065 --> 00:07:02,480
у нас есть взгляды на три компонента.

96
00:07:02,480 --> 00:07:04,370
Заголовок, меню,

97
00:07:04,370 --> 00:07:07,160
и нижний колонтитул, занимающий весь экран.

98
00:07:07,160 --> 00:07:10,940
Итак, эти три компонента получают ту часть экрана для себя.

99
00:07:10,940 --> 00:07:16,970
Давайте сохраним изменения и быстро посмотрим на наше приложение в браузере.

100
00:07:16,970 --> 00:07:19,855
Перейдя в приложение в браузере,

101
00:07:19,855 --> 00:07:22,895
вы теперь видите, что заголовок уже занял его

102
00:07:22,895 --> 00:07:26,090
часть экрана там, и, очевидно,

103
00:07:26,090 --> 00:07:28,400
так как мы только что подготовили компонент,

104
00:07:28,400 --> 00:07:30,245
он просто говорит заголовок работает,

105
00:07:30,245 --> 00:07:31,879
, а затем вниз здесь,

106
00:07:31,879 --> 00:07:36,180
нижний колонтитул также занял свое место на странице экрана.

107
00:07:36,180 --> 00:07:41,630
Теперь мы будем идти вперед и обновлять шаблоны как для заголовка, так и для нижнего колонтитула

108
00:07:41,630 --> 00:07:47,625
, чтобы мы могли красиво определить наш пользовательский интерфейс для нашего углового приложения.

109
00:07:47,625 --> 00:07:50,735
Давайте начнем работу на нашем нижнем колонтитуле.

110
00:07:50,735 --> 00:07:53,180
Итак, чтобы начать работу с нижнего колонтитула,

111
00:07:53,180 --> 00:07:55,780
, давайте перейдем к файлу шаблона нижнего колонтитула

112
00:07:55,780 --> 00:08:02,355
, а затем мы собираемся заменить это новым шаблоном нижнего колонтитула.

113
00:08:02,355 --> 00:08:03,920
Теперь, для вашего удобства,

114
00:08:03,920 --> 00:08:07,030
я предоставил код для вас в инструкции.

115
00:08:07,030 --> 00:08:10,690
Будет разумно скопировать весь код оттуда

116
00:08:10,690 --> 00:08:12,155
, а затем вставить его сюда.

117
00:08:12,155 --> 00:08:15,715
Затем изучите, что делает этот нижний колонтитул.

118
00:08:15,715 --> 00:08:20,830
Так вот, вы видите, что я вставил в код для моего шаблона нижнего колонтитула.

119
00:08:20,830 --> 00:08:24,130
Теперь я вернусь к этому коду немного позже.

120
00:08:24,130 --> 00:08:28,045
Если вы сделали предыдущий курс на Bootstrap,

121
00:08:28,045 --> 00:08:33,580
вы увидите, что это угловой материальный способ реализации

122
00:08:33,580 --> 00:08:40,185
той же структуры для нижнего колонтитула, что мы сделали в курсе Bootstrap.

123
00:08:40,185 --> 00:08:43,965
Некоторые из этих вещей будут узнаваемыми для вас уже,

124
00:08:43,965 --> 00:08:48,260
, но позвольте мне завершить обновление шаблона нижнего колонтитула,

125
00:08:48,260 --> 00:08:57,085
, а затем также мы добавим в несколько SCSS код в мой footer component.SCSS файл,

126
00:08:57,085 --> 00:09:02,100
, а затем посмотрим, как нижний колонтитул теперь формируется.

127
00:09:02,100 --> 00:09:05,675
Так вот, я снова вставил в код

128
00:09:05,675 --> 00:09:09,585
из инструкции упражнения, которые следуют этому видео,

129
00:09:09,585 --> 00:09:18,880
, чтобы показать различные классы SCSS, которые я добавил в свой нижний колонтитул.

130
00:09:18,880 --> 00:09:23,320
Итак, у меня есть несколько классов, которые я определил здесь,

131
00:09:23,320 --> 00:09:27,380
Я собираюсь использовать их для определения части моего нижнего колонтитула,

132
00:09:27,380 --> 00:09:29,570
, а затем аналогично классу нижнего колонтитула здесь,

133
00:09:29,570 --> 00:09:32,765
, и у меня есть смешивание SCSS здесь,

134
00:09:32,765 --> 00:09:37,165
и некоторые переменные здесь, которые

135
00:09:37,165 --> 00:09:41,450
определяют различные цвета, которые я собираюсь использовать в моем угловом приложение.

136
00:09:41,450 --> 00:09:44,145
Итак, давайте сохраним изменения, которые мы внесли.

137
00:09:44,145 --> 00:09:49,755
Давайте посмотрим на нижний колонтитул в его текущем воплощении

138
00:09:49,755 --> 00:09:55,740
, а затем мы вернемся и рассмотрим быстрый визит к коду, который я включил как

139
00:09:55,740 --> 00:10:02,345
в файл шаблона компонентов нижнего колонтитула, так и код SCSS здесь.

140
00:10:02,345 --> 00:10:06,835
Перейдя в наше угловое приложение в браузере, wallah,

141
00:10:06,835 --> 00:10:11,545
там у вас есть новый нижний колонтитул для нашего углового приложения.

142
00:10:11,545 --> 00:10:14,295
Итак, вы видите, что у меня есть несколько вещей.

143
00:10:14,295 --> 00:10:19,840
Это на левом краю различные ссылки

144
00:10:19,840 --> 00:10:25,975
на различные страницы, которые будут составлять часть моего углового приложения.

145
00:10:25,975 --> 00:10:30,620
Мы посмотрим, как мы это делаем в рамках следующих нескольких упражнений.

146
00:10:30,620 --> 00:10:35,110
Теперь, здесь я использую компонент кнопки, который

147
00:10:35,110 --> 00:10:39,795
является частью углового материала, чтобы определить эти ссылки здесь,

148
00:10:39,795 --> 00:10:41,870
то у меня есть адрес здесь,

149
00:10:41,870 --> 00:10:46,810
, а затем я также использую снова кнопки, чтобы определить эту последовательность

150
00:10:46,810 --> 00:10:52,110
кнопок для различных социальных сетей ссылки для моего ресторана здесь.

151
00:10:52,110 --> 00:10:55,515
Итак, вы видите, что у меня есть все это.

152
00:10:55,515 --> 00:10:57,470
Для создания этих, я использую

153
00:10:57,470 --> 00:11:01,820
поддержку углового материала для небольших плавающих кнопок действия здесь,

154
00:11:01,820 --> 00:11:05,155
, и это дает хорошую структуру для этого.

155
00:11:05,155 --> 00:11:07,860
Если вы видели Bootstrap версию этого,

156
00:11:07,860 --> 00:11:14,205
Мне нравится это намного лучше, чем версия Bootstrap, которую я создал в предыдущем курсе.

157
00:11:14,205 --> 00:11:19,730
Итак, наш нижний колонтитул теперь хорошо на месте.

158
00:11:19,730 --> 00:11:22,695
Давайте быстро рассмотрим код в нижнем колонтитуле.

159
00:11:22,695 --> 00:11:27,890
Теперь, я не буду объяснять, что в целом много деталей, потому что это, чтобы

160
00:11:27,890 --> 00:11:33,665
иметь дело с более угловым материалом, чем сам Angular,

161
00:11:33,665 --> 00:11:36,780
, но по пути, просто взглянув на структуру кода,

162
00:11:36,780 --> 00:11:39,045
вы начнете видеть, как

163
00:11:39,045 --> 00:11:45,095
этот угловой материал компоненты могут быть использованы для определения что-то вроде этого.

164
00:11:45,095 --> 00:11:47,060
Переходя к компоненту нижнего колонтитула,

165
00:11:47,060 --> 00:11:55,795
вы видите, что у меня есть внешний div здесь, для которого я указал некоторый угловой макет,

166
00:11:55,795 --> 00:11:59,280
flex атрибуты макета здесь,

167
00:11:59,280 --> 00:12:01,895
поэтому я говорю, что fxLayout строку,

168
00:12:01,895 --> 00:12:06,075
, а затем fxLayout см и xs должны быть столбцами.

169
00:12:06,075 --> 00:12:10,160
Итак, для небольших и дополнительных небольших размеров экрана

170
00:12:10,160 --> 00:12:14,380
собирается позиционировать все содержимое как столбцы,

171
00:12:14,380 --> 00:12:16,990
но для больших размеров экрана,

172
00:12:16,990 --> 00:12:18,300
он собирается позиционировать их как строку.

173
00:12:18,300 --> 00:12:21,545
Итак, это то, что дает мне хорошую структуру для моего нижнего колонтитула.

174
00:12:21,545 --> 00:12:24,790
Как вы видите в UI div,

175
00:12:24,790 --> 00:12:28,810
Я позиционирую весь центр контента здесь,

176
00:12:28,810 --> 00:12:31,495
и ниже здесь,

177
00:12:31,495 --> 00:12:33,380
Я определяю первый.

178
00:12:33,380 --> 00:12:40,415
Итак, этот математический поворот здесь, который я использую, определяет мои ссылки здесь.

179
00:12:40,415 --> 00:12:46,235
Итак, в этом я использую мат как компонент углового материала,

180
00:12:46,235 --> 00:12:49,425
и внутри я использую атрибут a с

181
00:12:49,425 --> 00:12:58,990
кнопки мат, назначенный a для создания этих кнопок здесь.

182
00:12:58,990 --> 00:13:02,255
Позже я вернусь и добавлю

183
00:13:02,255 --> 00:13:07,665
фактический код для этих ссылок в последующих упражнениях здесь.

184
00:13:07,665 --> 00:13:12,940
Это то, что помогает мне создать список ссылок на левой стороне.

185
00:13:12,940 --> 00:13:14,920
Это адрес, который вы видите,

186
00:13:14,920 --> 00:13:17,420
это довольно просто смотреть.

187
00:13:17,420 --> 00:13:22,080
Итак, это div, для которого я использую fxFlex с 50,

188
00:13:22,080 --> 00:13:24,490
и другой с fxFlex с 40.

189
00:13:24,490 --> 00:13:29,230
Итак, 40 означает 40 процентов, а 50 означает 50 процентов,

190
00:13:29,230 --> 00:13:33,150
, и здесь я использую смещение fxFlex 20 пикселей.

191
00:13:33,150 --> 00:13:37,410
Таким образом, он перемещает этот контент прямо на 20 пикселей.

192
00:13:37,410 --> 00:13:41,830
Итак, у меня осталось 20 пикселов слева для

193
00:13:41,830 --> 00:13:47,660
этого конкретного div, содержащего эти ссылки здесь.

194
00:13:47,660 --> 00:13:49,400
Затем, наконец, ниже здесь,

195
00:13:49,400 --> 00:13:55,850
У меня есть этот набор ссылок, которые я использую для

196
00:13:55,850 --> 00:14:02,340
создать бар со всеми ссылками социальных сетей там.

197
00:14:02,340 --> 00:14:06,330
Итак, я использую кнопку с значком ковра здесь.

198
00:14:06,330 --> 00:14:14,850
Итак, вот что создает закругленные кнопки, которые вы видите в нижнем колонтитуле.

199
00:14:14,850 --> 00:14:16,150
Теперь, для каждого из них,

200
00:14:16,150 --> 00:14:18,640
я применяю соответствующий класс здесь.

201
00:14:18,640 --> 00:14:21,745
Итак, вы можете заметить, что кнопка Google Plus, кнопка Facebook,

202
00:14:21,745 --> 00:14:27,590
все эти классы определены в моем файле SCSS там,

203
00:14:27,590 --> 00:14:31,540
где я указал цвета для фона и так далее для этого,

204
00:14:31,540 --> 00:14:38,025
так, что он соответствует типичной цветовой схеме, которую используют эти сайты социальных сетей.

205
00:14:38,025 --> 00:14:43,380
Итак, потратьте немного времени, глядя на этот код здесь,

206
00:14:43,380 --> 00:14:49,435
, а затем вы быстро получите представление о том, как был разработан нижний колонтитул.

207
00:14:49,435 --> 00:14:54,520
Точно так же, идя к компонентам нижнего колонтитула Sass код здесь,

208
00:14:54,520 --> 00:14:57,460
, так что вы можете видеть, что я определил различные цвета здесь.

209
00:14:57,460 --> 00:15:00,970
Я использую смешивание с полем, установленным здесь,

210
00:15:00,970 --> 00:15:02,045
, а затем для моего нижнего колонтитула,

211
00:15:02,045 --> 00:15:04,695
Я определяю цвет фона соответствующим образом,

212
00:15:04,695 --> 00:15:10,150
и замечаю различные классы, которые я определяю здесь

213
00:15:10,150 --> 00:15:12,910
кнопку Facebook, для которой цвет и

214
00:15:12,910 --> 00:15:15,910
цвет фона я определил для каждого из них.

215
00:15:15,910 --> 00:15:18,300
Итак, что соответствующий цвет

216
00:15:18,300 --> 00:15:22,835
, что сайт социальных сетей используется в качестве цвета фона для каждого из них.

217
00:15:22,835 --> 00:15:25,255
Теперь, в курсе Bootstrap ранее,

218
00:15:25,255 --> 00:15:31,200
я использовал Bootstrap Social для достижения того же самого.

219
00:15:31,200 --> 00:15:34,920
Это не очень хорошо работает с угловым материалом,

220
00:15:34,920 --> 00:15:41,170
, поэтому я просто создал свой собственный набор очков Sass здесь,

221
00:15:41,170 --> 00:15:46,380
, а затем добавить в код, который мне нужно создать эти кнопки там.

222
00:15:46,380 --> 00:15:48,840
Если вам нужно добавить больше кнопок,

223
00:15:48,840 --> 00:15:51,490
, то просто создайте больше классов, как это соответствует

224
00:15:51,490 --> 00:15:54,695
кнопки, которые вы хотите добавить в ваше приложение.

225
00:15:54,695 --> 00:15:57,355
Итак, это укрепляет наш нижний колонтитул.

226
00:15:57,355 --> 00:16:01,995
Теперь заголовок - это следующая часть, на которую мы собираемся нацелить.

227
00:16:01,995 --> 00:16:04,770
Переходя к заголовку, откроет файл шаблона компонентов заголовка

228
00:16:04,770 --> 00:16:09,320
и вы увидите, что он содержит.

229
00:16:09,320 --> 00:16:11,565
Мы собираемся заменить это на

230
00:16:11,565 --> 00:16:16,115
шаблон, который я дал для вас в инструкции, которые следуют здесь.

231
00:16:16,115 --> 00:16:19,495
Итак, просто идите вперед и вырежьте и вставьте этот код здесь,

232
00:16:19,495 --> 00:16:22,730
, потому что это не имеет ничего общего с угловым.

233
00:16:22,730 --> 00:16:26,620
Итак, вот почему я просто разрешаю вам вырезать и вставить код прямо оттуда,

234
00:16:26,620 --> 00:16:29,060
экономит время для нас.

235
00:16:29,060 --> 00:16:35,300
Вы можете видеть, что я теперь заменил шаблон заголовков на какой-то код здесь.

236
00:16:35,300 --> 00:16:37,230
Точно так же, пока мы на нем,

237
00:16:37,230 --> 00:16:43,100
мы также добавим в некоторый код SCSS для моего файла header.components.SCSS здесь,

238
00:16:43,100 --> 00:16:46,550
просто пойти и скопировать код из инструкций.

239
00:16:46,550 --> 00:16:48,845
Аналогично, пока мы находимся на нем,

240
00:16:48,845 --> 00:16:55,810
мы добавим еще несколько классов SCSS в мой основной файл styles.SCSS.

241
00:16:55,810 --> 00:16:58,480
Итак, в этот основной файл styles.SCSS,

242
00:16:58,480 --> 00:17:03,850
я добавлю в sub цвета и еще пару классов в это.

243
00:17:03,850 --> 00:17:09,650
Итак, давайте вставим код из инструкций, которые я вам дал.

244
00:17:09,650 --> 00:17:14,425
Итак, обновление файла styles.SCSS теперь завершено,

245
00:17:14,425 --> 00:17:18,165
, поэтому я добавил в некоторых цветах здесь и смешать там,

246
00:17:18,165 --> 00:17:23,230
, а затем внизу я добавил еще несколько классов здесь, которые

247
00:17:23,230 --> 00:17:28,975
помогают мне, когда я разрабатываю мои шаблоны для моего углового приложения.

248
00:17:28,975 --> 00:17:30,680
Итак, все эти изменения,

249
00:17:30,680 --> 00:17:32,120
давайте сохраним изменения,

250
00:17:32,120 --> 00:17:36,435
быстро посмотрим, как выглядит мой заголовок сейчас в приложении,

251
00:17:36,435 --> 00:17:41,735
, а затем мы вернемся и быстро пересмотрим код, который мы только что включили здесь.

252
00:17:41,735 --> 00:17:45,775
Возвращаясь к моему угловатому приложению в браузере,

253
00:17:45,775 --> 00:17:51,820
вы теперь видите, что панель инструментов снова появляется в заголовке здесь,

254
00:17:51,820 --> 00:17:56,980
вместе с несколькими ссылками в

255
00:17:56,980 --> 00:18:03,260
там, а затем изображение, представляющее логотип для моего ресторана,

256
00:18:03,260 --> 00:18:12,095
, а затем здесь, у вас есть что-то, что мы используем файл jumbotron в предыдущем Конечно.

257
00:18:12,095 --> 00:18:15,890
Я собираюсь просто использовать класс под названием jumbotron для создания этого

258
00:18:15,890 --> 00:18:20,015
в угловом приложении также,

259
00:18:20,015 --> 00:18:24,545
, поэтому здесь, на левой стороне у меня есть информация о моем ресторане и

260
00:18:24,545 --> 00:18:30,280
логотип ресторана и оставил себе некоторое пространство для добавления чего-то в будущем.

261
00:18:30,280 --> 00:18:36,610
Итак, здесь вы видите, что мое приложение теперь формируется с заголовком

262
00:18:36,610 --> 00:18:38,745
с некоторыми ссылками там.

263
00:18:38,745 --> 00:18:41,070
Теперь мы собираемся использовать эти ссылки в

264
00:18:41,070 --> 00:18:46,145
следующие несколько упражнений, чтобы настроить мое угловое приложение,

265
00:18:46,145 --> 00:18:52,220
, а затем меню сидит между, а затем вниз ниже мой нижний колонтитул.

266
00:18:52,220 --> 00:18:55,100
Перейдя к моему файлу шаблона компонентов заголовка,

267
00:18:55,100 --> 00:19:00,830
теперь вы можете увидеть, как я создал панель инструментов с дополнительными кнопками здесь.

268
00:19:00,830 --> 00:19:03,740
Итак, вы помните, что у нас была панель инструментов

269
00:19:03,740 --> 00:19:08,035
уже используется в файле шаблона компонентов приложения,

270
00:19:08,035 --> 00:19:16,845
Я вырезал его оттуда и вместо этого использовать панель инструментов в шаблоне заголовков здесь.

271
00:19:16,845 --> 00:19:18,915
Теперь, внутри этой панели инструментов,

272
00:19:18,915 --> 00:19:26,260
я включил некоторые ссылки с классом кнопок, примененным к ней, и это то, что

273
00:19:26,260 --> 00:19:34,745
позволяет мне создавать эти ссылки на панели инструментов в качестве меню для моего веб-приложения.

274
00:19:34,745 --> 00:19:40,855
Ниже я создал div с контейнером класса и jumbotron.

275
00:19:40,855 --> 00:19:46,650
Вот почему я добавил классы контейнера и jumbotron в свой файл SCSS,

276
00:19:46,650 --> 00:19:50,480
, чтобы я мог использовать их в своих шаблонах здесь.

277
00:19:50,480 --> 00:19:51,910
Итак, для чего опять,

278
00:19:51,910 --> 00:20:01,025
я применяю и некоторые атрибуты гибкого макета здесь, чтобы помочь мне спроектировать экран там.

279
00:20:01,025 --> 00:20:06,500
Тогда вы можете увидеть, как я использовал пару divs здесь с

280
00:20:06,500 --> 00:20:13,815
атрибут fxFlex, применяемый соответствующим образом для создания пользовательского интерфейса,

281
00:20:13,815 --> 00:20:16,385
для моего приложения здесь.

282
00:20:16,385 --> 00:20:22,400
Итак, потратьте немного времени здесь, чтобы быстро взглянуть на этот код здесь, чтобы

283
00:20:22,400 --> 00:20:29,130
быстро понять, как был создан мой макет для моего шаблона заголовка.

284
00:20:29,130 --> 00:20:30,620
Это не так сложно,

285
00:20:30,620 --> 00:20:32,825
, как только вы закончили курс Bootstrap,

286
00:20:32,825 --> 00:20:35,619
это не так сложно понять.

287
00:20:35,619 --> 00:20:39,520
По пути вы также изучаете угловой гибкий макет, а затем

288
00:20:39,520 --> 00:20:44,105
также компоненты углового материала здесь.

289
00:20:44,105 --> 00:20:48,619
Перейдя к файлу SCSS для компонента заголовка,

290
00:20:48,619 --> 00:20:52,300
вы можете видеть, что я добавил в некоторых цветах здесь, а затем микс

291
00:20:52,300 --> 00:20:56,100
, а затем также добавил в класс jumbotron здесь.

292
00:20:56,100 --> 00:20:58,275
Теперь класса контейнера здесь нет,

293
00:20:58,275 --> 00:21:01,315
класс контейнера находится в главном файле стилей.

294
00:21:01,315 --> 00:21:03,600
Потому что класс контейнера - это то, что я собираюсь использовать

295
00:21:03,600 --> 00:21:06,010
для многих шаблонов там.

296
00:21:06,010 --> 00:21:11,800
Итак, вот почему я добавил в класс контейнера в файл styles.SCSS

297
00:21:11,800 --> 00:21:18,020
, который является общим файлом для всего моего углового приложения.

298
00:21:18,020 --> 00:21:21,375
Итак, там я добавил в некоторых дополнительных цветах здесь,

299
00:21:21,375 --> 00:21:24,670
, а также я создал смесь здесь,

300
00:21:24,670 --> 00:21:26,759
, а затем добавил в контейнер,

301
00:21:26,759 --> 00:21:29,980
фоновый первичный и фоновый акцент цвета,

302
00:21:29,980 --> 00:21:33,640
, а затем я также использую другой класс под названием flexes spacer,

303
00:21:33,640 --> 00:21:37,575
, который я собираюсь использовать в одно из последующих упражнений.

304
00:21:37,575 --> 00:21:41,400
Все эти шаги находятся в подготовке к тому, что собирается

305
00:21:41,400 --> 00:21:45,150
прийти в следующих нескольких упражнениях.

306
00:21:45,150 --> 00:21:51,920
Мое угловое приложение теперь приняло хорошую форму с точки зрения того, как интерфейс выложен,

307
00:21:51,920 --> 00:21:58,155
, так что теперь я могу начать вводить гораздо больше новых функций для угловых.

308
00:21:58,155 --> 00:22:02,005
Оплатив еще одно посещение моего углового приложения в браузере,

309
00:22:02,005 --> 00:22:08,450
позвольте мне увидеть, как это приложение выглядит в разных размерах экрана.

310
00:22:08,450 --> 00:22:11,430
Итак, это стандартный размер экрана рабочего стола,

311
00:22:11,430 --> 00:22:17,020
, поэтому давайте перейдем к меньшему размеру экрана, а затем посмотрим, как выглядит приложение.

312
00:22:17,020 --> 00:22:21,690
Итак, это размер экрана iPhone 6 Plus,

313
00:22:21,690 --> 00:22:28,865
, так что вы можете видеть, как макет отличается для меньшего размера экрана.

314
00:22:28,865 --> 00:22:35,115
Итак, мой заголовок находится прямо там, и мое меню внизу и нижний колонтитул здесь,

315
00:22:35,115 --> 00:22:38,955
обратите внимание, как различные части нижнего колонтитула были

316
00:22:38,955 --> 00:22:43,485
разложены по-разному для дополнительного небольшого размера экрана.

317
00:22:43,485 --> 00:22:49,950
Это то же приложение в ландшафтном режиме или iPhone 6 Plus,

318
00:22:49,950 --> 00:22:58,205
так что вы можете видеть, что мой заголовок выложен так и меню там и нижний колонтитул.

319
00:22:58,205 --> 00:23:04,230
Итак, это показывает вам, что я использую угловой гибкий макет

320
00:23:04,230 --> 00:23:10,510
, чтобы иметь возможность создавать разные макеты для разных размеров экрана.

321
00:23:10,510 --> 00:23:14,395
Итак, опять же, если вы прошли курс Bootstrap раньше,

322
00:23:14,395 --> 00:23:19,420
вы начнете видеть, как отзывчивый дизайн с

323
00:23:19,420 --> 00:23:25,950
угловой гибкой макет также может быть использован для достижения аналогичных результатов.

324
00:23:25,950 --> 00:23:29,790
Итак, этим мы завершаем это упражнение.

325
00:23:29,790 --> 00:23:35,140
В этом упражнении мы подготовили наше угловое приложение и сделали

326
00:23:35,140 --> 00:23:40,645
готовым к остальным упражнениям в этом курсе.

327
00:23:40,645 --> 00:23:47,300
Это также хорошее время для вас, чтобы сделать git commit с заголовком и нижними колонтитулами сообщения.