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

2
00:00:04,965 --> 00:00:10,050
En este ejercicio vamos a ver cómo podemos aprovechar el módulo de enrutamiento

3
00:00:10,050 --> 00:00:14,397
de Angular para poder soportar múltiples componentes, y

4
00:00:14,397 --> 00:00:19,830
poder navegar a cualquiera de esos componentes en nuestra aplicación Angular.

5
00:00:21,690 --> 00:00:26,280
Echando un vistazo rápido al estado de nuestra solicitud.

6
00:00:26,280 --> 00:00:29,647
Al final del último ejercicio,

7
00:00:29,647 --> 00:00:36,135
ya notamos que en esta aplicación, en el encabezado,

8
00:00:36,135 --> 00:00:42,520
tenemos enlaces a cuatro páginas diferentes de comillas, entre comillas aquí.

9
00:00:42,520 --> 00:00:47,334
Ahora, en términos angulares, esto sería compatible con el uso de

10
00:00:47,334 --> 00:00:52,371
diferentes componentes, como veremos en este ejercicio.

11
00:00:52,371 --> 00:00:55,706
Así que aquí vemos que cuando hacemos clic en el Inicio,

12
00:00:55,706 --> 00:01:01,840
queremos poder ver los detalles de lo que debería estar presente en la Página de Inicio.

13
00:01:01,840 --> 00:01:07,182
Y de manera similar, la Acerca y el Menú, por supuesto, ya lo ves allí,

14
00:01:07,182 --> 00:01:12,608
y luego el Contacto, probablemente muestra alguna información sobre el contenido de

15
00:01:12,608 --> 00:01:15,040
este restaurante en particular.

16
00:01:15,040 --> 00:01:18,450
Entonces, ¿cómo van a apoyar algo como esto?

17
00:01:18,450 --> 00:01:23,490
Primero, al echarle un vistazo rápido vemos que el Menú es

18
00:01:23,490 --> 00:01:28,470
ya soportado por mostrar la información sobre el menú aquí, y

19
00:01:28,470 --> 00:01:32,720
esto ya está facilitado con el uso del componente Menú.

20
00:01:32,720 --> 00:01:37,720
Así que vemos que el componente Menu está yuxtapuesto entre el encabezado y

21
00:01:37,720 --> 00:01:42,270
el pie de página y es capaz de mostrar la información allí mismo.

22
00:01:42,270 --> 00:01:48,270
Ahora, ¿cómo podemos aprovechar el uso del módulo Router Angular para permitir que

23
00:01:48,270 --> 00:01:54,270
nos admita estos múltiples componentes y poder navegar entre ellos?

24
00:01:54,270 --> 00:01:58,810
Ahora, para empezar, primero, por supuesto, necesitamos múltiples componentes,

25
00:01:58,810 --> 00:02:04,370
cada uno de ellos mostrando su respectiva vista para que podamos navegar entre las vistas.

26
00:02:04,370 --> 00:02:09,390
Así que vamos a añadir tres componentes más a nuestra aplicación Angular,

27
00:02:09,390 --> 00:02:13,300
el Hogar, Acerca y el Contacto.

28
00:02:13,300 --> 00:02:17,500
Ya sabes cómo hacerlo, así que vamos a ese paso a continuación.

29
00:02:17,500 --> 00:02:22,959
En el símbolo del sistema, escriba ng g component

30
00:02:22,959 --> 00:02:28,616
home para crear el componente home.

31
00:02:28,616 --> 00:02:33,094
Del mismo modo generar

32
00:02:33,094 --> 00:02:38,362
el componente sobre y

33
00:02:38,362 --> 00:02:43,100
también mientras estamos en él

34
00:02:43,100 --> 00:02:48,641
el componente de contacto.

35
00:02:48,641 --> 00:02:53,031
Así que ahora tenemos tres componentes añadidos junto con el nuevo componente que ya tenemos

36
00:02:53,031 --> 00:02:53,903
.

37
00:02:53,903 --> 00:02:58,445
El componente de detalle del disco ya se está utilizando en los componentes del menú, por lo que

38
00:02:58,445 --> 00:03:00,833
no lo consideramos por el momento.

39
00:03:00,833 --> 00:03:05,652
Pero ahora tenemos componentes de hogar, sobre, contacto y menú, y

