1
00:00:00,000 --> 00:00:04,599
[MUSIC]

2
00:00:04,599 --> 00:00:09,853
Мы только что создали наше первое угловое приложение в предыдущем упражнении.

3
00:00:09,853 --> 00:00:13,758
Вам должно быть интересно, как выглядит типичное угловое приложение?

4
00:00:13,758 --> 00:00:16,345
Какова его структура и архитектура, и

5
00:00:16,345 --> 00:00:18,669
как мы создаем угловое приложение?

6
00:00:19,800 --> 00:00:25,560
Давайте поговорим об этих вещах шаг за шагом, начиная с этой лекции.

7
00:00:27,390 --> 00:00:34,280
Быстрый взгляд на папку приложения в редакторе.

8
00:00:34,280 --> 00:00:39,469
Вы сразу заметили, что угловой CLI создал целую кучу

9
00:00:40,530 --> 00:00:45,820
файлов в различных папках в нашем приложении.

10
00:00:47,260 --> 00:00:50,240
Что содержат эти файлы?

11
00:00:50,240 --> 00:00:53,930
Как они представляют собой угловое приложение?

12
00:00:53,930 --> 00:00:58,832
Давайте рассмотрим их шаг за шагом, чтобы понять типичную архитектуру

13
00:00:58,832 --> 00:01:00,556
углового приложения.

14
00:01:00,556 --> 00:01:03,688
Как мы уже поняли,

15
00:01:03,688 --> 00:01:08,828
Угловые приложения построены как комбинация

16
00:01:08,828 --> 00:01:13,727
HTML и TypeScript или JavaScript.

17
00:01:13,727 --> 00:01:18,735
В этом курсе мы будем использовать TypeScript в качестве языка выбора для

18
00:01:18,735 --> 00:01:21,169
построения нашего углового приложения.

19
00:01:21,169 --> 00:01:25,146
Угловой сам состоит из нескольких библиотек,

20
00:01:25,146 --> 00:01:30,585
некоторые из них называются библиотеками, а другие являются необязательными библиотеками.

21
00:01:30,585 --> 00:01:35,389
В зависимости от типа углового приложения, которое вы пытаетесь создать,

22
00:01:35,389 --> 00:01:38,910
вы включите некоторые из них в свое приложение.

23
00:01:38,910 --> 00:01:44,510
Как мы уже узнали, Angular - это фреймворк JavaScript, и

24
00:01:44,510 --> 00:01:48,610
мы будем использовать его для создания нашего приложения.

25
00:01:49,715 --> 00:01:56,800
Подводя итог, угловое приложение является модульным по своему характеру и будет состоять из

26
00:01:56,800 --> 00:02:03,160
нескольких компонентов, вместе с их шаблонами, которые составляют приложение.

27
00:02:03,160 --> 00:02:09,090
Мало того, что эти компоненты и другие части Angular приложения,

28
00:02:09,090 --> 00:02:13,060
подобные сервисы, будут организованы в модули.

29
00:02:13,060 --> 00:02:18,892
И эти модули, в свою очередь, будут использоваться модулями более высокого уровня.

30
00:02:18,892 --> 00:02:23,889
Таким образом, вы можете посмотреть на угловое приложение, являющееся модульной архитектурой

31
00:02:23,889 --> 00:02:27,822
с корневым модулем сверху,

32
00:02:27,822 --> 00:02:34,966
, который использует другие модули, организованные в вашей иерархии моделирования.

33
00:02:34,966 --> 00:02:41,170
Давайте рассмотрим наше приложение, чтобы понять, как это создается.

34
00:02:41,170 --> 00:02:45,550
Прежде чем мы продолжим, корневой модуль по умолчанию

35
00:02:45,550 --> 00:02:50,810
в Angular обычно называется модулем приложения.

36
00:02:50,810 --> 00:02:55,970
Перейдя к нашему коду, давайте начнем наше путешествие и index.html.

