1
00:00:03,650 --> 00:00:09,520
Типичное угловое приложение состоит из многих компонентов.

2
00:00:09,520 --> 00:00:16,225
Компоненты управляют частью экрана, называемым как представление в Angular.

3
00:00:16,225 --> 00:00:21,840
Таким образом, когда вы создаете свой экран в приложении Angular,

4
00:00:21,840 --> 00:00:25,310
вы можете разделить ваш экран на несколько представлений,

5
00:00:25,310 --> 00:00:29,384
каждый из них управляется отдельным компонентом.

6
00:00:29,384 --> 00:00:31,200
Пока что в примере

7
00:00:31,200 --> 00:00:35,715
у нас есть один корневой компонент, который управляет всем экраном.

8
00:00:35,715 --> 00:00:42,440
В этом уроке мы добавим еще один компонент, который принимает часть экрана и берет

9
00:00:42,440 --> 00:00:45,890
управление этой частью экрана и заботится о

10
00:00:45,890 --> 00:00:50,275
весь рендеринг этой части экрана, здесь.

11
00:00:50,275 --> 00:00:54,060
Давайте быстро посетите компонент App, который

12
00:00:54,060 --> 00:00:57,350
у нас уже есть как часть нашего углового приложения.

13
00:00:57,350 --> 00:00:58,730
Итак, в этом компоненте

14
00:00:58,730 --> 00:01:04,250
вы можете видеть, что мы импортируем компонент из углового ядра.

15
00:01:04,250 --> 00:01:07,100
Таким образом, это дает нам возможность

16
00:01:07,100 --> 00:01:11,585
определить компонент декоратор и применить его к нашему классу.

17
00:01:11,585 --> 00:01:16,640
Таким образом, это определит один компонент, который является частью нашего углового приложения.

18
00:01:16,640 --> 00:01:19,590
Итак, здесь, этот конкретный компонент,

19
00:01:19,590 --> 00:01:22,970
, как вы можете видеть, когда вы определяете компонент декоратор,

20
00:01:22,970 --> 00:01:30,450
он состоит из нескольких свойств здесь, один из них является селектором, здесь.

21
00:01:30,450 --> 00:01:36,375
Теперь это конкретное свойство селектора определяет строку здесь.

22
00:01:36,375 --> 00:01:40,010
Обратите внимание, в частности, что содержится внутри строки.

23
00:01:40,010 --> 00:01:42,080
Он говорит, что приложение root.

24
00:01:42,080 --> 00:01:46,270
Теперь, оглядываясь назад на файл index.html.

25
00:01:46,270 --> 00:01:48,915
Итак, я собираюсь в файл index.html.

26
00:01:48,915 --> 00:01:51,400
Вы можете видеть, что прямо там,

27
00:01:51,400 --> 00:02:00,570
мы используем это приложение корень в качестве одного из тегов в нашем файле index.html.

28
00:02:00,570 --> 00:02:05,630
Итак, теперь вы видите, что этот тег, который вы используете, ссылается

29
00:02:05,630 --> 00:02:11,270
на селектор того, что мы здесь указали, app-root.

30
00:02:11,270 --> 00:02:18,500
Итак, если вы хотите дать часть экрана и сделать это контролируемым компонентом,

31
00:02:18,500 --> 00:02:23,135
, тогда вы используете селектор, чтобы указать, а затем вы включите

32
00:02:23,135 --> 00:02:28,310
тег селектора в свой HTML-файл.

33
00:02:28,310 --> 00:02:32,190
То же самое относится и к шаблону компонента.

34
00:02:32,190 --> 00:02:35,330
Если включить другой селектор из другого компонента

35
00:02:35,330 --> 00:02:39,350
в шаблон этого компонента,

36
00:02:39,350 --> 00:02:42,770
, то эта часть экрана будет передана

37
00:02:42,770 --> 00:02:46,440
второй компонент, управляемый из второго компонента.

38
00:02:46,440 --> 00:02:52,304
Мы также узнаем об этом в одном из последующих уроков.

39
00:02:52,304 --> 00:02:57,970
Теперь вторая часть, которую вы видите, указывается templateUrl.

40
00:02:57,970 --> 00:03:06,560
Этот templateUrl указывает имя файла шаблона для данного конкретного компонента.

41
00:03:06,560 --> 00:03:10,970
Итак, в данном случае, как вы можете видеть, это app.component.html.

42
00:03:10,970 --> 00:03:14,720
Таким образом, именно поэтому шаблон определяется в файле

43
00:03:14,720 --> 00:03:19,605
app.component.html для этого конкретного компонента.

44
00:03:19,605 --> 00:03:25,270
Кроме того, вы также можете предоставить стили для этого приложения.

45
00:03:25,270 --> 00:03:30,105
Итак, здесь мы говорим styleUrls, а затем здесь

46
00:03:30,105 --> 00:03:36,610
в квадратных скобках вы предоставляете это высказывание./app.component.scss.

47
00:03:36,610 --> 00:03:44,175
Итак, это означает, что этот конкретный SaaS-файл применяется к этому стилю.