40
00:03:05,652 --> 00:03:08,339
necesitamos una manera de ir entre ellos.

41
00:03:08,339 --> 00:03:09,882
Entonces, ¿cómo vamos a hacer eso?

42
00:03:09,882 --> 00:03:14,806
Así que ahí es donde hago uso del módulo de enrutador angular.

43
00:03:14,806 --> 00:03:20,618
Para empezar a usar el módulo router que nos permita navegar

44
00:03:20,618 --> 00:03:26,225
entre estos componentes, añadamos un nuevo módulo angular.

45
00:03:26,225 --> 00:03:32,012
Ahora bien, este patrón de uso del módulo del router es algo que se sugiere para

46
00:03:32,012 --> 00:03:35,841
aplicaciones angulares un poco más complejas, pero

47
00:03:35,841 --> 00:03:41,735
si lo hacemos como práctica estándar, va un largo camino para ayudarnos en el futuro.

48
00:03:41,735 --> 00:03:46,653
Así que estoy comenzando incluso la simple aplicación con

49
00:03:46,653 --> 00:03:52,032
poniendo el módulo del enrutador en su propio módulo separado.

50
00:03:52,032 --> 00:03:58,470
Así que abarca todas nuestras necesidades de enrutamiento en un módulo separado.

51
00:03:58,470 --> 00:04:04,170
Para empezar, volvemos a utilizar la CLI angular para

52
00:04:04,170 --> 00:04:10,450
crear otro módulo, y llamaremos a ese módulo como enrutamiento de aplicaciones.

53
00:04:10,450 --> 00:04:15,237
Así que este módulo de enrutamiento de aplicaciones que vamos a crear va a aprovechar

54
00:04:15,237 --> 00:04:20,599
el módulo de asignación angular para proporcionar características de enrutamiento para nuestra aplicación.

55
00:04:20,599 --> 00:04:26,296
Y luego vamos a hacer uso de eso en nuestro módulo de aplicaciones para habilitar el enrutamiento.

56
00:04:26,296 --> 00:04:30,927
Para crear un nuevo módulo llamado enrutamiento de aplicaciones,

57
00:04:30,927 --> 00:04:35,814
en el prompt escriba ng g module app-routing,

58
00:04:35,814 --> 00:04:40,960
y que debería crear un módulo de enrutamiento de aplicaciones y

59
00:04:40,960 --> 00:04:49,211
poner un archivo app-routing.module.ts en esa carpeta particular allí.

60
00:04:49,211 --> 00:04:52,635
Ahora este módulo de enrutamiento de aplicaciones se acaba de dejar allí.

61
00:04:52,635 --> 00:04:58,138
Necesitamos incluirlo explícitamente en nuestro módulo de aplicación,

62
00:04:58,138 --> 00:05:01,662
por lo que tiene que poder hacer uso de él.

63
00:05:01,662 --> 00:05:06,669
Al ir al editor ahora vemos que ahora tenemos otra carpeta aquí

64
00:05:06,669 --> 00:05:12,328
llamada app-routing y dentro de que tenemos un ApproutingModule aquí,

65
00:05:12,328 --> 00:05:18,374
elegimos un módulo angular genérico que la CLI angular ha generado para nosotros.

66
00:05:18,374 --> 00:05:22,034
Esto no tiene nada específico sobre el enrutamiento como tal en este momento,

67
00:05:22,034 --> 00:05:24,737
, pero vamos a agregar esas características allí.

68
00:05:24,737 --> 00:05:30,633
Pero, antes de hacer eso, vamos a utilizar este ApproutingModule en nuestra app.module,

69
00:05:30,633 --> 00:05:34,028
el módulo raíz para nuestra aplicación Angular.

70
00:05:34,028 --> 00:05:38,271
Para hacer eso, abra el app.module, y

71
00:05:38,271 --> 00:05:44,452
mientras estamos aquí, déjame hacer un poco de limpieza aquí.

72
00:05:44,452 --> 00:05:48,489
Tiendo a no gustarme el código desorganizado, así que

73
00:05:48,489 --> 00:05:52,407
solo voy a mover todo este código para

74
00:05:52,407 --> 00:05:57,040
los componentes juntos en un solo lugar allí y

75
00:05:57,040 --> 00:06:02,650
luego tengo mis servicios que se requieren aquí abajo.

