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

2
00:00:04,974 --> 00:00:08,004
Empecemos ahora a hablar de Ruteo Angular.

3
00:00:08,004 --> 00:00:11,348
¿Está enrutando o está enraizando?

4
00:00:11,348 --> 00:00:13,806
Voy a estar enraizando para el enrutamiento.

5
00:00:13,806 --> 00:00:18,397
Así que de ahora en adelante, pronunciaré todos estos como enrutamiento, rutas

6
00:00:18,397 --> 00:00:21,400
, enrutador y así sucesivamente.

7
00:00:21,400 --> 00:00:25,630
Si eres de un área donde en inglés lo pronuncias como ruta o

8
00:00:25,630 --> 00:00:27,060
router, por favor ten conmigo.

9
00:00:28,200 --> 00:00:33,610
Entonces, ¿qué es exactamente el enrutamiento angular y cómo nos ayuda?

10
00:00:33,610 --> 00:00:37,290
En términos de la aplicación Angular que hemos visto hasta ahora

11
00:00:37,290 --> 00:00:41,310
, nunca hemos visto el uso para el enrutamiento.

12
00:00:41,310 --> 00:00:44,913
Hemos visto que podemos desarrollar una aplicación angular con

13
00:00:44,913 --> 00:00:49,235
múltiples componentes y luego hacer uso de ellos uno dentro del otro, y

14
00:00:49,235 --> 00:00:53,794
desarrollar una aplicación angular completa sin siquiera hablar de enrutamiento.

15
00:00:53,794 --> 00:00:58,116
Ahora supongamos que tiene múltiples componentes y

16
00:00:58,116 --> 00:01:03,233
desea poder navegar entre los componentes en

17
00:01:03,233 --> 00:01:08,350
de una manera que puede causar esta navegación a través de, por ejemplo

18
00:01:08,350 --> 00:01:13,352
, haciendo clic en enlaces o botones en su interfaz de usuario y

19
00:01:13,352 --> 00:01:19,720
ser capaz de renderizar diferentes vistas en la pantalla de su aplicación,

20
00:01:19,720 --> 00:01:23,959
entonces El enrutamiento angular viene a su rescate.

21
00:01:23,959 --> 00:01:28,633
Veremos cómo podemos usar el enrutamiento para desarrollar algo llamado aplicaciones de página

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

23
00:01:30,120 --> 00:01:34,390
Hablaremos de aplicaciones de una sola página en la siguiente lección.

24
00:01:34,390 --> 00:01:38,540
Pero por el momento, vamos a concentrarnos en Angular Routing y

25
00:01:38,540 --> 00:01:42,350
específicamente en la Ruta un módulo que está disponible en Angular.

26
00:01:43,610 --> 00:01:48,150
El módulo de router en sí está separado del módulo de núcleo angular, por lo que

27
00:01:48,150 --> 00:01:53,220
está disponible como un módulo separado y tendrá que importarlo explícitamente

28
00:01:53,220 --> 00:01:59,170
en su aplicación Angular para hacer uso del modelo de router angular

29
00:01:59,170 --> 00:02:04,360
compatible que le proporciona para navegar entre el radio

30
00:02:04,360 --> 00:02:09,440
de los componentes de radio que forman parte de su depredación angular.

31
00:02:10,460 --> 00:02:14,820
Así que como parte del ejercicio, añadiremos múltiples componentes y

32
00:02:14,820 --> 00:02:21,060
veremos cómo podemos navegar entre ellos usando el router angular.

33
00:02:23,020 --> 00:02:26,800
Así que como ya mencioné, el enrutador angular

34
00:02:26,800 --> 00:02:30,280
permite la navegación entre varias vistas.

35
00:02:30,280 --> 00:02:35,660
De tal manera que puede incluir esta navegación en

36
00:02:35,660 --> 00:02:40,870
los enlaces o los botones basados en la barra de herramientas y

37
00:02:40,870 --> 00:02:45,610
así sucesivamente que puede incluir en la interfaz de usuario de su aplicación Angular y

38
00:02:45,610 --> 00:02:49,810
entonces puede activar la navegación de una vista a otra

39
00:02:49,810 --> 00:02:54,320
haciendo clic en el enlace o en el botón de su interfaz de usuario.

40
00:02:55,360 --> 00:03:00,611
Aquí es donde el Router Angular aprovecha la URL del navegador y

41
00:03:00,611 --> 00:03:04,018
usa la URL del navegador como una instrucción para

42
00:03:04,018 --> 00:03:08,179
para navegar entre las vistas generadas por el cliente de radio.

