1
00:00:00,120 --> 00:00:03,960
Qué tal en esta clase continuamos creando las rutas de nuestro formulario.

2
00:00:04,020 --> 00:00:06,440
Vamos a ir al archivo app Module.

3
00:00:07,230 --> 00:00:12,120
Acá tenemos el arreglo para registrar las rutas y vamos a crear una nueva entrada.

4
00:00:12,210 --> 00:00:17,850
Primero la coma que es importante path para agregar la VL.

5
00:00:17,940 --> 00:00:21,530
El link le vamos a llamar clientes last form.

6
00:00:23,520 --> 00:00:33,840
Esta sería nuestra wireless que estaría tapiada al component for component que sirve componentes que

7
00:00:33,840 --> 00:00:35,430
creamos la clase anterior.

8
00:00:35,720 --> 00:00:42,180
Bien, ya con esto tenemos mapeado nuestra Aurélie nuestra ruta al componente formulario.

9
00:00:42,240 --> 00:00:43,990
Por lo tanto ahora podemos crear el link.

10
00:00:44,190 --> 00:00:45,090
Vamos a guardar.

11
00:00:45,330 --> 00:00:48,660
Vamos a ir a clientes y clientes.

12
00:00:48,690 --> 00:00:49,350
Component.

13
00:00:49,440 --> 00:00:57,870
HTML y sobre la tabla vamos a crear el botón con el link sería un Button y vamos a Saunier.

14
00:00:57,960 --> 00:01:00,480
Este botón dentro de un div.

15
00:01:03,240 --> 00:01:04,630
Bien, le damos el valor.

16
00:01:07,920 --> 00:01:15,680
Crear cliente y también un par de estilos con vuestra BTN botón.

17
00:01:15,810 --> 00:01:29,130
Lo vamos a redondear con PTN round y le damos un color y va a ser del tipo Button y en el dir arriba

18
00:01:29,430 --> 00:01:31,320
vamos a tener también una clase.

19
00:01:31,410 --> 00:01:38,190
Le vamos a dar un margen de dos, un M y un margen en el top y en el bottom horizontal.

20
00:01:38,520 --> 00:01:43,380
Y también lo vamos a alinear a la izquierda con tex left.

21
00:01:43,560 --> 00:01:45,150
Luego tenemos que crear el link.

22
00:01:45,300 --> 00:01:48,220
Se crea con la directiva router link.

23
00:01:48,360 --> 00:01:51,640
Usamos los corchetes router link.

24
00:01:51,990 --> 00:01:53,010
Y esto va a ser igual.

25
00:01:53,280 --> 00:01:57,060
Vamos a abrir comillas, corchete, comillas, simple.

26
00:01:57,180 --> 00:02:00,270
Y acá sería justamente la ruta que creamos acá.

27
00:02:00,310 --> 00:02:03,060
Clientes Ford comenzando con el art.

28
00:02:03,210 --> 00:02:04,140
Un valor absoluto.

29
00:02:04,650 --> 00:02:06,580
Clientes Ford.

30
00:02:06,960 --> 00:02:13,740
Bien, lo que hace Router Link es una directiva, es un Viure Halpert que nos permite crear links o

31
00:02:13,740 --> 00:02:18,030
enlaces hacia nuestras rutas rutas interna de nuestro proyecto.

32
00:02:18,360 --> 00:02:23,910
Es decir, son ruta que están mapeados a componente y que tenemos registradas en routes.

33
00:02:24,450 --> 00:02:28,320
Vamos a guardar y vamos a levantar el servidor de desarrollo.

34
00:02:34,910 --> 00:02:42,110
Acá tenemos la aplicación con F12, vemos un error de conexión y es porque no tenemos levantado nuestro

35
00:02:42,200 --> 00:02:45,980
bikeinn, así que vamos a ir a Eclipse y vamos a levantar el servidor.

36
00:02:46,640 --> 00:02:49,580
Entonces, con clic derecho, Ranas y Espíri imputaba.

37
00:02:55,450 --> 00:02:59,530
Volvemos, actualizamos y ahora tenemos listado de clientes.

38
00:02:59,590 --> 00:03:03,630
Vamos al formulario y ahora tenemos nombre, apellido y mail.

39
00:03:03,790 --> 00:03:12,640
Por ejemplo, si colocamos John Dou y El Correo y creamos, hacemos un clic en Crear.

40
00:03:13,120 --> 00:03:20,440
Observamos que en la consola aparece, clique y aparece los datos enviados de cliente apellido Dow Email

41
00:03:20,560 --> 00:03:21,220
y el nombre.

42
00:03:21,430 --> 00:03:23,740
Acá está el objeto cliente con todos sus datos.

43
00:03:24,460 --> 00:03:32,140
Si revisamos el componente form for componen this script, acá en el método Crear tenemos el log clickea

44
00:03:32,230 --> 00:03:34,960
y también tenemos el cliente.

45
00:03:35,080 --> 00:03:40,840
Imprimimos el objeto cliente que contiene la representación de sus datos en estructura.

46
00:03:40,840 --> 00:03:42,670
Yeison está funcionando perfecto.

47
00:03:42,880 --> 00:03:44,710
Vamos a ver la bidireccionalidad.

48
00:03:44,830 --> 00:03:51,580
Ya vimos cómo enviar desde desde el formulario los campos al componente, incluso en el método creee

49
00:03:51,670 --> 00:03:58,750
después a través del service y a través de la API Rest podemos persistir guardar este objeto en la base

50
00:03:58,750 --> 00:03:59,970
dato datos en el servidor.

51
00:04:00,400 --> 00:04:05,470
Pero también podría ser todo a la inversa, es decir, del bitcoin el api rest.

52
00:04:05,560 --> 00:04:06,970
Luego al component.

53
00:04:07,060 --> 00:04:08,470
Luego a la vista.

54
00:04:08,710 --> 00:04:13,990
Ahí podríamos pasar el objeto con todos sus datos de la consulta y mostrar en el formulario sus valores.

55
00:04:14,410 --> 00:04:21,460
Por ejemplo, si nos vamos acá tenemos un ejemplo simple si vamos a clientes y damos un valor por defecto

56
00:04:21,550 --> 00:04:27,250
nombre Andrés guardamos, volvemos al formulario.

57
00:04:28,090 --> 00:04:30,790
Acá observamos que por defecto aparece Andrés.

58
00:04:31,450 --> 00:04:37,300
Incluso podríamos regresar crear cliente y aparece el nombre de Andrés poblado en el objeto cliente.

59
00:04:37,390 --> 00:04:43,720
Por lo tanto, el objeto cliente, que es un atributo del componente form component, está mapeado al

60
00:04:43,720 --> 00:04:45,070
formulario y es bidireccional.

61
00:04:45,190 --> 00:04:49,510
Desde el formulario hace componente y componente al formulario.

62
00:04:49,630 --> 00:04:54,400
En ambas direcciones quedamos hasta acá y cualquier duda que tengan la revisamos en los foros.

63
00:04:54,580 --> 00:04:55,540
Hasta la próxima.