76
00:06:02,650 --> 00:06:09,180
Ahora tenemos un nuevo módulo que estamos recibiendo

77
00:06:09,180 --> 00:06:13,846
del ApproutingModule,

78
00:06:13,846 --> 00:06:17,764
que acabamos de crear y

79
00:06:17,764 --> 00:06:22,614
entonces voy a requerir que

80
00:06:22,614 --> 00:06:27,108
ApproutingModule en mi,

81
00:06:34,609 --> 00:06:37,040
módulo de ruta o el AppModule aquí.

82
00:06:37,040 --> 00:06:43,080
Entonces, incluyo el ApproutingModule importándolo primero allí.

83
00:06:43,080 --> 00:06:47,625
Y luego, después de eso, en las importaciones, entro y

84
00:06:47,625 --> 00:06:50,880
luego agrego el ApproutingModule.

85
00:06:53,440 --> 00:06:56,970
Justo ahí, ApproutingModule.

86
00:06:56,970 --> 00:07:01,380
Entonces, con esto, mi módulo de aplicación,

87
00:07:01,380 --> 00:07:05,640
el módulo raíz, ahora está arreglado para hacer uso del ApproutingModule.

88
00:07:05,640 --> 00:07:11,420
Ahora esto me da la libertad de desarrollar mi parte de enrutamiento en

89
00:07:11,420 --> 00:07:18,540
mi ApproutingModule con plena confianza de que será utilizado por mi módulo de aplicación.

90
00:07:18,540 --> 00:07:21,370
Así que vamos a guardar los cambios en el módulo de la aplicación, y

91
00:07:21,370 --> 00:07:25,357
luego vamos a volver y abrir el ApproutingModule aquí.

92
00:07:26,400 --> 00:07:30,470
Y aquí vamos a hacer uso de

93
00:07:30,470 --> 00:07:34,050
el módulo de router que Angular proporciona para nosotros.

94
00:07:34,050 --> 00:07:37,749
Así que aquí déjame importar el,

95
00:07:41,156 --> 00:07:46,174
routerModule aquí, y también el módulo de rutas

96
00:07:46,174 --> 00:07:51,608
compañero que está disponible desde Angular.

97
00:07:51,608 --> 00:07:56,428
Y luego voy a importar eso desde Angular,

98
00:07:56,428 --> 00:08:00,320
y luego, RouterModule aquí.

99
00:08:00,320 --> 00:08:04,540
Entonces, desde la biblioteca de enrutador angular, importo tanto el routerModule como

100
00:08:04,540 --> 00:08:06,120
el módulo Routes.

101
00:08:06,120 --> 00:08:14,590
Así que una vez que hago eso, obviamente, necesito poder incluir el routerModule aquí.

102
00:08:14,590 --> 00:08:21,015
Así que además del CommonModule que he importado allí,

103
00:08:21,015 --> 00:08:25,330
también necesito usar el routerModule aquí.

104
00:08:25,330 --> 00:08:28,803
Ahora, voy a dejarlo en este punto.

105
00:08:28,803 --> 00:08:33,835
Vamos a desarrollar las rutas para nuestra aplicación Angular y

106
00:08:33,835 --> 00:08:38,054
luego volver y arreglar esto un poco más tarde.

107
00:08:38,054 --> 00:08:44,225
Así que con esto, permítanme guardar los cambios en el módulo de enrutamiento de aplicaciones.

108
00:08:44,225 --> 00:08:49,925
Y lo que voy a hacer es, solo por el bien de mantener mi código limpio y

109
00:08:49,925 --> 00:08:56,574
organizado, voy a definir todas las rutas para mi aplicación en otro archivo.

110
00:08:56,574 --> 00:09:00,673
Pero crearé en la carpeta app-routing y

111
00:09:00,673 --> 00:09:03,863
luego lo nombraré como routes.ts5.

112
00:09:03,863 --> 00:09:08,601
Ahora, dentro de este archivo, crearé todas las rutas que necesito.

113
00:09:08,601 --> 00:09:12,994
Así que aquí, voy a importar,

114
00:09:15,508 --> 00:09:23,255
Las rutas de, @angular /router,

115
00:09:23,255 --> 00:09:29,570
y luego usar eso para construir las rutas para mi aplicación.

116
00:09:29,570 --> 00:09:33,453
Ahora, además, necesito poder importar todos los componentes

