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

2
00:00:04,974 --> 00:00:08,004
Давайте теперь начнем говорить об угловой маршрутизации.

3
00:00:08,004 --> 00:00:11,348
Это маршрутизация или она укореняется?

4
00:00:11,348 --> 00:00:13,806
Я буду укореняться за маршрутизацию.

5
00:00:13,806 --> 00:00:18,397
Поэтому отныне я буду произносить все это как маршрутизация,

6
00:00:18,397 --> 00:00:21,400
маршруты, маршрутизатор и так далее.

7
00:00:21,400 --> 00:00:25,630
Если вы случайно находитесь из области, где на английском языке вы произносите его как маршрут или

8
00:00:25,630 --> 00:00:27,060
маршрутизатор, пожалуйста, несите меня.

9
00:00:28,200 --> 00:00:33,610
Итак, что такое Угловая маршрутизация и как она нам помогает?

10
00:00:33,610 --> 00:00:37,290
С точки зрения углового приложения, которое мы видели до сих пор

11
00:00:37,290 --> 00:00:41,310
, мы никогда не видели использования для маршрутизации.

12
00:00:41,310 --> 00:00:44,913
Мы видели, что мы можем разработать угловое приложение с

13
00:00:44,913 --> 00:00:49,235
несколькими компонентами, а затем использовать их один внутри другого, и

14
00:00:49,235 --> 00:00:53,794
разработать целое угловое приложение, даже не говоря о маршрутизации.

15
00:00:53,794 --> 00:00:58,116
Теперь предположим, что у вас есть несколько компонентов и

16
00:00:58,116 --> 00:01:03,233
вы хотите иметь возможность перемещаться между компонентами в

17
00:01:03,233 --> 00:01:08,350
таким образом, что вы можете вызвать эту навигацию, например

18
00:01:08,350 --> 00:01:13,352
, нажав на ссылки или кнопки в вашем пользовательском интерфейсе и

19
00:01:13,352 --> 00:01:19,720
иметь возможность отображать различные представления на экране вашего приложения,

20
00:01:19,720 --> 00:01:23,959
затем Угловая маршрутизация приходит вам на помощь.

21
00:01:23,959 --> 00:01:28,633
Мы увидим, как мы можем использовать маршрутизацию для разработки чего-то называемого одностраничных приложений

22
00:01:28,633 --> 00:01:30,120
.

23
00:01:30,120 --> 00:01:34,390
Мы поговорим о одностраничных приложениях в следующем уроке.

24
00:01:34,390 --> 00:01:38,540
Но на данный момент давайте сосредоточимся на Angular Routing и

25
00:01:38,540 --> 00:01:42,350
специально для Route модуль, который доступен в Angular.

26
00:01:43,610 --> 00:01:48,150
Сам модуль маршрутизатора отделен от модуля Angular Core, поэтому

27
00:01:48,150 --> 00:01:53,220
он доступен как отдельный модуль, и вам нужно будет импортировать его явно

28
00:01:53,220 --> 00:01:59,170
в ваше угловое приложение, чтобы использовать поддерживаемую модель углового маршрутизатора

29
00:01:59,170 --> 00:02:04,360
для навигации по радиусу

30
00:02:04,360 --> 00:02:09,440
виды вне компонентов радиуса, которые являются частью вашего углового хищника.

31
00:02:10,460 --> 00:02:14,820
Итак, в рамках упражнения мы добавим несколько компонентов и

32
00:02:14,820 --> 00:02:21,060
мы увидим, как мы можем перемещаться между ними с помощью углового маршрутизатора.

33
00:02:23,020 --> 00:02:26,800
Так как я уже упоминал, угловой маршрутизатор

34
00:02:26,800 --> 00:02:30,280
позволяет навигацию между различными представлениями.

35
00:02:30,280 --> 00:02:35,660
Таким образом, вы можете включить эту навигацию в

