1
00:00:00,150 --> 00:00:05,820
Bienvenidos en esta clase vamos a ver las rutas en Angular utilizando rutas podemos dividir nuestra

2
00:00:05,820 --> 00:00:11,010
aplicación en diferentes secciones o áreas, las cuales se podrían llevar páginas, pero en realidad

3
00:00:11,070 --> 00:00:12,870
no son páginas aisladas.

4
00:00:13,050 --> 00:00:17,070
Recordemos que una aplicación en Angular es en una sola página S.p.A.

5
00:00:17,160 --> 00:00:23,820
Single Page Apliqué hecho, es decir, tenemos una sola página para renderizar páginas diferentes y

6
00:00:23,820 --> 00:00:26,520
Angular utiliza esta técnica como Ruthy.

7
00:00:26,700 --> 00:00:34,440
Entonces la idea es dentro de esta página a través de rutas anidar un contenido de un componente que

8
00:00:34,440 --> 00:00:36,540
esté mapeado a una u rl.

9
00:00:36,690 --> 00:00:43,590
El siguiente paso sería indicar a Angular Caireles se tienen que mapear o asignar a nuestros componentes

10
00:00:43,620 --> 00:00:44,960
tal como lo hacemos con Spring.

11
00:00:45,090 --> 00:00:48,210
Cuando veamos un controlador a una ruta o °l.

12
00:00:48,280 --> 00:00:54,270
Ahora tenemos que mapear un componente, por ejemplo el componente directivas del componente clientes

13
00:00:54,420 --> 00:00:56,490
a una ruta u rl.

14
00:00:56,610 --> 00:00:58,260
Nos vamos al app móvil.

15
00:00:59,710 --> 00:01:05,230
Y acá tenemos que hacer la configuración, primero tenemos que importar el router móvil y también el

16
00:01:05,230 --> 00:01:05,830
routes,

17
00:01:09,040 --> 00:01:19,720
router module y routes from angular router y vamos a tener una constante.

18
00:01:19,840 --> 00:01:26,500
Acá voy a copiar una constante que contiene un arreglo con las rutas del tipo routes, justamente que

19
00:01:26,500 --> 00:01:30,070
estamos importando acá arriba en este arreglo de rutas.

20
00:01:30,130 --> 00:01:34,750
Vamos a definir todas las rutas °l de cada componente de nuestra aplicación.

21
00:01:34,900 --> 00:01:38,980
Por ejemplo, vamos a tener el path que contiene una VL.

22
00:01:39,160 --> 00:01:44,890
Puede ser el nombre que queramos de nuestra ruta y lo manejamos o asignamos a un componente.

23
00:01:44,980 --> 00:01:51,340
Por ejemplo cliente component está mapeado a la ruta clientes directiva component este mapeado a la

24
00:01:51,400 --> 00:01:58,030
VL directiva y además acá tenemos un path vacío que sería nuestro home, nuestra página principal y

25
00:01:58,030 --> 00:02:05,590
va a redirigir a clientes y pasamos el path match en full para que haga un match completo con lared.

26
00:02:05,890 --> 00:02:11,770
El siguiente paso sería registrar en import estas rutas utilizando el router module

27
00:02:15,550 --> 00:02:19,840
for root y acá pasamos la constante routes.

28
00:02:21,350 --> 00:02:22,160
Y guardamos.

29
00:02:22,310 --> 00:02:25,220
Eso sería todo lo que tenemos que configurar en el app mogol.

30
00:02:25,370 --> 00:02:31,130
El siguiente paso en el app component en nuestro componente principal en la vista, en vez de tener

31
00:02:31,130 --> 00:02:34,520
acá el Ardientes, se lo vamos a quitar.

32
00:02:34,790 --> 00:02:39,920
Vamos a tener una directiva especial para cargar las rutas router outlet.

33
00:02:42,470 --> 00:02:49,580
Simplemente es una directiva de Angular utilizada para indicar dónde se van a renderizar y mostrar el

34
00:02:49,580 --> 00:02:53,990
contenido de cada ruta, de cada ruta que seleccionamos.

35
00:02:54,080 --> 00:03:00,890
Vamos a guardar y el siguiente paso es modificar el componente IDER para agregar los links.

36
00:03:01,760 --> 00:03:02,800
Nos vamos a home.

37
00:03:03,170 --> 00:03:04,880
Vamos a quitar acá el activ.

38
00:03:05,060 --> 00:03:10,450
Quitamos el activ y vamos a copiar completamente el link, incluyendo los li.

39
00:03:11,480 --> 00:03:13,100
Entonces acá lo pegamos.

40
00:03:13,220 --> 00:03:20,570
Vamos a quitar el href y en vez de oum vamos a tener acá directivas.

41
00:03:21,540 --> 00:03:26,600
Luego, utilizando la directiva Router Link, vamos a agregar el link.

42
00:03:30,080 --> 00:03:32,570
Y acaba la ruta jureles que tenemos tapiada.

43
00:03:32,660 --> 00:03:37,610
Recordemos que en el amor directivas componen este mapeados a directivas.

44
00:03:37,760 --> 00:03:43,860
Esa sería la ruta que tiene que ir en el link en el router link.

45
00:03:44,690 --> 00:03:51,680
Además podemos colocar otra directiva para dejar marcado el enlace en nuestro menú utilizando etilo

46
00:03:51,710 --> 00:03:52,090
buta.

47
00:03:52,250 --> 00:03:54,350
Entonces con router link activ

48
00:03:59,300 --> 00:04:00,470
activ es igual.

49
00:04:00,980 --> 00:04:05,810
Entonces cada vez que se selecciona esta ruta se va a marcar este link como una página activa.

50
00:04:05,930 --> 00:04:10,320
Vamos a copiar, lo pegamos y colocamos clientes,

51
00:04:13,430 --> 00:04:14,690
clientes y eso es todo.

52
00:04:14,940 --> 00:04:19,640
Ya tenemos implementada las diferentes rutas para los distintos componentes.

53
00:04:19,910 --> 00:04:21,200
Criticabas y cliente.

54
00:04:21,470 --> 00:04:24,800
Guardamos y vamos a levantar el servidor.

55
00:04:28,850 --> 00:04:32,820
Se fija en que automáticamente redirige a clientes y que ha marcado.

56
00:04:32,910 --> 00:04:40,650
Si nos vamos a directivas cambia la página y queda marcado como activo el link directivas cliente directiva.

57
00:04:41,300 --> 00:04:48,410
Entonces de esa forma podemos tener nuestras propias rutas que carga y están mapeado los distintos componentes.

58
00:04:48,950 --> 00:04:54,530
Si se fijan, en ningún momento se está actualizando la página y siempre nos mantenemos en una sola

59
00:04:54,530 --> 00:04:55,010
página.

60
00:04:55,070 --> 00:05:02,450
Pero lo que cambia es el contenido principal, en este caso a través de la directiva router outlet que

61
00:05:02,450 --> 00:05:05,210
la tenemos dentro de la plantilla principal.

62
00:05:05,300 --> 00:05:05,450
AP.

63
00:05:05,450 --> 00:05:05,990
Component.

64
00:05:06,050 --> 00:05:06,620
HTML.

65
00:05:06,740 --> 00:05:07,430
Eso es todo.

66
00:05:07,550 --> 00:05:08,600
Es bastante simple.

67
00:05:08,780 --> 00:05:10,160
Bien que hagamos hasta acá.

68
00:05:10,300 --> 00:05:12,980
Y cualquier duda que tengan la revisamos en el foro.

69
00:05:13,100 --> 00:05:13,970
Hasta la próxima.