37
00:02:55,970 --> 00:03:03,519
Таким образом, в этом файле index.html вы можете видеть, что у нас есть типичный html код здесь,

38
00:03:03,519 --> 00:03:09,079
вместе с этой конкретной строкой, которая говорит app-root.

39
00:03:09,079 --> 00:03:15,270
Вы сразу же узнаете их, это не похоже на типичный HTML-тег.

40
00:03:15,270 --> 00:03:20,130
Итак, давайте начнем с вопроса, что это означает, и

41
00:03:20,130 --> 00:03:25,970
почему это включено в страницу index.html?

42
00:03:25,970 --> 00:03:31,090
Как мы уже видели, типичное Угловое приложение

43
00:03:31,090 --> 00:03:35,490
представляет собой иерархию модулей с корневым модулем.

44
00:03:35,490 --> 00:03:40,660
Ваше угловое приложение загружается путем загрузки корневого модуля

45
00:03:40,660 --> 00:03:42,520
для запуска приложения.

46
00:03:42,520 --> 00:03:46,430
Итак, как мы загружаем угловое приложение?

47
00:03:46,430 --> 00:03:53,566
Мы уже видели страницу index.html, и вы видели там элемент, называемый app-root.

48
00:03:53,566 --> 00:03:58,306
Итак, давайте зададим себе еще несколько вопросов.

49
00:03:58,306 --> 00:04:03,102
Сопутником страницы index.html является файл main.ts.

50
00:04:03,102 --> 00:04:07,602
Если вы откроете этот файл, вы увидите, что он содержит набор

51
00:04:07,602 --> 00:04:12,790
операторов импорта в TypeScript, как написано здесь.

52
00:04:12,790 --> 00:04:16,460
Давайте не будем слишком много вдаваться в детали, но

53
00:04:16,460 --> 00:04:20,160
я вернусь, чтобы объяснить это в ближайшее время.

54
00:04:20,160 --> 00:04:21,652
Но, в частности,

55
00:04:21,652 --> 00:04:27,017
позвольте мне обратить ваше внимание на эту конкретную строку в файле main.ts.

56
00:04:27,017 --> 00:04:31,600
Который говорит platformBrowserDynamic () .bootstrapModule

57
00:04:31,600 --> 00:04:36,277
, а затем обратите внимание на параметр здесь, который говорит (AppModule).

58
00:04:36,277 --> 00:04:41,075
Итак, как я уже упоминал, ранее модуль приложения - это типичное имя

59
00:04:41,075 --> 00:04:45,985
, данное корневому модулю в угловом приложении.

60
00:04:45,985 --> 00:04:48,643
Если вы посмотрите на иерархию файлов,

61
00:04:48,643 --> 00:04:52,867
вы уже видите файл с именем app_module.ts.

62
00:04:52,867 --> 00:04:57,131
Мы собираемся посетить этот файл за короткое время, чтобы увидеть, что он содержит.

63
00:04:57,131 --> 00:04:59,877
Теперь, возвращаясь к этим импортам,

64
00:04:59,877 --> 00:05:05,250
вы можете видеть, что давайте возьмем пример первого импорта здесь.

65
00:05:05,250 --> 00:05:10,330
Он говорит, что импорт enableProdMode из '@angular /core'.

66
00:05:10,330 --> 00:05:15,740
Таким образом, это указывает, что мы будем импортировать этот конкретный модуль

67
00:05:15,740 --> 00:05:19,970
из библиотеки Angular Core.

68
00:05:19,970 --> 00:05:24,820
И аналогичным образом, вы видите второй, говорящий об импорте platformBrowserDynamic

69
00:05:24,820 --> 00:05:28,040
из '@angular /platform-browser-dynamic'.

70
00:05:28,040 --> 00:05:32,500
Таким образом, из этой библиотеки вы импортируете этот модуль на место.

71
00:05:32,500 --> 00:05:37,896
Теперь модуль platformBrowserDynamic позволяет вам загружать