36
00:02:35,660 --> 00:02:40,870
ссылки или кнопки на панели инструментов и

37
00:02:40,870 --> 00:02:45,610
так далее, что вы можете включить в пользовательский интерфейс вашего углового приложения и

38
00:02:45,610 --> 00:02:49,810
то вы можете вызвать навигацию из одного представления в другое представление

39
00:02:49,810 --> 00:02:54,320
, нажав на ссылку или кнопку в ваш пользовательский интерфейс.

40
00:02:55,360 --> 00:03:00,611
Это где Угловой маршрутизатор использует URL-адрес браузера и

41
00:03:00,611 --> 00:03:04,018
он использует URL-адрес браузера в качестве инструкции для

42
00:03:04,018 --> 00:03:08,179
для навигации между радиально генерируемыми представлениями клиента.

43
00:03:08,179 --> 00:03:12,857
Все эти представления обычно поддерживаются несколькими компонентами

44
00:03:12,857 --> 00:03:15,982
, которые формируют жесткую часть вашего углового приложения.

45
00:03:15,982 --> 00:03:19,289
Теперь, когда вы перемещаетесь из одного представления в другое представление,

46
00:03:19,289 --> 00:03:22,906
вы также можете передать необязательные параметры этим представлениям.

47
00:03:22,906 --> 00:03:26,307
Как мы узнали на предыдущем слайде,

48
00:03:26,307 --> 00:03:31,305
Угловой маршрутизатор использует URL-адрес для того, чтобы

49
00:03:31,305 --> 00:03:36,856
позволить ему распознавать необходимость навигации между серединой.

50
00:03:36,856 --> 00:03:40,775
Итак, здесь Угловой маршрутизатор использует то, что

51
00:03:40,775 --> 00:03:44,704
уже поддерживается в HTML5 через API истории?

52
00:03:44,704 --> 00:03:47,990
Итак, что позволяет нам делать API истории?

53
00:03:47,990 --> 00:03:52,156
Это дает разработчикам возможность изменять URL-адрес сайта

54
00:03:52,156 --> 00:03:56,766
, не вызывая обновления страницы.

55
00:03:56,766 --> 00:04:03,806
Теперь, если вы привыкли посещать различные веб-сайты в вашем браузере,

56
00:04:03,806 --> 00:04:10,078
вы обычно либо нажимаете на панель закладок, либо

57
00:04:10,078 --> 00:04:20,063
по ссылке на странице, либо явно вводите URL-адрес в адресную строку вашего браузера.

58
00:04:20,063 --> 00:04:25,310
Теперь, когда вы это делаете, вы явно указываете URL там.

59
00:04:25,310 --> 00:04:27,152
Теперь, когда вы указываете URL,

60
00:04:27,152 --> 00:04:31,470
вы запускаете ваш браузер, чтобы автоматически перейти на сервер и

61
00:04:31,470 --> 00:04:37,070
получить эту новую страницу и отобразить страницу в окне браузера.

62
00:04:37,070 --> 00:04:43,180
Теперь, если он может подавить эту необходимость, чтобы перейти на сервер и получить информацию, но

63
00:04:43,180 --> 00:04:49,280
вместо этого изменить URL-адрес, не вызывая обновления этой страницы,

64
00:04:49,280 --> 00:04:54,450
, тогда мы можем воспользоваться этим, чтобы позволить нам иметь возможность перемещаться

65
00:04:54,450 --> 00:04:59,620
среди представлений, которые являются частью одного приложения и

66
00:04:59,620 --> 00:05:03,890
это то, где мы берем преимущество HTML5.

67
00:05:03,890 --> 00:05:09,034
API истории, который поддерживает такие методы, как pushState и replaceState.

68
00:05:09,034 --> 00:05:13,662
Таким образом, pushState позволяет добавлять запись истории в историю браузера

69
00:05:13,662 --> 00:05:18,494
без фактического обновления страницы.