117
00:09:33,453 --> 00:09:37,745
que tengo dentro de mi aplicación.

118
00:09:37,745 --> 00:09:41,303
Porque quiero poder navegar a todos los componentes.

119
00:09:41,303 --> 00:09:44,158
Entonces, ¿dónde tengo la lista de todos los componentes?

120
00:09:44,158 --> 00:09:46,780
Los tengo en el app_module.

121
00:09:46,780 --> 00:09:48,475
Así que déjame ir al app_module.

122
00:09:50,917 --> 00:09:58,300
Trato de no escribir cosas tan lejos como sea posible para mantener las cosas bajo control.

123
00:09:58,300 --> 00:10:03,720
Así que iré al app_module, y luego copiaré todos los componentes que tengo.

124
00:10:03,720 --> 00:10:08,681
No necesito AppComponent porque no voy a navegar directamente a eso en mi aplicación

125
00:10:08,681 --> 00:10:11,925
, pero los restantes necesitaré.

126
00:10:11,925 --> 00:10:18,441
Así que voy a simplemente copiar todos esos y

127
00:10:18,441 --> 00:10:25,510
luego incluirlos en mi archivo de rutas, aquí.

128
00:10:25,510 --> 00:10:30,080
Así que ahora tengo el MenuComponent, Dishdetail, Header, Foot.

129
00:10:30,080 --> 00:10:33,190
En realidad, tampoco necesito el encabezado y FooterComponent.

130
00:10:33,190 --> 00:10:34,516
No necesitaré el encabezado y

131
00:10:34,516 --> 00:10:39,040
FooterComponent porque no voy a navegar a ellos usando rutas.

132
00:10:39,040 --> 00:10:43,322
Así que permítanme eliminar el encabezado y los componentes del pie de página.

133
00:10:43,322 --> 00:10:46,842
Sólo necesito el Menú, Inicio, Acerca de, Contactos.

134
00:10:46,842 --> 00:10:53,532
incluí el Dishdetail, vamos a llegar a eso en uno de los ejercicios posteriores.

135
00:10:53,532 --> 00:10:57,949
Así que ahora que hemos incluido todos estos, el siguiente paso es que

136
00:10:57,949 --> 00:11:02,289
me defina las diversas rutas que están disponibles aquí.

137
00:11:02,289 --> 00:11:06,884
Voy a definir una constante aquí

138
00:11:06,884 --> 00:11:12,247
rutas con nombre del tipo Rutas.

139
00:11:12,247 --> 00:11:17,908
Así que ahora ves por qué tengo rutas importantes desde el enrutador angular allí.

140
00:11:17,908 --> 00:11:23,148
Así que esto me permitirá definir una matriz especificando

141
00:11:23,148 --> 00:11:28,651
las diversas rutas que forman parte de mi aplicación.

142
00:11:28,651 --> 00:11:32,940
Aquí, permítanme especificar todas las rutas aquí.

143
00:11:32,940 --> 00:11:37,854
Ahora, cuando especifique rutas en su aplicación Angular

144
00:11:37,854 --> 00:11:42,776
, especificará la ruta.

145
00:11:42,776 --> 00:11:48,303
Que comenzaré con HomeComponent,

146
00:11:48,303 --> 00:11:53,139
y luego cuando navegue a la ruta de inicio,

147
00:11:53,139 --> 00:11:59,368
el componente correspondiente es HomeComponent.

148
00:12:00,630 --> 00:12:05,940
Entonces, cuando mi URL incluya home,

149
00:12:05,940 --> 00:12:08,930
, entonces estaré navegando hasta HomeComponent.

150
00:12:09,930 --> 00:12:14,905
En la conferencia anterior, ya hemos visto cómo usamos el HTML

151
00:12:14,905 --> 00:12:21,513
pushState () para reconocer la navegación

152
00:12:21,513 --> 00:12:27,010
interna, usando el soporte HTML para pushState ().

153
00:12:27,010 --> 00:12:33,481
Así que eso es lo que estoy aprovechando aquí para definir estas diversas rutas aquí.

154
00:12:33,481 --> 00:12:38,003
Entonces, cuando digo localhost: 4200/home,

155
00:12:38,003 --> 00:12:43,387
entonces eso apunta al HomeComponent, aquí.