72
00:05:37,896 --> 00:05:44,100
ваше угловое приложение, взяв ваш корневой модуль в качестве параметра.

73
00:05:44,100 --> 00:05:51,237
Очевидно, что есть много других файлов в этой папке и подпапках там.

74
00:05:51,237 --> 00:05:55,534
Давайте не будем слишком беспокоиться о них в данный момент.

75
00:05:55,534 --> 00:05:59,900
Мы узнаем о некоторых из них по мере прохождения этого курса.

76
00:05:59,900 --> 00:06:05,868
Теперь Angular CLI помогает создать эту иерархию папок и

77
00:06:05,868 --> 00:06:09,848
файлов, с необходимыми настройками для

78
00:06:09,848 --> 00:06:16,768
, чтобы иметь возможность загружать угловое приложение и начать работу.

79
00:06:16,768 --> 00:06:20,233
Делать это вручную — немного утомительная задача.

80
00:06:20,233 --> 00:06:24,811
Таким образом, Angular CLI упрощает подготовку

81
00:06:24,811 --> 00:06:29,460
папки для вашего приложения Angular.

82
00:06:29,460 --> 00:06:36,210
Итак, снова, перейдя в файл app_module.ts.

83
00:06:36,210 --> 00:06:41,820
Как я уже упоминал, это корневой модуль для вашего углового приложения.

84
00:06:41,820 --> 00:06:47,912
Теперь, как правило, корневой модуль будет именоваться как файл app.module,

85
00:06:47,912 --> 00:06:51,915
, но это только предлагаемое имя в Angular.

86
00:06:51,915 --> 00:06:57,627
Вы увидите, что многие из файлов, которые составляют угловое приложение,

87
00:06:57,627 --> 00:07:01,297
есть предлагаемые способы именования этих файлов.

88
00:07:01,297 --> 00:07:05,889
По мере прохождения курса мы узнаем конкретно о каждом из этих

89
00:07:05,889 --> 00:07:06,720
файлов.

90
00:07:06,720 --> 00:07:11,032
Итак, взглянув на содержимое app_module.ts,

91
00:07:11,032 --> 00:07:15,790
внутри там вы видите набор операторов импорта.

92
00:07:15,790 --> 00:07:19,213
Кратко взглянув на них, он говорит, что импорт {BrowserModule} из

93
00:07:19,213 --> 00:07:21,740
'@angular -platform-browser'.

94
00:07:21,740 --> 00:07:25,039
Импорт {NgModule} из '@angular /core'.

95
00:07:25,039 --> 00:07:29,550
И NgModule является угловым модулем.

96
00:07:29,550 --> 00:07:34,070
Мы узнаем немного больше об этом позже.

97
00:07:34,070 --> 00:07:38,532
Кроме того, вы видите еще один оператор импорта здесь,

98
00:07:38,532 --> 00:07:44,159
, который говорит импорт {AppComponent} из './app.component '.

99
00:07:44,159 --> 00:07:47,309
И взглянув на файлы здесь,

100
00:07:47,309 --> 00:07:52,141
вы уже видите app.component.tsfileware, а

101
00:07:52,141 --> 00:07:58,863
то несколько других файлов здесь, включая app.component.acss,

102
00:07:58,863 --> 00:08:02,972
app.component.acss и другие файлы.

103
00:08:02,972 --> 00:08:10,939
Теперь это утверждение указывает, что этот корневой модуль будет включать этот компонент

104
00:08:10,939 --> 00:08:17,640
и будет формировать корневой комплимент вашего углового приложения.

105
00:08:17,640 --> 00:08:22,450
Типичное угловое приложение, как мы видели, состоит из ряда

106
00:08:22,450 --> 00:08:27,330
модулей с корневым модулем в качестве основного модуля,

107
00:08:27,330 --> 00:08:31,360
, который помогает вам загрузить ваше угловое приложение.