70
00:05:18,494 --> 00:05:21,938
Аналогично, replaceState изменит

71
00:05:21,938 --> 00:05:26,810
существующую запись истории в истории вашего браузера.

72
00:05:26,810 --> 00:05:30,551
Таким образом, вы даже можете использовать кнопку Назад и

73
00:05:30,551 --> 00:05:35,724
вперед вашего браузера, чтобы иметь возможность двигаться назад и

74
00:05:35,724 --> 00:05:41,030
вперед среди URL-адресов, не вызывая обновления страницы.

75
00:05:41,030 --> 00:05:45,905
Теперь, здесь вам нужно указать что-то в индексе HTML

76
00:05:45,905 --> 00:05:47,458
страницы, называемой базой.

77
00:05:47,458 --> 00:05:52,489
Поэтому, когда API истории HTML использует эти методы,

78
00:05:52,489 --> 00:05:57,307
, то для модификации вам нужно указать базу

79
00:05:57,307 --> 00:06:02,875
местоположение, откуда вы указываете дополнительные части

80
00:06:02,875 --> 00:06:07,930
вашего URL-пути, что не приведет к обновлению страницы.

81
00:06:07,930 --> 00:06:10,580
Так что в этом случае, для нашего углового приложения,

82
00:06:10,580 --> 00:06:12,378
это всегда начинается с корня.

83
00:06:12,378 --> 00:06:17,829
Итак, вот почему мы указываем базу как href=»/».

84
00:06:17,829 --> 00:06:22,581
Все остальное, что приходит после этого в URL-адресе, будет обрабатываться

85
00:06:22,581 --> 00:06:27,750
в вашем угловом приложении как что-то, что

86
00:06:27,750 --> 00:06:33,228
вызывает навигацию, которая обрабатывается самим угловым маршрутизатором

87
00:06:33,228 --> 00:06:39,080
, не заставляя ваш браузер нуждаться в обновлении с сервера.

88
00:06:39,080 --> 00:06:44,240
Таким образом, угловой маршрутизатор использует преимущества API истории HTML5.

89
00:06:45,300 --> 00:06:47,766
Теперь, если у вас нет API истории,

90
00:06:47,766 --> 00:06:51,295
другой способ сделать навигацию - использовать хэштеги.

91
00:06:51,295 --> 00:06:56,558
Вы уже знаете, что в HTML, если вы укажете какую-либо ссылку, начинающуюся

92
00:06:56,558 --> 00:07:01,543
с хэштега, которая ссылается на ссылку на той же странице.

93
00:07:01,543 --> 00:07:05,782
Поэтому, когда вы нажимаете на такие ссылки, это не вызовет обновления страницы.

94
00:07:05,782 --> 00:07:09,944
Вместо этого он перенаправит вас в другое место на той же странице.

95
00:07:09,944 --> 00:07:12,256
Итак, это еще один способ делать вещи.

96
00:07:12,256 --> 00:07:17,030
Но для чистого рендеринга HTML5 API поддерживает этот API истории

97
00:07:17,030 --> 00:07:22,012
, который позволяет вам манипулировать историей

98
00:07:22,012 --> 00:07:26,087
вашего браузера, не вызывая обновления страницы.

99
00:07:26,087 --> 00:07:28,616
После этого длинного объяснения

100
00:07:28,616 --> 00:07:33,049
давайте возьмем пример, чтобы помочь нам понять это еще дальше.

101
00:07:33,049 --> 00:07:39,752
Предположим, вы определяете свой URL, как это скажем, например, example.abc.com/home.

102
00:07:39,752 --> 00:07:43,325
Теперь с API истории HTML5,

103
00:07:43,325 --> 00:07:48,301
вы можете просто взять эту последнюю часть URL и

104
00:07:48,301 --> 00:07:56,988
изменить это на другой URL, как я показал здесь с example.abc.com/menu.