156
00:12:43,387 --> 00:12:48,850
Así que esa es la forma en que navegaré hasta HomeComponent.

157
00:12:48,850 --> 00:12:55,909
Del mismo modo, podemos definir para los otros componentes de nuestra aplicación.

158
00:12:55,909 --> 00:13:03,213
La siguiente ruta que voy a definir es al MenuComponent.

159
00:13:03,213 --> 00:13:09,006
Para este ejercicio, voy a definir sólo estos dos.

160
00:13:09,006 --> 00:13:14,119
Los restantes se rellenarán como parte

161
00:13:14,119 --> 00:13:21,371
de algunos de los ejercicios y tareas posteriores que siguen.

162
00:13:21,371 --> 00:13:25,791
Así que tenemos dos de ellos configurados, Inicio y Menú.

163
00:13:25,791 --> 00:13:29,400
Ahora, también debería proporcionar la ruta predeterminada aquí.

164
00:13:29,400 --> 00:13:35,379
Entonces, cuando el usuario navegue a localhost: 4200,

165
00:13:35,379 --> 00:13:40,670
, entonces terminará en la ubicación predeterminada.

166
00:13:40,670 --> 00:13:46,054
Entonces, en ese caso, simplemente redirigiré al usuario al HomeComponent,

167
00:13:46,054 --> 00:13:50,828
que es lo que se mostrará en la aplicación Angular.

168
00:13:50,828 --> 00:13:58,748
Entonces, para hacer eso, escribiré en la propiedad RedirectTo.

169
00:13:58,748 --> 00:14:03,838
Y luego define que sea /home.

170
00:14:03,838 --> 00:14:10,507
Lo que significa que cuando navega sin proporcionar una ruta URL allí,

171
00:14:10,507 --> 00:14:16,708
entonces navegaría automáticamente al HomeComponent,

172
00:14:16,708 --> 00:14:20,490
y esto debería coincidir completo aquí.

173
00:14:20,490 --> 00:14:25,023
Así que estos tres, voy a suministrar para las rutas aquí, por el momento.

174
00:14:25,023 --> 00:14:26,610
Los restantes,

175
00:14:26,610 --> 00:14:31,580
como dije, serán añadidos como parte del resto de los ejercicios.

176
00:14:31,580 --> 00:14:36,658
Ahora, obviamente ves estas líneas rojas

177
00:14:36,658 --> 00:14:40,889
porque estas están todas en

178
00:14:40,889 --> 00:14:46,011
../Así que déjame arreglarlas.

179
00:14:46,011 --> 00:14:50,232
Así que ahora, desde el archivo routes.ts,

180
00:14:50,232 --> 00:14:55,721
estamos preparando esta constante de Rutas aquí y

181
00:14:55,721 --> 00:14:58,971
luego poniéndola a disposición.

182
00:14:58,971 --> 00:15:04,111
Así que ahora que esto está listo para nosotros, volveremos a app-routing.module.

183
00:15:04,111 --> 00:15:09,282
Y en el app-routing.module,

184
00:15:09,282 --> 00:15:15,141
voy a importar la constante de rutas,

185
00:15:15,141 --> 00:15:17,908
constantes de rutas.

186
00:15:17,908 --> 00:15:24,542
Si quieres decir eso como rutas, rutas constantes, y úsalo aquí.

187
00:15:24,542 --> 00:15:26,516
Ahora, ¿cómo lo hago aquí?

188
00:15:26,516 --> 00:15:31,451
Ahora, el routerModule toma como

189
00:15:31,451 --> 00:15:36,029
un parámetro para ForRoot,

190
00:15:38,737 --> 00:15:42,261
El parámetro es la configuración de rutas.

191
00:15:42,261 --> 00:15:50,154
Así que voy a suministrar las rutas como el parámetro para eso, el routerModule.

192
00:15:50,154 --> 00:15:56,520
De acuerdo, así que arregla nuestra configuración de enrutamiento para nuestra aplicación.

193
00:15:56,520 --> 00:16:01,480
Un cambio final que necesitamos corregir es que desde app-routing.module

194
00:16:01,480 --> 00:16:05,360
queremos poder exportar el routerModule a nuestro app-module para

195
00:16:05,360 --> 00:16:07,120
que también pueda hacer uso de él.

