1
00:00:00,240 --> 00:00:02,490
Bien, veamos una introducción a los componentes.

2
00:00:02,580 --> 00:00:04,920
Qué es lo que son lo más importante de Angular?

3
00:00:05,040 --> 00:00:07,920
Ya que Angular está compuesto por componentes.

4
00:00:08,040 --> 00:00:12,360
Bueno, también hay otras cosas como los módulos, las directivas, los PIP.

5
00:00:12,510 --> 00:00:18,090
En fin, hay muchas cosas, pero todo giran alrededor de componentes, como por ejemplo una aplicación

6
00:00:18,090 --> 00:00:23,340
de Angular tiene un módulo principal, pero este módulo principal carga un componente principal y este

7
00:00:23,340 --> 00:00:27,390
componente principal también está compuesto por otros componentes y ya está.

8
00:00:27,400 --> 00:00:32,910
La gracia tiene varias características propias que hace que tu componente también se puedan componer

9
00:00:33,030 --> 00:00:34,950
o formar por otros componentes.

10
00:00:35,040 --> 00:00:36,900
Pero bien, qué es lo que son estos componentes?

11
00:00:37,020 --> 00:00:43,530
Bueno, pequeñas partes o piezas bloques de nuestra aplicación en términos de programación son clases,

12
00:00:43,560 --> 00:00:49,240
claro, son clases detalle script que tienen un decorador y también están asociados a una plantilla.

13
00:00:49,290 --> 00:00:53,340
Cada uno de estos componentes de esta clases tiene su propia lógica.

14
00:00:53,400 --> 00:00:57,840
Cumple una función, un rol muy específico dentro de esta aplicación.

15
00:00:58,020 --> 00:01:05,070
Por ejemplo, un componente pueden ser un menú de navegación, pero también una barra lateral o sidebar,

16
00:01:05,160 --> 00:01:11,280
también un calendario, un pie de página o footer, pero también puede ser páginas, páginas dinámicas

17
00:01:11,340 --> 00:01:14,160
que van cambiando su contenido a través de rutas.

18
00:01:15,150 --> 00:01:16,500
Bien, veamos sus características.

19
00:01:16,620 --> 00:01:21,630
Bueno, una clase de tag script con una función específica dentro de la aplicación.

20
00:01:21,720 --> 00:01:24,750
Ya sabemos que los componentes forman nuestra aplicación.

21
00:01:24,840 --> 00:01:28,410
Podemos tener varias componente y cada uno es un pedazo de código.

22
00:01:28,500 --> 00:01:34,830
Un bloque que realiza alguna tarea específica por detrás de escena implementa el patrón de diseño composite,

23
00:01:34,950 --> 00:01:39,540
es decir, los componentes se pueden anidar y puede estar formados unos con otros.

24
00:01:39,630 --> 00:01:47,040
Dentro de la clase de un componente se indica una anotación, se decora y esta anotación incluye metadata

25
00:01:47,100 --> 00:01:47,910
configuraciones.

26
00:01:48,000 --> 00:01:53,790
Una de ellas es el selector, la etiqueta que vamos a utilizar para cargar el componente en el HTML.

27
00:01:53,910 --> 00:01:58,770
Entonces se van anidando mediante el selector, pero también se pueden enrutar.

28
00:01:58,890 --> 00:02:01,770
Puede estar asociado a una ruta WHERE de Angular.

29
00:02:01,890 --> 00:02:04,050
Entonces cae que hacemos un clic en estas rutas.

30
00:02:04,170 --> 00:02:10,020
El contenido de nuestra página va cambiando de forma dinámica y se muestre contenido de ese componente

31
00:02:10,020 --> 00:02:11,340
que está mapeado a esa ruta.

32
00:02:11,500 --> 00:02:15,630
Bueno, muy parecido a lo que sucede con Spring, con Spring MVC.

33
00:02:15,720 --> 00:02:21,540
Cuando un controlador con un método Handler está asociado o está mapeado a una ruta, también tiene

34
00:02:21,540 --> 00:02:25,230
su propio ciclo para inicializar c para destruirse.

35
00:02:25,350 --> 00:02:31,890
Hacer algo cuando cambia algún elemento hijo o padre de los componentes, realizar alguna tarea antes

36
00:02:32,010 --> 00:02:33,240
de renderizar la vista.

37
00:02:33,390 --> 00:02:37,530
En fin, varias cosas MVC separa lógica de programación.

38
00:02:37,620 --> 00:02:43,320
El código TypeScript, que es una clase que soporta, da soporte a una plantilla, por lo tanto maneja

39
00:02:43,350 --> 00:02:48,080
tanto el HTML separado de la clase y por otro lado tenemos también la clase.

40
00:02:48,110 --> 00:02:53,220
Es que representan lógica negocio como los servis y la clase model que representa los datos que tan

41
00:02:53,220 --> 00:02:54,540
mapeados a los Yeison.

42
00:02:54,630 --> 00:03:00,800
Bueno, al final el componente es el controlador que interactúa con el servis, con la lógica negocio.

43
00:03:00,900 --> 00:03:06,780
El servis le retorna los datos en Yeison y el componente se lo pasa a la plantilla.

44
00:03:06,840 --> 00:03:12,480
Entonces finalmente es un MBC, el usuario interactúa con la plantilla, con la vista, con controles,

45
00:03:12,480 --> 00:03:18,720
con eventos, la cual es la clase componente, da soporte, recibe estos datos, interactúa con el servis

46
00:03:18,840 --> 00:03:19,760
lógica negocio.

47
00:03:19,890 --> 00:03:23,400
Bueno y después los datos se imprimen, se presentan en la vista.

48
00:03:23,490 --> 00:03:26,490
Otra característica muy importante es que son asíncrono.

49
00:03:26,550 --> 00:03:31,170
Cada componente se ejecuta en su propio proceso y no se interrumpen entre sí.

50
00:03:31,230 --> 00:03:36,150
Por lo tanto, si un componente falla, lo demás se siguen ejecutando en un proceso diferente.

51
00:03:36,240 --> 00:03:41,550
Nos afectan unos con otros, no se rompe la aplicación, se ejecutan de forma paralela y un componente

52
00:03:41,550 --> 00:03:42,060
tampoco.

53
00:03:42,150 --> 00:03:47,190
No tiene que estar esperando a que se inicializa en los demás para poder inicializar el mismo.

54
00:03:47,290 --> 00:03:52,860
Bueno, y también soportan inyección de dependencia vía constructor podemos inyectar objetos que sean

55
00:03:52,950 --> 00:03:56,520
inyectables y además cada componente maneja su propio estilo.

56
00:03:56,580 --> 00:04:00,800
Cada uno está asociado a un HTML y también a una hoja de estilos.

57
00:04:01,000 --> 00:04:03,720
Ese es, por ejemplo, su componente tiene ciertos estilo.

58
00:04:03,810 --> 00:04:09,720
Esos estilos no afectan a los demás componentes, son propios de cada uno y así mucha característica

59
00:04:09,720 --> 00:04:09,960
más.

60
00:04:10,080 --> 00:04:15,720
Después, durante el curso vamos a ir entrando en detalle y profundizando el concepto de los componentes

61
00:04:15,960 --> 00:04:17,810
y nos vemos en la siguiente clase.