43
00:03:08,179 --> 00:03:12,857
Estas vistas son generalmente compatibles con los múltiples componentes

44
00:03:12,857 --> 00:03:15,982
que forman duro de su aplicación Angular.

45
00:03:15,982 --> 00:03:19,289
Ahora, cuando navega de una vista a otra,

46
00:03:19,289 --> 00:03:22,906
también puede pasar parámetros opcionales a esas vistas.

47
00:03:22,906 --> 00:03:26,307
Como aprendimos en esa diapositiva anterior,

48
00:03:26,307 --> 00:03:31,305
el Router Angular aprovecha la URL para

49
00:03:31,305 --> 00:03:36,856
permitirle reconocer la necesidad de navegar entre el medio.

50
00:03:36,856 --> 00:03:40,775
Entonces, ¿aquí es donde Angular Router aprovecha lo que

51
00:03:40,775 --> 00:03:44,704
ya es compatible con HTML5 a través de la API de historial?

52
00:03:44,704 --> 00:03:47,990
Entonces, ¿qué nos permite hacer la API de historial?

53
00:03:47,990 --> 00:03:52,156
Da a los desarrolladores la posibilidad de modificar

54
00:03:52,156 --> 00:03:56,766
la URL de un sitio web sin causar una actualización de página.

55
00:03:56,766 --> 00:04:03,806
Ahora bien, si estás acostumbrado a visitar varios sitios web en tu navegador,

56
00:04:03,806 --> 00:04:10,078
normalmente harías clic en la barra de marcadores o

57
00:04:10,078 --> 00:04:15,198
en un enlace en una página o escribirías explícitamente

58
00:04:15,198 --> 00:04:20,063
la URL en la barra de direcciones de tu navegador.

59
00:04:20,063 --> 00:04:25,310
Ahora, cuando haces eso, estás especificando explícitamente la URL allí.

60
00:04:25,310 --> 00:04:27,152
Ahora, cuando especifica una URL,

61
00:04:27,152 --> 00:04:31,470
está activando su navegador para ir automáticamente a un servidor y

62
00:04:31,470 --> 00:04:37,070
buscar esa nueva página y renderizar la página en la ventana del navegador.

63
00:04:37,070 --> 00:04:43,180
Ahora si puede suprimir esta necesidad de ir a un servidor y buscar información, pero

64
00:04:43,180 --> 00:04:49,280
en lugar de cambiar la URL sin causar esta actualización de la página,

65
00:04:49,280 --> 00:04:54,450
entonces podemos aprovechar eso para permitirnos navegar

66
00:04:54,450 --> 00:04:59,620
entre vistas que forman parte de una sola aplicación y

67
00:04:59,620 --> 00:05:03,890
aquí es donde tomamos ventaja de HTML5.

68
00:05:03,890 --> 00:05:09,034
History API que admite métodos como PushState y ReplaceState.

69
00:05:09,034 --> 00:05:13,662
Por lo tanto, PushState le permite agregar una entrada de historial en el historial de su navegador

70
00:05:13,662 --> 00:05:18,494
sin causar realmente una actualización de página.

71
00:05:18,494 --> 00:05:21,938
Del mismo modo, un ReplaceState modificará

72
00:05:21,938 --> 00:05:26,810
la entrada de historial existente en el historial de su navegador.

73
00:05:26,810 --> 00:05:30,551
Por lo tanto, incluso puede usar el botón Atrás y

74
00:05:30,551 --> 00:05:35,724
hacia adelante de su navegador para poder moverse hacia atrás y hacia atrás

75
00:05:35,724 --> 00:05:41,030
hacia adelante entre las URL sin causar una actualización de página.

76
00:05:41,030 --> 00:05:45,905
Ahora, aquí es donde necesita especificar algo dentro de su página HTML

77
00:05:45,905 --> 00:05:47,458
de índice llamado la base.

78
00:05:47,458 --> 00:05:52,489
Entonces, cuando la API de historial HTML hace uso de estos métodos,

79
00:05:52,489 --> 00:05:57,307
, entonces para la modificación, debe especificar una base

80
00:05:57,307 --> 00:06:02,875
ubicación desde la que está especificando las partes adicionales

81
00:06:02,875 --> 00:06:07,930
de su ruta URL que no dará lugar a una actualización de página.

82
00:06:07,930 --> 00:06:10,580
Así que en este caso, para nuestra aplicación Angular,

83
00:06:10,580 --> 00:06:12,378
esto siempre comienza en la raíz.

84
00:06:12,378 --> 00:06:17,829
Entonces, es por eso que especificamos la base como href=»/».