105
00:07:56,988 --> 00:08:03,054
Таким образом, вы видите, что URL-адрес теперь был изменен от косой черты до слэша меню,

106
00:08:03,054 --> 00:08:08,624
это изменение может быть вызвано с помощью метода push state API истории HTML5

107
00:08:08,624 --> 00:08:14,216
без, как я уже упоминал, без перезагрузки страницы.

108
00:08:14,216 --> 00:08:18,533
Вместо этого это будет внутренний триггер для навигации

109
00:08:18,533 --> 00:08:24,842
, который Угловой маршрутизатор явно использует преимущества для

110
00:08:24,842 --> 00:08:32,161
, поддерживая навигацию между различными представлениями вашего углового приложения.

111
00:08:32,161 --> 00:08:36,828
Теперь, очевидно, вы должны быть заинтересованы в том, как Угловой маршрутизатор использует

112
00:08:36,828 --> 00:08:37,376
этого.

113
00:08:37,376 --> 00:08:42,868
Таким образом, здесь Угловой маршрутизатор использует манипуляцию историей

114
00:08:42,868 --> 00:08:47,917
для изменения URL-адреса браузера без запуска обновления страницы.

115
00:08:47,917 --> 00:08:49,485
Давайте возьмем пример.

116
00:08:49,485 --> 00:08:56,933
Предположим, что у вас есть угловое приложение, проживающее по этому конкретному URL-адресу.

117
00:08:56,933 --> 00:09:01,809
Теперь так бывает, что угловое приложение, над которым вы работаете

118
00:09:01,809 --> 00:09:06,784
, отображается в браузере, обратившись к нему по этому конкретному URL-адресу.

119
00:09:06,784 --> 00:09:13,430
Таким образом, это поможет нам быстро понять, что позволяет нам делать угловой маршрутизатор.

120
00:09:13,430 --> 00:09:19,790
Таким образом, в этом случае, когда вы вводите это в свой URL-адрес браузера,

121
00:09:19,790 --> 00:09:24,160
вы можете легко настроить, чтобы перенаправить вас

122
00:09:24,160 --> 00:09:29,210
на местоположение по умолчанию в вашем угловом приложении.

123
00:09:29,210 --> 00:09:33,433
Как правило, напомни мне, что что-то вроде дома.

124
00:09:33,433 --> 00:09:38,606
Так что приведет вас к точке входа по умолчанию для

125
00:09:38,606 --> 00:09:42,303
вашего углового приложения, которое для

126
00:09:42,303 --> 00:09:48,109
ради легкого понимания, я пометку его как /home.

127
00:09:48,109 --> 00:09:53,175
Поэтому, если ваш URL-адрес содержит локальный хост: 4200/home,

128
00:09:53,175 --> 00:09:58,249
это означает, что вы находитесь в своем домашнем местоположении по умолчанию.

129
00:09:58,249 --> 00:10:01,519
Теперь, когда эта навигация запускается,

130
00:10:01,519 --> 00:10:07,384
вы можете позволить своему угловатому маршрутизатору автоматически вывести вас в представление, например

131
00:10:07,384 --> 00:10:12,017
, которое поддерживается этим домашним компонентом.

132
00:10:12,017 --> 00:10:16,963
Таким образом, когда URL становится локальным: 4200/home,

133
00:10:16,963 --> 00:10:24,605
вы автоматически визуализируете вид домашнего компонента на экране браузера.

134
00:10:24,605 --> 00:10:30,601
Очень точно, когда вы разместите представление, которое мы рассмотрим на следующем слайде и

135
00:10:30,601 --> 00:10:33,086
в следующем упражнении.

136
00:10:33,086 --> 00:10:37,903
Аналогично, вы можете иметь другие представления в вашем приложении Angular

137
00:10:37,903 --> 00:10:42,821
, которые также могут поддерживаться через другие URL-адреса