48
00:03:44,175 --> 00:03:48,620
Итак, как вы видели, когда мы создали наше угловое приложение,

49
00:03:48,620 --> 00:03:53,970
я указал формат стиля, который я собираюсь использовать, является SCSS.

50
00:03:53,970 --> 00:03:56,650
Итак, это причина, по которой эти файлы являются SCSS.

51
00:03:56,650 --> 00:04:01,190
Если вы не используете стиль SCSS и вместо этого создаете нормально,

52
00:04:01,190 --> 00:04:06,860
то это будут просто файлы CSS, а затем вы можете использовать CSS для определения

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

54
00:04:16,020 --> 00:04:19,820
Итак, если у вас есть какие-либо стили

55
00:04:19,820 --> 00:04:23,000
, которые вы хотите включить для этого конкретного компонента,

56
00:04:23,000 --> 00:04:25,565
тогда вы будете включать их в этот файл.

57
00:04:25,565 --> 00:04:29,965
Вы также можете указать шаблон и стиль inline.

58
00:04:29,965 --> 00:04:33,280
Итак, если вы укажете стиль или шаблон inline,

59
00:04:33,280 --> 00:04:37,785
вы просто укажите это, как и с обратными кавычками.

60
00:04:37,785 --> 00:04:40,080
Так, например, я могу просто,

61
00:04:40,080 --> 00:04:42,520
вместо того, чтобы делать templateUrl,

62
00:04:42,520 --> 00:04:52,475
Я могу просто отредактировать это в шаблон, а затем я определяю шаблон в обратных кавычках здесь.

63
00:04:52,475 --> 00:04:59,420
Поэтому я бы сказал, и внутри обратно qootes я даже могу делать такие шаблоны.

64
00:04:59,420 --> 00:05:07,360
Итак, я могу сказать h1, а затем название.

65
00:05:07,360 --> 00:05:17,060
Таким образом, это было бы то, что мы называем встроенного шаблона, который мы используем в нашем приложении.

66
00:05:17,060 --> 00:05:19,280
Теперь, если вы используете обратные котировки,

67
00:05:19,280 --> 00:05:23,690
вы также можете использовать такие вещи, как доллар добавить в

68
00:05:23,690 --> 00:05:28,955
, чтобы использовать переменные в ваших шаблонах и так далее.

69
00:05:28,955 --> 00:05:31,235
В этом конкретном курсе

70
00:05:31,235 --> 00:05:34,820
мы будем использовать отдельные файлы шаблонов

71
00:05:34,820 --> 00:05:39,590
и создавать шаблоны в этих HTML-файлах вместо этого.

72
00:05:39,590 --> 00:05:45,050
Я предпочитаю этот метод определения моих шаблонов, а не делать встроенные шаблоны.

73
00:05:45,050 --> 00:05:49,180
Но если ваш шаблон очень прост и содержит всего две или три строки,

74
00:05:49,180 --> 00:05:56,235
, то непременно используйте встроенный шаблон, подобный этому в вашем приложении.

75
00:05:56,235 --> 00:06:02,930
Итак, позвольте мне изменить его обратно на мое первоначальное значение здесь.

76
00:06:02,930 --> 00:06:04,770
То же самое для стилей.

77
00:06:04,770 --> 00:06:08,240
Кроме того, я могу просто сказать стили, а затем в обратных кавычках

78
00:06:08,240 --> 00:06:12,500
включают мои классы CSS в задние кавычки.

79
00:06:12,500 --> 00:06:15,245
Хотя, как я уже упоминал,

80
00:06:15,245 --> 00:06:24,895
я предпочитаю хранить их в отдельных файлах только для того, чтобы иметь чистый код в мои.ts файлах здесь.

81
00:06:24,895 --> 00:06:27,515
Таким образом, у нас есть стили шаблонов селекторов.

82
00:06:27,515 --> 00:06:30,010
У нас также будет еще один идентификатор модуля.

83
00:06:30,010 --> 00:06:33,020
На данный момент я не использую это для моего компонента

84
00:06:33,020 --> 00:06:40,395
, но в некоторых случаях вам нужно будет явно указать идентификатор модуля для вашего компонента.

85
00:06:40,395 --> 00:06:44,610
Мы увидим несколько примеров этого чуть позже.

86
00:06:44,610 --> 00:06:50,955
Кроме того, компонент - это не что иное, как класс JavaScript или класс Type Script.

87
00:06:50,955 --> 00:06:53,615
Так вот почему вы видите здесь,

88
00:06:53,615 --> 00:06:58,960
, определяющий класс, говорящий AppComponent, а затем вы экспортируете этот класс.

89
00:06:58,960 --> 00:07:01,820
Причина, по которой мы используем экспорт здесь,

90
00:07:01,820 --> 00:07:06,820
, чтобы этот компонент мог быть импортирован в мой модуль приложения.

91
00:07:06,820 --> 00:07:10,070
Итак, вы видели, что мы импортируем это в мой модуль приложения.