85
00:06:17,829 --> 00:06:22,581
Todo lo demás que viene después de eso en la URL será

86
00:06:22,581 --> 00:06:27,750
tratado dentro de su aplicación Angular como algo que

87
00:06:27,750 --> 00:06:33,228
desencadena la navegación que se maneja el enrutador Angular en sí

88
00:06:33,228 --> 00:06:39,080
sin causar que su navegador necesite una actualización de un servidor.

89
00:06:39,080 --> 00:06:44,240
Entonces, así es como el enrutador angular aprovecha la API de historial HTML5.

90
00:06:45,300 --> 00:06:47,766
Ahora, si no tienes la API de historial,

91
00:06:47,766 --> 00:06:51,295
la otra forma de hacer la navegación es usando hashtags.

92
00:06:51,295 --> 00:06:56,558
Ya sabes que en HTML, si especificas algún enlace a partir de

93
00:06:56,558 --> 00:07:01,543
con un hashtag, que se refiere a un enlace dentro de la misma página.

94
00:07:01,543 --> 00:07:05,782
Así que cuando haga clic en tales enlaces, no causará una actualización de página.

95
00:07:05,782 --> 00:07:09,944
En su lugar, te redirigirá a otra ubicación dentro de la misma página.

96
00:07:09,944 --> 00:07:12,256
Entonces, esa es otra forma de hacer las cosas.

97
00:07:12,256 --> 00:07:17,030
Pero para una representación limpia, la API HTML5 admite esta API de historial

98
00:07:17,030 --> 00:07:22,012
que le permite manipular el historial de

99
00:07:22,012 --> 00:07:26,087
su navegador sin causar una actualización de página.

100
00:07:26,087 --> 00:07:28,616
Después de esa larga explicación,

101
00:07:28,616 --> 00:07:33,049
tomemos un ejemplo para ayudarnos a entender esto aún más.

102
00:07:33,049 --> 00:07:39,752
Supongamos que define su URL como esta, por ejemplo, ejemplo.abc.com/home.

103
00:07:39,752 --> 00:07:43,325
Ahora con la API de historial HTML5,

104
00:07:43,325 --> 00:07:48,301
simplemente puede tomar esa última parte de la URL y

105
00:07:48,301 --> 00:07:56,988
modificarla a otra URL como la que había mostrado aquí con example.abc.com/menu.

106
00:07:56,988 --> 00:08:03,054
Así que ve que la URL ahora ha sido cambiada de barra de inicio al menú de barra diagonal,

107
00:08:03,054 --> 00:08:08,624
este cambio se puede activar usando un método de estado de inserción de la API de historial HTML5

108
00:08:08,624 --> 00:08:14,216
sin como mencioné, sin recargar la página.

109
00:08:14,216 --> 00:08:18,533
En su lugar, este será un disparador interno para la navegación

110
00:08:18,533 --> 00:08:24,842
que el Router Angular aprovecha explícitamente para

111
00:08:24,842 --> 00:08:32,161
apoyar la navegación entre varias vistas de su aplicación Angular.

112
00:08:32,161 --> 00:08:36,828
Ahora obviamente usted debe estar interesado en cómo el Router Angular aprovecha

113
00:08:36,828 --> 00:08:37,376
de esto.

114
00:08:37,376 --> 00:08:42,868
Así que aquí es donde el Router Angular aprovecha la manipulación del historial

115
00:08:42,868 --> 00:08:47,917
para modificar la URL del navegador sin activar una actualización de página.

116
00:08:47,917 --> 00:08:49,485
Tomemos un ejemplo.

117
00:08:49,485 --> 00:08:56,933
Supongamos que tiene su aplicación Angular residiendo en esta URL en particular.

118
00:08:56,933 --> 00:09:01,809
Ahora, sucede que la aplicación Angular en la que está trabajando

119
00:09:01,809 --> 00:09:06,784
se está procesando al navegador accediendo a ella en esta URL en particular.

120
00:09:06,784 --> 00:09:13,430
Por lo tanto, nos ayudará a entender rápidamente lo que el Router Angular nos permite hacer.

121
00:09:13,430 --> 00:09:19,790
Así que en este caso, cuando escribes esto en la URL de tu navegador,

122
00:09:19,790 --> 00:09:24,160
tu Angular Router puede configurarse fácilmente para redirigirte

123
00:09:24,160 --> 00:09:29,210
a una ubicación predeterminada dentro de tu aplicación angular.

124
00:09:29,210 --> 00:09:33,433
Normalmente, recuérdame que algo como en casa.