138
00:10:42,821 --> 00:10:47,153
, которые являются расширениями localhost:4200.

139
00:10:47,153 --> 00:10:53,354
Так, например, если URL локальный: 4200/aboutus, то это

140
00:10:53,354 --> 00:11:00,410
может привести вас к отображению представления, которое отображается AboutComponent.

141
00:11:00,410 --> 00:11:05,070
И так же, меню покажет вам MenuComponent и так далее.

142
00:11:06,320 --> 00:11:09,088
Итак, что это позволяет нам сделать, это

143
00:11:09,088 --> 00:11:14,624
в зависимости от того, что URL используется в вашем браузере

144
00:11:14,624 --> 00:11:19,956
вы будете использовать это для автоматического перемещения между различными видами

145
00:11:19,956 --> 00:11:25,515
ваших различных компонентов вашего углового приложения.

146
00:11:25,515 --> 00:11:27,968
Теперь вам не нужно явно беспокоиться об этом.

147
00:11:27,968 --> 00:11:33,200
Если настроить Угловой маршрутизатор таким образом, чтобы заботиться обо всем этом, то маршрутизатор

148
00:11:33,200 --> 00:11:38,273
автоматически позаботится о том, чтобы обеспечить вам навигацию между этими компонентами

149
00:11:38,273 --> 00:11:43,957
, как мы видим в упражнении, которое следует за этой конкретной лекцией.

150
00:11:43,957 --> 00:11:48,407
Теперь, прежде чем перейти к упражнению, где мы узнаем больше об

151
00:11:48,407 --> 00:11:53,017
угловом маршрутизаторе, позвольте мне быстро обратить ваше внимание на несколько терминов

152
00:11:53,017 --> 00:11:57,945
в Угловом маршрутизаторе, с которыми вы столкнетесь во время упражнения и

153
00:11:57,945 --> 00:12:01,759
Я хотел бы, чтобы вы уделили особое внимание этим терминам

154
00:12:01,759 --> 00:12:07,357
, потому что они имеют решающее значение для понимания того, как на самом деле работает Угловой маршрутизатор.

155
00:12:07,357 --> 00:12:13,205
Таким образом, вы сначала увидите, что при разработке углового маршрутизатора

156
00:12:13,205 --> 00:12:18,042
мы будем использовать эту помощь модуля маршрутизатора, который

157
00:12:18,042 --> 00:12:22,669
является частью библиотеки углового косой черты маршрутизатора.

158
00:12:22,669 --> 00:12:28,094
Итак, мы собираемся импортировать модуль маршрутизатора в или угловое приложение

159
00:12:28,094 --> 00:12:32,690
в модуль приложения, а затем мы также будем импортировать маршруты.

160
00:12:32,690 --> 00:12:37,716
Таким образом, маршруты позволяют нам определить различные маршруты, которые использует наше

161
00:12:37,716 --> 00:12:43,335
Angular приложение или Angular Router.

162
00:12:43,335 --> 00:12:49,047
Таким образом, в этом случае мы будем указывать маршруты в виде пути и

163
00:12:49,047 --> 00:12:51,585
соответствующего компонента.

164
00:12:51,585 --> 00:12:56,299
Итак, как вы видели на предыдущем слайде, вы видели, что каждое из этих расширений URL

165
00:12:56,299 --> 00:13:00,951
сопоставляется с представлением конкретного компонента.

166
00:13:00,951 --> 00:13:05,729
Таким образом, такая информация предоставляется этому Угловому маршрутизатору

167
00:13:05,729 --> 00:13:09,885
через маршруты, и все эти маршруты указаны с использованием

168
00:13:09,885 --> 00:13:14,139
объекта JavaScript, как этот путь с двумя свойствами.

169
00:13:14,139 --> 00:13:18,470
Путь и компонент и некоторые дополнительные свойства, которые мы не встретим