108
00:08:31,360 --> 00:08:38,970
Корневой модуль является угловым модулем с функцией или является классом.

109
00:08:38,970 --> 00:08:44,690
Итак, вот где вы видите использование класса TypeScript здесь,

110
00:08:44,690 --> 00:08:49,380
, поэтому, если вы спуститесь в красный модуль ниже, вы увидите

111
00:08:49,380 --> 00:08:53,485
это заявление под названием export class AppModule.

112
00:08:53,485 --> 00:08:59,550
TypeScript добавляет классы в ваш типичный код JavaScript.

113
00:08:59,550 --> 00:09:03,085
Если вы знакомы только с ES-5 JavaScript,

114
00:09:03,085 --> 00:09:06,873
то классы там еще не введены, но

115
00:09:06,873 --> 00:09:11,942
новые версии JavaScript будут вводить поддержку классов.

116
00:09:11,942 --> 00:09:14,971
TypeScript также поддерживает классы.

117
00:09:14,971 --> 00:09:18,651
Так что если у вас есть опыт работы с объектно-ориентированным программированием,

118
00:09:18,651 --> 00:09:21,139
вы уже знакомы с классами.

119
00:09:21,139 --> 00:09:27,106
Таким образом, такой подход внедряется в JavaScript с введением

120
00:09:27,106 --> 00:09:31,750
классов в TypeScript и будущих версиях JavaScript.

121
00:09:31,750 --> 00:09:37,028
Кроме того, вы заметите, что этот класс имеет

122
00:09:37,028 --> 00:09:42,314
декоратор Ngmodule, связанный с этим.

123
00:09:42,314 --> 00:09:47,312
Таким образом, декоратор - это, опять же, функция

124
00:09:47,312 --> 00:09:51,874
, которая изменяет классы JavaScript.

125
00:09:51,874 --> 00:09:59,254
Мы увидим использование декораторов во многих местах в нашем угловом приложении.

126
00:09:59,254 --> 00:10:00,980
Это Ngmodule.

127
00:10:00,980 --> 00:10:05,850
Декоратор этого позволяет вам указать некоторые подробности об этом модуле приложения

128
00:10:05,850 --> 00:10:06,797
.

129
00:10:06,797 --> 00:10:12,398
Таким образом, эта функция декоратора принимает определенный набор

130
00:10:12,398 --> 00:10:18,295
метаданных, чтобы помочь вам описать этот модуль.

131
00:10:18,295 --> 00:10:23,232
Таким образом, этот объект метаданных здесь содержит, как вы можете видеть,

132
00:10:23,232 --> 00:10:28,430
объявления, импорт, провайдеры, бутстрап.

133
00:10:28,430 --> 00:10:33,080
И также будет содержать экспорт, если этот модуль экспортирует что-то, что может быть

134
00:10:33,080 --> 00:10:35,110
использован другим модулем.

135
00:10:35,110 --> 00:10:41,734
Поскольку это корневой модуль, у нас нет экспорта из этого модуля.

136
00:10:41,734 --> 00:10:47,418
Таким образом, вместо этого у нас есть только декларации, импорт, поставщики и бутстрап.

137
00:10:47,418 --> 00:10:52,243
Итак, вот этот довольно прямолинейный, чтобы понять.

138
00:10:52,243 --> 00:10:57,280
Он указывает, что для загрузки этого углового приложения

139
00:10:57,280 --> 00:11:00,713
нам нужно загрузить AppComponent.

140
00:11:00,713 --> 00:11:07,008
Таким образом, AppComponent является корневым компонентом нашего углового приложения.

141
00:11:07,008 --> 00:11:13,595
Кроме того, часть импорта определяет свойства,

142
00:11:13,595 --> 00:11:22,040
видя, что все эти модули должны быть импортированы для использования с этим модулем приложения.

143
00:11:22,040 --> 00:11:25,770
Таким образом, этот модуль приложения теперь зависит от этих других модулей.

