1 00:00:00,210 --> 00:00:00,780 Bienvenidos. 2 00:00:00,810 --> 00:00:05,960 Ahora vamos a trabajar con nuestra aplicación clientes, así que la idea es crear un nuevo componente 3 00:00:05,980 --> 00:00:06,750 clientes. 4 00:00:06,870 --> 00:00:12,840 Vamos a crear una clase de script con los atributos nombre, apellido, el email y la fecha. 5 00:00:13,530 --> 00:00:18,330 Básicamente lo mismo que teníamos en nuestra aplicación con SPRI, pero llevado a Angular. 6 00:00:18,390 --> 00:00:24,330 Por ahora vamos a armar nuestro ejemplo de forma sencilla, trabajando con Angular en un archivo que 7 00:00:24,330 --> 00:00:28,050 contenga el listado de clientes en un formato JSON. 8 00:00:28,140 --> 00:00:34,320 Luego, después, en vez de leer el listado de clientes de Jason estatico desde un archivo, vamos a 9 00:00:34,320 --> 00:00:40,890 obtener los dientes desde una API Rest de Spring por el lado bikeinn del servidor utilizando Spring 10 00:00:40,890 --> 00:00:41,670 Framework 5. 11 00:00:41,950 --> 00:00:46,290 Bien, vamos a ir a la consola para crear nuestro componente. 12 00:00:47,340 --> 00:00:51,750 Entonces con NG Generate podemos usar la componen. 13 00:00:51,810 --> 00:00:59,430 Podemos usar la C y el nombre del componente clientes y hacemos un antes de esto de forma automática 14 00:00:59,430 --> 00:01:02,310 va a crear la clase componente de script. 15 00:01:02,460 --> 00:01:10,620 Va a crear nuestra vista HTML que presenta los datos en el navegador, el view, el cliente components 16 00:01:10,740 --> 00:01:15,150 en la clase que representa controlador y también tenemos hoja de estilos. 17 00:01:15,370 --> 00:01:20,310 Bueno, todo lo que es modelo sería a través de la clase cliente descrip que la vamos a crear. 18 00:01:20,370 --> 00:01:35,520 Ahora nos vamos a ese reze a Pepe Cliente y acaba de crear la clase Aiji Generate Class y le damos el 19 00:01:35,520 --> 00:01:39,520 nombre cliente tal cual en singular. 20 00:01:40,520 --> 00:01:46,950 Bien, entonces nos vamos al app clientes y acá tenemos todo lo que creamos. 21 00:01:47,070 --> 00:01:48,130 Tenemos clientes. 22 00:01:48,150 --> 00:01:48,810 Component. 23 00:01:49,960 --> 00:01:56,470 Un componente que está decorado con componen el selector a Pepe Cliente y utiliza la vista cliente componen 24 00:01:56,650 --> 00:01:57,400 HTML. 25 00:01:57,670 --> 00:01:59,230 Hasta el momento no hay nada. 26 00:02:00,280 --> 00:02:02,120 Acá tenemos el archivo Speck. 27 00:02:02,320 --> 00:02:08,320 Lo vamos a eliminar de que no vamos a usar pruebas unitaria y también vamos a borrar la hoja de estilo. 28 00:02:09,760 --> 00:02:13,810 Vamos a modificar el cliente components para quitar el style o. 29 00:02:13,810 --> 00:02:18,880 °L de que como eliminamos el archivo también tenemos que eliminar este atributo. 30 00:02:19,150 --> 00:02:23,200 Si no marca un error, va a lanzar un error que no encuentra o no existe. 31 00:02:23,200 --> 00:02:24,580 El archivo cliente compone. 32 00:02:25,000 --> 00:02:28,780 Ese es lo que tenemos que quitar y lo demás lo dejamos tal cual. 33 00:02:29,020 --> 00:02:35,320 Pero de momento nos vamos a ocupar el o init, pero lo podemos dejar por ahora y guardamos con control. 34 00:02:36,370 --> 00:02:39,130 Acá tenemos la clase cliente descrip. 35 00:02:39,250 --> 00:02:42,910 Vamos a tener un par de atributos, por ejemplo el nombre, 36 00:02:49,480 --> 00:02:51,280 nombre, apellido, la fecha 37 00:02:55,330 --> 00:03:06,100 y podríamos tener también el Heidy del tipo number y finalmente vamos a tener el email, entonces una 38 00:03:06,100 --> 00:03:08,170 clase y acá tenemos todos los atributos. 39 00:03:08,200 --> 00:03:10,990 Por ahora quedamos hasta acá, ya tenemos una base. 40 00:03:11,110 --> 00:03:17,410 En la siguiente clase vamos a crear el listado de cliente en un formato JSON y vamos a mostrar en la 41 00:03:17,410 --> 00:03:25,180 vista en cliente componen HTML una tabla con el listado de los clientes y cualquier duda que tengan 42 00:03:25,270 --> 00:03:26,500 la revisamos en el foro. 43 00:03:26,650 --> 00:03:27,550 Hasta la próxima.