92
00:07:10,070 --> 00:07:18,350
Поэтому всякий раз, когда вы хотите сделать какой-либо компонент или модуль портативным в другом модуле,

93
00:07:18,350 --> 00:07:25,245
, вы всегда добавляете экспорт в класс здесь.

94
00:07:25,245 --> 00:07:28,040
Итак, кроме того,

95
00:07:28,040 --> 00:07:34,295
мы видим, что у нас есть некоторые локальные свойства, которые мы определили

96
00:07:34,295 --> 00:07:43,220
внутри наших классов здесь, и они будут доступны через мой шаблон.

97
00:07:43,220 --> 00:07:45,340
Поэтому я могу использовать их в моем шаблоне.

98
00:07:45,340 --> 00:07:48,170
Таким образом, свойства, определенные внутри моего файла

99
00:07:48,170 --> 00:07:53,230
component.ts, доступны из моих файлов шаблонов.

100
00:07:53,230 --> 00:08:00,875
Мы поговорим об аспекторе привязки данных немного позже в другом уроке.

101
00:08:00,875 --> 00:08:08,075
Подводя итог, мы узнали, что компонент определяется

102
00:08:08,075 --> 00:08:15,990
, указав код, а также соответствующий шаблон.

103
00:08:15,990 --> 00:08:19,850
Итак, внутри кода можно определить свойства и методы

104
00:08:19,850 --> 00:08:24,455
, которые будут доступны из вашего шаблона из соответствующего шаблона.

105
00:08:24,455 --> 00:08:26,530
Итак, как вы видели, в метаданных

106
00:08:26,530 --> 00:08:29,370
в декораторе компонента,

107
00:08:29,370 --> 00:08:38,380
вы указали имя файла шаблона как одно из свойств вашего класса компонентов здесь.

108
00:08:38,380 --> 00:08:41,870
Аналогичным образом, любые свойства и методы, которые вы определяете в

109
00:08:41,870 --> 00:08:45,875
ваш компонент, будут доступны из вашего шаблона.

110
00:08:45,875 --> 00:08:49,645
Мало того, что вы также можете иметь так называемое событие

111
00:08:49,645 --> 00:08:53,450
привязки из вашего шаблона обратно к вашим компонентам.

112
00:08:53,450 --> 00:08:57,320
Итак, если какие-либо события генерируются в ваших шаблонах, так, например,

113
00:08:57,320 --> 00:09:02,180
нажатие кнопки на вашем шаблоне, которая может вызвать

114
00:09:02,180 --> 00:09:08,535
вызовы методов внутри вашего кода здесь,

115
00:09:08,535 --> 00:09:11,400
Javascript или Type Script код здесь.

116
00:09:11,400 --> 00:09:16,790
Мы увидим использование тех в одном из более поздних уроков, а затем, я снова,

117
00:09:16,790 --> 00:09:20,180
повторю этот пункт о привязке собственности и привязке событий,

118
00:09:20,180 --> 00:09:23,500
и объясню это вам немного более подробно.

119
00:09:23,500 --> 00:09:29,840
Компоненты в угловом приложении могут быть организованы в иерархию.

120
00:09:29,840 --> 00:09:32,470
Итак, у вас всегда будет корневой компонент.

121
00:09:32,470 --> 00:09:33,835
Таким образом, для нашего приложения

122
00:09:33,835 --> 00:09:37,130
файл app.component.ts и

123
00:09:37,130 --> 00:09:43,039
соответствующий HTML-шаблон формирует корневой компонент для нашего приложения

124
00:09:43,039 --> 00:09:46,724
и этот корневой компонент может затем содержать компоненты

125
00:09:46,724 --> 00:09:52,825
вниз в иерархии и может включать компоненты в иерархию.

126
00:09:52,825 --> 00:09:56,750
Мы увидим, что в самом следующем упражнении

127
00:09:56,750 --> 00:10:02,275
, где мы создадим другой компонент, а затем используем его в нашем корневом компоненте.

128
00:10:02,275 --> 00:10:04,960
Таким образом, вы можете иметь несколько компонентов, которые

129
00:10:04,960 --> 00:10:08,005
включены в ваш корневой компонент, и эти компоненты

130
00:10:08,005 --> 00:10:13,690
сами, в свою очередь, могут использовать другие компоненты, которые включены внутри них.

131
00:10:13,690 --> 00:10:21,075
Таким образом, эта иерархия компонентов позволяет вам проектировать экран вашего приложения.

132
00:10:21,075 --> 00:10:24,940
С этим быстрым пониманием компонентов

133
00:10:24,940 --> 00:10:28,810
и того, как компоненты полезны для разработки нашего приложения,

134
00:10:28,810 --> 00:10:32,935
мы теперь перейдем к нашему следующему упражнению, где мы создадим

135
00:10:32,935 --> 00:10:37,339
и добавим еще один компонент в наше угловое приложение

136
00:10:37,339 --> 00:10:41,810
, а затем мы определим шаблон для этого компонента, а затем мы будет использовать

137
00:10:41,810 --> 00:10:47,230
этот компонент внутри нашего корневого компонента для разработки нашего экрана.