144
00:11:25,770 --> 00:11:30,917
Таким образом, это модули, которые будут импортированы в модуль приложения как

145
00:11:30,917 --> 00:11:36,494
часть иерархии, поэтому причина, по которой мы импортировали эти модули здесь.

146
00:11:36,494 --> 00:11:38,451
Поэтому, когда вы импортируете модули,

147
00:11:38,451 --> 00:11:43,324
вы указываете здесь, говоря, что модуль приложения будет использовать этот модуль.

148
00:11:43,324 --> 00:11:48,462
Таким образом, свойство import указывает те модули, которые должны быть импортированы, или

149
00:11:48,462 --> 00:11:53,040
те модули, от которых зависит этот конкретный модуль.

150
00:11:53,040 --> 00:11:58,398
Объявления здесь, свойство деклараций,

151
00:11:58,398 --> 00:12:02,940
является свойство, которое объявляет классы представлений

152
00:12:02,940 --> 00:12:06,910
, которые принадлежат этому конкретному модулю.

153
00:12:06,910 --> 00:12:10,584
Таким образом, классы представлений в случае углового модуля будут

154
00:12:10,584 --> 00:12:15,018
в виде компонентов, директив и труб.

155
00:12:15,018 --> 00:12:20,789
Мы поговорим о директивах и трубах немного позже в этом курсе,

156
00:12:20,789 --> 00:12:24,416
мы поговорим о компонентах в следующем уроке.

157
00:12:24,416 --> 00:12:28,590
Поставщики указывают все услуги, которыми будет пользоваться этот

158
00:12:28,590 --> 00:12:31,753
конкретный модуль.

159
00:12:31,753 --> 00:12:36,592
Услуги, о которых мы поговорим чуть более подробно в модуле

160
00:12:36,592 --> 00:12:39,235
на следующей неделе.

161
00:12:39,235 --> 00:12:42,510
Мы поговорим больше о сервисах, как мы их создаем,

162
00:12:42,510 --> 00:12:46,810
и как мы можем использовать их с нашим приложением Angular.

163
00:12:46,810 --> 00:12:52,091
Чтобы обобщить то, что мы узнали до сих пор, мы понимаем, что модуль

164
00:12:52,091 --> 00:12:57,373
в угловом приложении может состоять из набора компонентов и сервисов

165
00:12:57,373 --> 00:13:02,671
, которые будут требоваться от этого модуля путем их импорта.

166
00:13:02,671 --> 00:13:09,461
И они будут объявлены с помощью свойства деклараций

167
00:13:09,461 --> 00:13:15,220
декоратора Ngmodule в нашем модуле приложения.

168
00:13:15,220 --> 00:13:19,845
Теперь сами эти компоненты могут зависеть от

169
00:13:19,845 --> 00:13:24,178
других компонентов, услуг или директив, или

170
00:13:24,178 --> 00:13:29,115
труб, как мы увидим в остальной части этого конкретного курса.

171
00:13:29,115 --> 00:13:37,212
Таким образом, у нас есть примерное представление о том, как структурировано типичное угловое приложение.

172
00:13:37,212 --> 00:13:42,247
Возвращаясь к нашему коду, пришло время изучить

173
00:13:42,247 --> 00:13:48,691
этот файл app.component.ts и файл app.component.html.

174
00:13:48,691 --> 00:13:53,502
Который объявляет шаблон для нашего компонента,

175
00:13:53,502 --> 00:13:57,022
и файл app.component.ts,

176
00:13:57,022 --> 00:14:02,547
, который определяет TypeScript часть нашего компонента.

177
00:14:02,547 --> 00:14:08,157
Теперь мы сделаем это в следующем уроке, где мы будем иметь дело с компонентами и

178
00:14:08,157 --> 00:14:13,436
, как мы можем создавать новые компоненты и добавлять их в наше угловое приложение.

179
00:14:13,436 --> 00:14:16,815
[МУЗЫКА]