196
00:16:07,120 --> 00:16:11,796
Así que aquí es donde hacemos uso de la propiedad export

197
00:16:11,796 --> 00:16:16,346
en nuestro decorador ngModule.

198
00:16:16,346 --> 00:16:22,907
Y haga que nuestro RouterModule esté disponible para AppModule.

199
00:16:22,907 --> 00:16:27,990
Así que vamos a guardar los cambios también hasta ahora.

200
00:16:27,990 --> 00:16:30,845
Ahora, al enrutar a una de estas partes,

201
00:16:30,845 --> 00:16:36,040
sea lo que muestre la vista para el componente en particular.

202
00:16:36,040 --> 00:16:40,260
No tenemos nada en este momento en nuestra solicitud.

203
00:16:40,260 --> 00:16:45,124
Cuando miras el archivo AppComponent.html.

204
00:16:45,124 --> 00:16:49,961
Aquí, por defecto solo tenemos el app-header, app-menu,

205
00:16:49,961 --> 00:16:52,107
y el app-footer aquí.

206
00:16:52,107 --> 00:16:54,780
Ahora afortunadamente,

207
00:16:54,780 --> 00:17:00,127
el RuterModule Angular nos proporciona

208
00:17:00,127 --> 00:17:06,483
con una directiva llamada como router-outlet.

209
00:17:06,483 --> 00:17:11,635
Así que cada vez que especifique esta directiva como,

210
00:17:14,802 --> 00:17:18,192
La etiqueta en su archivo de plantilla.

211
00:17:18,192 --> 00:17:23,355
Entonces su aplicación Angular usará automáticamente

212
00:17:23,355 --> 00:17:30,545
como el lugar donde se debe insertar la vista correspondiente.

213
00:17:30,545 --> 00:17:36,725
Entonces, especificando la salida del enrutador en el archivo de plantilla de mi AppComponent.

214
00:17:36,725 --> 00:17:44,537
Ahora podré mostrar cualquiera de esa información en esa ubicación en particular.

215
00:17:44,537 --> 00:17:48,747
Así que hemos hecho cambios en el módulo de enrutamiento de aplicaciones,

216
00:17:48,747 --> 00:17:54,573
el archivo AppComponent.html, donde hemos añadido el router-outlet.

217
00:17:54,573 --> 00:17:59,416
Definimos las rutas en el archivo routes.ts y

218
00:17:59,416 --> 00:18:06,074
luego tenemos el AppModule donde agregamos en el ApproutingModule

219
00:18:06,074 --> 00:18:12,350
como una de las importaciones allí, después de importarlo aquí.

220
00:18:12,350 --> 00:18:15,110
Así que después de todos estos cambios, vamos y

221
00:18:15,110 --> 00:18:21,890
echemos un vistazo a lo que nuestras aplicaciones Angular están mostrando en el navegador.

222
00:18:21,890 --> 00:18:26,710
Al ir a nuestro navegador, ahora podemos ver que en nuestro navegador

223
00:18:26,710 --> 00:18:31,830
lo predeterminado que se ha mostrado aquí son las obras domésticas.

224
00:18:31,830 --> 00:18:40,060
De su conocimiento de cómo funciona el componente generado por Angular CLI.

225
00:18:40,060 --> 00:18:46,840
Ya reconoce que debe estar en la plantilla del componente principal.

226
00:18:46,840 --> 00:18:53,040
Además, eche un vistazo a la URL en la parte de dirección del navegador.

227
00:18:53,040 --> 00:18:56,860
Ves que dice localhost: 4200/home.

228
00:18:56,860 --> 00:18:59,682
Si simplemente escribo localhost: 4200,

229
00:18:59,682 --> 00:19:04,996
esto se redireccionará automáticamente a localhost: 4200/home.

230
00:19:04,996 --> 00:19:12,923
Porque configuramos esa ruta en particular en nuestra configuración de rutas aquí.

231
00:19:12,923 --> 00:19:16,889
Ahora no tenemos forma de ir a los módulos restantes, así que

232
00:19:16,889 --> 00:19:22,167
¿cómo proporcionamos el enlace para que podamos navegar al módulo restante?

233
00:19:22,167 --> 00:19:26,901
Así que para completar eso, tenemos que ir y poder agregar información

234
00:19:26,901 --> 00:19:31,358
adicional en los archivos de plantilla de componentes de encabezado para