170
00:13:18,470 --> 00:13:22,970
прямо сейчас, но мы увидим в некоторых из последующих упражнений.

171
00:13:24,610 --> 00:13:28,531
Кроме того, второй вопрос, который вы хотели бы спросить, где это представление будет отображаться

172
00:13:28,531 --> 00:13:30,657
в вашем угловом приложении?

173
00:13:30,657 --> 00:13:35,863
Это где в нашем шаблоне нашего компонента приложения

174
00:13:35,863 --> 00:13:43,286
мы будем включать директиву называется routerOutlet, который указан как вы

175
00:13:43,286 --> 00:13:48,628
видите как <router-outlet> и. </router-outlet>

176
00:13:48,628 --> 00:13:54,890
Это будет включено в файл шаблона компонента приложения,

177
00:13:54,890 --> 00:13:59,188
теперь ваш Угловой маршрутизатор переходит в

178
00:13:59,188 --> 00:14:04,484
различные представления различных компонентов.

179
00:14:04,484 --> 00:14:08,899
Соответствующее представление компонента будет включено в представление приложений

180
00:14:08,899 --> 00:14:13,633
, где бы вы ни указали эту конкретную розетку маршрутизатора.

181
00:14:13,633 --> 00:14:17,773
Итак, следите за этим в следующем упражнении.

182
00:14:17,773 --> 00:14:22,752
Кроме того, чтобы вызвать навигацию, вы увидите, что

183
00:14:22,752 --> 00:14:27,743
со многими тегами, которые используются в приложении.

184
00:14:27,743 --> 00:14:32,429
Так, например, я бы включу настройку тегов с кнопкой MD

185
00:14:32,429 --> 00:14:36,820
Компонент углового материала на панели инструментов,

186
00:14:36,820 --> 00:14:41,327
в компоненте заголовка нашего углового приложения.

187
00:14:41,327 --> 00:14:44,635
Я бы связал теги с другой директивой,

188
00:14:44,635 --> 00:14:47,437
директива атрибута под названием routerLink.

189
00:14:47,437 --> 00:14:53,260
routerLink является фактической директивой, что модуль маршрутизатора предоставляет нам.

190
00:14:53,260 --> 00:14:57,966
Эта ссылка маршрутизатора позволяет нам указать путь, как, например,

191
00:14:57,966 --> 00:15:00,783
написанные коды, я вижу «/menu».

192
00:15:00,783 --> 00:15:05,677
Вы можете иметь более подробную информацию, чем это для routerLink.

193
00:15:05,677 --> 00:15:11,646
Но для упражнения, мы начнем с простого примера, где мы бы имели,

194
00:15:11,646 --> 00:15:15,806
например, /menu косой чертой дома связаться с нами и поэтому

195
00:15:15,806 --> 00:15:19,976
на указано, используя атрибут routerLink напрямую.

196
00:15:19,976 --> 00:15:25,212
Поэтому, когда вы нажимаете на ссылку, подобную этой на панели инструментов,

197
00:15:25,212 --> 00:15:31,281
, это вызовет угловой маршрутизатор, чтобы вызвать изменение или

198
00:15:31,281 --> 00:15:39,502
навигацию к определенному виду, который поддерживается модулем Угловой маршрутизатор.

199
00:15:39,502 --> 00:15:45,391
Таким образом, сопоставление между этой ссылкой и соответствующими компонентами

200
00:15:45,391 --> 00:15:51,800
уже указано в маршруте, который мы даем нашему угловому приложению.

201
00:15:51,800 --> 00:15:56,715
Итак, следите за всеми этими вещами, когда вы делаете упражнение.

202
00:15:56,715 --> 00:16:00,895
Я объясню некоторые из этих вещей и причину

203
00:16:00,895 --> 00:16:07,366
делать их, пока мы делаем шаги упражнения, которое следует за этим уроком.

204
00:16:07,366 --> 00:16:11,099
[МУЗЫКА]