125
00:09:33,433 --> 00:09:38,606
Así que eso te llevará al punto de entrada predeterminado para

126
00:09:38,606 --> 00:09:42,303
tu aplicación angular que por

127
00:09:42,303 --> 00:09:48,109
para una fácil comprensión, la etiquetaré como /home.

128
00:09:48,109 --> 00:09:53,175
Así que si tu URL contiene localhost: 4200/home,

129
00:09:53,175 --> 00:09:58,249
significa que estás en tu ubicación de inicio predeterminada.

130
00:09:58,249 --> 00:10:01,519
Ahora, cuando se activa esta navegación,

131
00:10:01,519 --> 00:10:07,384
puede dejar que su Router Angular te lleve automáticamente a la vista,

132
00:10:07,384 --> 00:10:12,017
por ejemplo, que es compatible con ese componente doméstico.

133
00:10:12,017 --> 00:10:16,963
Así que cuando la URL se convierta en localhost:4200/home,

134
00:10:16,963 --> 00:10:24,605
representará automáticamente la vista del componente home en la pantalla del navegador.

135
00:10:24,605 --> 00:10:30,601
Muy exactamente cuando coloque la vista que veremos en la siguiente diapositiva y

136
00:10:30,601 --> 00:10:33,086
en el siguiente ejercicio.

137
00:10:33,086 --> 00:10:37,903
Del mismo modo, puede tener otras vistas dentro de su aplicación Angular

138
00:10:37,903 --> 00:10:42,821
que también pueden ser compatibles con otras URL

139
00:10:42,821 --> 00:10:47,153
que son extensiones del host local: 4200.

140
00:10:47,153 --> 00:10:53,354
Entonces, por ejemplo, si la URL es localhost: 4200/aboutus, entonces

141
00:10:53,354 --> 00:11:00,410
podría llevarle a que se le muestre la vista que representa AboutComponent.

142
00:11:00,410 --> 00:11:05,070
Y de manera similar, el menú le mostrará el MenuComponent y así sucesivamente.

143
00:11:06,320 --> 00:11:09,088
Así que lo que esto nos permite hacer es,

144
00:11:09,088 --> 00:11:14,624
dependiendo de la URL que se use en su navegador

145
00:11:14,624 --> 00:11:19,956
usará eso para navegar automáticamente entre las diversas vistas

146
00:11:19,956 --> 00:11:25,515
de sus diversos componentes de su aplicación Angular.

147
00:11:25,515 --> 00:11:27,968
Ahora, no tienes que preocuparte explícitamente por ello.

148
00:11:27,968 --> 00:11:33,200
Si configura el Router Angular para que se encargue de todo esto, entonces el Router

149
00:11:33,200 --> 00:11:38,273
se encargará automáticamente de proporcionarle la navegación entre estos componentes

150
00:11:38,273 --> 00:11:43,957
como veríamos en el ejercicio que sigue a esta conferencia en particular.

151
00:11:43,957 --> 00:11:48,407
Ahora antes de proceder al ejercicio donde vamos a aprender más sobre

152
00:11:48,407 --> 00:11:53,017
el router angular, permítanme llamar rápidamente su atención sobre unos pocos términos

153
00:11:53,017 --> 00:11:57,945
dentro del Router Angular que se encontrará durante el ejercicio y

154
00:11:57,945 --> 00:12:01,759
Me gustaría que prestaras especial atención a estos términos,

155
00:12:01,759 --> 00:12:07,357
porque son cruciales para entender cómo funciona realmente el Router Angular.

156
00:12:07,357 --> 00:12:13,205
Así que primero verán que cuando diseñemos el Router Angular,

157
00:12:13,205 --> 00:12:18,042
tomaremos esa ayuda del módulo de Router que

158
00:12:18,042 --> 00:12:22,669
forma parte de la biblioteca de Router de Barra Angular.

159
00:12:22,669 --> 00:12:28,094
Por lo tanto, vamos a importar el módulo router en o la aplicación angular

160
00:12:28,094 --> 00:12:32,690
en el módulo de aplicación y luego también vamos a importar las rutas.

161
00:12:32,690 --> 00:12:37,716
Así pues, las rutas nos permiten definir las distintas rutas que nuestra aplicación angular

162
00:12:37,716 --> 00:12:43,335
hace uso o de las que hace uso el Router Angular.

163
00:12:43,335 --> 00:12:49,047
Así que en ese caso, estaríamos especificando las rutas en forma de ruta y

164
00:12:49,047 --> 00:12:51,585
el componente correspondiente.

165
00:12:51,585 --> 00:12:56,299
Así que como vio en la diapositiva anterior, vio que cada una de esas extensiones de URL