235
00:19:31,358 --> 00:19:36,640
que pueda navegar entre estos diversos componentes.

236
00:19:36,640 --> 00:19:43,350
Volviendo a nuestro editor, permítanme abrir el archivo HeaderComponent.html.

237
00:19:43,350 --> 00:19:49,010
Dentro de este archivo HeaderComponent, vemos que tenemos estos botones

238
00:19:49,010 --> 00:19:56,110
aquí arriba que deberían permitirnos navegar a esos componentes particulares allí.

239
00:19:56,110 --> 00:20:02,050
Así que aquí, tomamos la ayuda de otra directiva de atributos que

240
00:20:02,050 --> 00:20:08,370
el módulo de enrutamiento proporciona para nosotros llamada como routerLink.

241
00:20:08,370 --> 00:20:13,289
Así que a estos vamos a suministrar

242
00:20:13,289 --> 00:20:17,984
routerLink como/home.

243
00:20:17,984 --> 00:20:22,968
Lo que significa que para este botón en particular,

244
00:20:22,968 --> 00:20:26,171
el enlace de inicio en nuestra barra de herramientas.

245
00:20:26,171 --> 00:20:30,334
Cuando hacemos clic en eso, eso debería dirigirme automáticamente a la casa.

246
00:20:30,334 --> 00:20:36,640
Así que de esta manera, mi aplicación Angular sabe dónde enviarme en este punto.

247
00:20:36,640 --> 00:20:40,090
Así que eso es para el hogar allí.

248
00:20:40,090 --> 00:20:44,420
Ahora de manera similar, permítanme también agregar uno para el menú aquí.

249
00:20:45,590 --> 00:20:48,550
Para el menú, cuando hago clic en el enlace de menú allí,

250
00:20:48,550 --> 00:20:54,020
que debería llevarme al componente de menú.

251
00:20:54,020 --> 00:21:01,140
Entonces, la directiva de atributos RouterLink me permite especificar, como ves

252
00:21:01,140 --> 00:21:08,010
aquí una cadena donde puedo especificar la ruta que debe agregarse.

253
00:21:09,010 --> 00:21:14,900
Guardemos estos cambios también, y luego echemos un vistazo final a nuestra aplicación.

254
00:21:14,900 --> 00:21:21,021
Al ir a nuestra aplicación, ahora vemos que un componente Home se muestra aquí.

255
00:21:21,021 --> 00:21:25,426
Cuando hacemos clic en el componente Menú, estamos en el menú.

256
00:21:25,426 --> 00:21:30,570
Así que observe cómo mi aplicación navegó automáticamente a

257
00:21:30,570 --> 00:21:35,509
el componente de menú para mostrar la vista con el menú aquí.

258
00:21:35,509 --> 00:21:39,590
Y también echando un vistazo a la barra de direcciones,

259
00:21:39,590 --> 00:21:46,670
observe cómo la barra de direcciones ahora muestra localhost: 4200/menu.

260
00:21:46,670 --> 00:21:51,670
Una vez más, podemos navegar de vuelta al componente de inicio y al componente de menú,

261
00:21:51,670 --> 00:21:52,410
de ida y vuelta.

262
00:21:53,580 --> 00:21:59,230
Así que esto muestra cómo al agregar este enrutamiento a nuestra aplicación,

263
00:21:59,230 --> 00:22:04,940
somos capaces de navegar y mostrar diferentes vistas dentro de nuestra aplicación.

264
00:22:04,940 --> 00:22:09,640
Ahora, el sobre y el contacto, vamos a hacer eso como parte de

265
00:22:09,640 --> 00:22:14,090
otro ejercicio y la tarea que sigue más adelante.

266
00:22:15,150 --> 00:22:20,485
Esto completa este ejercicio donde hemos utilizado el módulo de router angular y

267
00:22:20,485 --> 00:22:25,047
luego configurado nuestra aplicación angular para utilizar varias rutas

268
00:22:25,047 --> 00:22:27,212
para mostrar las diferentes vistas.

269
00:22:27,212 --> 00:22:29,240
Este es un buen momento para que

270
00:22:29,240 --> 00:22:35,117
haga una confirmación de Git con el mensaje Fundamentos del enrutador angular.

271
00:22:35,117 --> 00:22:36,115
[MÚSICA]