166
00:12:56,299 --> 00:13:00,951
se estaba asignando a la vista de un componente particular.

167
00:13:00,951 --> 00:13:05,729
Entonces, ese tipo de información se suministra a ese Router Angular

168
00:13:05,729 --> 00:13:09,885
a través de rutas y estas rutas se especifican usando

169
00:13:09,885 --> 00:13:14,139
un objeto JavaScript como esta ruta con dos propiedades.

170
00:13:14,139 --> 00:13:18,470
Ruta y componente y algunas propiedades adicionales que no vamos a encontrar

171
00:13:18,470 --> 00:13:22,970
en este momento, pero vamos a ver en algunos de los ejercicios posteriores.

172
00:13:24,610 --> 00:13:28,531
Además, la segunda pregunta que se preguntaría es ¿dónde se representaría esta vista

173
00:13:28,531 --> 00:13:30,657
en su aplicación Angular?

174
00:13:30,657 --> 00:13:35,863
Aquí es donde dentro de nuestra plantilla de nuestro componente de aplicación,

175
00:13:35,863 --> 00:13:43,286
vamos a incluir una directiva llamada como el routerOutlet que se especifica como

176
00:13:43,286 --> 00:13:48,628
ver como <router-outlet> y </router-outlet>.

177
00:13:48,628 --> 00:13:54,890
Esto se incluirá en el archivo de plantilla de componente de la aplicación,

178
00:13:54,890 --> 00:13:59,188
ahora entonces su enrutador angular navega a

179
00:13:59,188 --> 00:14:04,484
las diferentes vistas de los diferentes componentes.

180
00:14:04,484 --> 00:14:08,899
La vista correspondiente del componente se incluirá en la vista de aplicaciones

181
00:14:08,899 --> 00:14:13,633
donde especifique esta salida del router en particular.

182
00:14:13,633 --> 00:14:17,773
Así que, cuidado con eso en el ejercicio que sigue.

183
00:14:17,773 --> 00:14:22,752
Además, para activar la navegación, verá que

184
00:14:22,752 --> 00:14:27,743
con muchas de las etiquetas a que se utilizan dentro de la aplicación.

185
00:14:27,743 --> 00:14:32,429
Así que, por ejemplo, incluiría una configuración de una etiqueta con el botón MD

186
00:14:32,429 --> 00:14:36,820
componente de material angular en la barra de herramientas,

187
00:14:36,820 --> 00:14:41,327
en el componente de encabezado de nuestra aplicación angular.

188
00:14:41,327 --> 00:14:44,635
Asociaría las etiquetas a con otra directiva,

189
00:14:44,635 --> 00:14:47,437
una directiva de atributo llamada routerLink.

190
00:14:47,437 --> 00:14:53,260
El RouterLink es una directiva real que el módulo del router proporciona para nosotros.

191
00:14:53,260 --> 00:14:57,966
Este enlace de router nos permite especificar la ruta como, por ejemplo,

192
00:14:57,966 --> 00:15:00,783
códigos escritos, puedo ver un «/menu».

193
00:15:00,783 --> 00:15:05,677
Puede tener más detalles que esto para el routerLink.

194
00:15:05,677 --> 00:15:11,646
Pero para el ejercicio, vamos a empezar con un ejemplo simple donde tendríamos,

195
00:15:11,646 --> 00:15:15,806
por ejemplo, /menu slash home slash póngase en contacto con nosotros y así

196
00:15:15,806 --> 00:15:19,976
en especificado usando el atributo routerLink direct.

197
00:15:19,976 --> 00:15:25,212
Así que cuando haga clic en un enlace como este en su barra de herramientas,

198
00:15:25,212 --> 00:15:31,281
entonces eso activará el Router Angular para causar un cambio o

199
00:15:31,281 --> 00:15:39,502
una navegación a una vista particular que es compatible con el módulo Angular Router.

200
00:15:39,502 --> 00:15:45,391
Así pues, el mapeo entre este enlace y los componentes correspondientes

201
00:15:45,391 --> 00:15:51,800
ya está especificado en la ruta que damos a nuestra aplicación Angular.

202
00:15:51,800 --> 00:15:56,715
Así que, cuidado con todas estas cosas mientras haces el ejercicio.

203
00:15:56,715 --> 00:16:00,895
Explicaré algunas de estas cosas y la razón por la que

204
00:16:00,895 --> 00:16:07,366
las hace mientras estamos haciendo los pasos del ejercicio que sigue esta lección.

205
00:16:07,366 --> 00:16:11,099
[MÚSICA]