1 00:00:03,650 --> 00:00:09,520 Una aplicación angular típica consta de muchos componentes. 2 00:00:09,520 --> 00:00:16,225 Los componentes controlan una parte de la pantalla llamada como vista en Angular. 3 00:00:16,225 --> 00:00:21,840 Por lo tanto, cuando cree su pantalla en su aplicación Angular, 4 00:00:21,840 --> 00:00:25,310 puede dividir su pantalla en múltiples vistas, 5 00:00:25,310 --> 00:00:29,384 cada una de ellas siendo controlada por un componente separado. 6 00:00:29,384 --> 00:00:31,200 Hasta ahora, en el ejemplo, 7 00:00:31,200 --> 00:00:35,715 tenemos un único componente raíz que controla toda la pantalla. 8 00:00:35,715 --> 00:00:42,440 En esta lección, añadiremos un componente más que toma parte de la pantalla y toma el control 9 00:00:42,440 --> 00:00:45,890 de esa parte de la pantalla y se encarga de 10 00:00:45,890 --> 00:00:50,275 toda la representación de esa parte de la pantalla, aquí. 11 00:00:50,275 --> 00:00:54,060 Vamos a hacer una visita rápida al componente App que 12 00:00:54,060 --> 00:00:57,350 ya tenemos como parte de nuestra aplicación Angular. 13 00:00:57,350 --> 00:00:58,730 Por lo tanto, en este componente, 14 00:00:58,730 --> 00:01:04,250 se puede ver que estamos importando el componente desde el núcleo angular. 15 00:01:04,250 --> 00:01:07,100 Por lo tanto, esto nos proporciona la capacidad de 16 00:01:07,100 --> 00:01:11,585 definir un decorador de componentes y aplicarlo a nuestra clase. 17 00:01:11,585 --> 00:01:16,640 Por lo tanto, esto definirá un componente que forma parte de nuestra aplicación Angular. 18 00:01:16,640 --> 00:01:19,590 Así que, aquí, este componente en particular, 19 00:01:19,590 --> 00:01:22,970 como se puede ver, cuando se define el decorador del componente, 20 00:01:22,970 --> 00:01:30,450 consta de varias propiedades aquí una de ellas siendo el selector, aquí. 21 00:01:30,450 --> 00:01:36,375 Ahora, esta propiedad de selector en particular define una cadena aquí. 22 00:01:36,375 --> 00:01:40,010 Tenga en cuenta, en particular, lo que está contenido dentro de la cadena. 23 00:01:40,010 --> 00:01:42,080 Dice app-root. 24 00:01:42,080 --> 00:01:46,270 Ahora, mirando hacia atrás en el archivo index.html. 25 00:01:46,270 --> 00:01:48,915 Entonces, voy al archivo index.html. 26 00:01:48,915 --> 00:01:51,400 Puedes ver que justo ahí, 27 00:01:51,400 --> 00:02:00,570 estamos usando esta raíz de aplicación como una de las etiquetas en nuestro archivo index.html. 28 00:02:00,570 --> 00:02:05,630 Entonces, ahora ves que esta etiqueta en particular que estás usando se refiere 29 00:02:05,630 --> 00:02:11,270 al selector de lo que hemos especificado aquí, app-root. 30 00:02:11,270 --> 00:02:18,500 Por lo tanto, si desea dar una parte de la pantalla y hacer que sea controlable por un componente, 31 00:02:18,500 --> 00:02:23,135 luego usa el selector para especificar y luego incluirá 32 00:02:23,135 --> 00:02:28,310 la etiqueta del selector en su archivo HTML. 33 00:02:28,310 --> 00:02:32,190 Lo mismo se aplica también a la plantilla de un componente. 34 00:02:32,190 --> 00:02:35,330 Si incluye otro selector de otro componente 35 00:02:35,330 --> 00:02:39,350 en la plantilla de este componente, 36 00:02:39,350 --> 00:02:42,770 entonces esa parte de la pantalla se entregará a 37 00:02:42,770 --> 00:02:46,440 el segundo componente a controlar desde el segundo componente. 38 00:02:46,440 --> 00:02:52,304 También aprenderemos sobre eso en una de las lecciones posteriores. 39 00:02:52,304 --> 00:02:57,970 Ahora, la segunda parte que ve que se especifica es TemplateURL. 40 00:02:57,970 --> 00:03:06,560 Esta TemplateURL especifica el nombre del archivo de plantilla para este componente en particular. 41 00:03:06,560 --> 00:03:10,970 Entonces, en este caso, como puede ver, esto es app.component.html. 42 00:03:10,970 --> 00:03:14,720 Entonces, esa es la razón por la cual la plantilla se está definiendo en el archivo 43 00:03:14,720 --> 00:03:19,605 app.component.html para este componente en particular. 44 00:03:19,605 --> 00:03:25,270 Además, también puede proporcionar estilos para esta aplicación. 45 00:03:25,270 --> 00:03:30,105 Entonces, aquí estamos diciendo StyleURLs y luego aquí, 46 00:03:30,105 --> 00:03:36,610 entre corchetes estás proporcionando este dicho./app.component.scss. 47 00:03:36,610 --> 00:03:44,175 Entonces, lo que significa que este archivo SaaS particular se aplica a este estilo. 48 00:03:44,175 --> 00:03:48,620 Así que como viste cuando creamos nuestra aplicación Angular, 49 00:03:48,620 --> 00:03:53,970 especificé que el formato de estilo que voy a usar es un SCSS. 50 00:03:53,970 --> 00:03:56,650 Entonces, esa es la razón por la que estos archivos son SCSS. 51 00:03:56,650 --> 00:04:01,190 Si no usa el estilo SCSS y en su lugar crea normalmente, 52 00:04:01,190 --> 00:04:06,860 entonces estos serían solo archivos CSS y luego puede usar CSS para definir 53 00:04:06,860 --> 00:04:16,020 los estilos que se pueden usar en sus plantillas de aplicación o en sus plantillas de componentes. 54 00:04:16,020 --> 00:04:19,820 Por lo tanto, si tiene algún componente específico de estilos 55 00:04:19,820 --> 00:04:23,000 que desea incluir para este componente en particular, 56 00:04:23,000 --> 00:04:25,565 , entonces los incluirá en este archivo. 57 00:04:25,565 --> 00:04:29,965 También puede especificar la plantilla y el estilo en línea. 58 00:04:29,965 --> 00:04:33,280 Por lo tanto, si especifica el estilo o la plantilla en línea, 59 00:04:33,280 --> 00:04:37,785 simplemente lo especificaría como con comillas. 60 00:04:37,785 --> 00:04:40,080 Entonces, por ejemplo, puedo simplemente, 61 00:04:40,080 --> 00:04:42,520 en lugar de hacer la plantilla, 62 00:04:42,520 --> 00:04:47,180 simplemente puedo editar esto a la plantilla y 63 00:04:47,180 --> 00:04:52,475 luego definiré la plantilla dentro de comillas atrás aquí. 64 00:04:52,475 --> 00:04:59,420 Así que diría que y dentro de los qootes posteriores incluso puedo hacer plantillas como esta. 65 00:04:59,420 --> 00:05:07,360 Entonces, puedo decir h1 y luego título. 66 00:05:07,360 --> 00:05:17,060 Por lo tanto, esto sería lo que llamamos como plantilla en línea que usamos dentro de nuestra aplicación. 67 00:05:17,060 --> 00:05:19,280 Ahora, si usa comillas, 68 00:05:19,280 --> 00:05:23,690 también puede usar cosas como agregar dólares en 69 00:05:23,690 --> 00:05:28,955 para usar variables dentro de sus plantillas, etc. 70 00:05:28,955 --> 00:05:31,235 En este curso en particular, 71 00:05:31,235 --> 00:05:34,820 vamos a utilizar archivos de plantilla separados 72 00:05:34,820 --> 00:05:39,590 y crear las plantillas en esos archivos HTML en su lugar. 73 00:05:39,590 --> 00:05:45,050 Prefiero ese método de definir mis plantillas en lugar de hacer plantillas en línea. 74 00:05:45,050 --> 00:05:49,180 Pero si su plantilla es muy simple y contiene solo dos o tres líneas, 75 00:05:49,180 --> 00:05:56,235 entonces, por supuesto, use una plantilla en línea como esta dentro de su aplicación. 76 00:05:56,235 --> 00:06:02,930 Entonces, déjame cambiarlo de nuevo a mi valor original aquí. 77 00:06:02,930 --> 00:06:04,770 Lo mismo para los estilos. 78 00:06:04,770 --> 00:06:08,240 Además, puedo simplemente decir estilos y luego dentro de comillas 79 00:06:08,240 --> 00:06:12,500 incluye mis clases CSS dentro de las comillas traseras. 80 00:06:12,500 --> 00:06:15,245 Aunque como mencioné, 81 00:06:15,245 --> 00:06:24,895 prefiero mantenerlos en archivos separados solo por tener código limpio en mis archivos.ts aquí. 82 00:06:24,895 --> 00:06:27,515 Así que tenemos estilos de plantilla selector. 83 00:06:27,515 --> 00:06:30,010 También tendremos otro llamado ID de módulo. 84 00:06:30,010 --> 00:06:33,020 Por el momento no estoy usando eso para mi componente, 85 00:06:33,020 --> 00:06:40,395 pero en algunos casos deberá especificar el ID del módulo explícitamente para su componente. 86 00:06:40,395 --> 00:06:44,610 Veremos algunos ejemplos de eso un poco más tarde. 87 00:06:44,610 --> 00:06:50,955 Ahora, además, un componente no es más que una clase JavaScript o una clase Type Script. 88 00:06:50,955 --> 00:06:53,615 Así que es por eso que ves aquí, 89 00:06:53,615 --> 00:06:58,960 definiendo una clase diciendo AppComponent y luego estás exportando esta clase. 90 00:06:58,960 --> 00:07:01,820 La razón por la que usamos la exportación aquí, 91 00:07:01,820 --> 00:07:06,820 para que este componente se pueda importar en mi módulo de aplicación. 92 00:07:06,820 --> 00:07:10,070 Así que viste que estábamos importando esto en mi módulo de aplicación. 93 00:07:10,070 --> 00:07:18,350 Así que cada vez que desee hacer que cualquier componente o módulo sea portátil en otro módulo, 94 00:07:18,350 --> 00:07:25,245 siempre antepone la exportación a la clase aquí. 95 00:07:25,245 --> 00:07:28,040 Así que, además, 96 00:07:28,040 --> 00:07:34,295 vemos que tenemos algunas propiedades locales que definimos 97 00:07:34,295 --> 00:07:43,220 dentro de nuestras clases aquí y estas serían accesibles a través de mi plantilla. 98 00:07:43,220 --> 00:07:45,340 Así que puedo hacer uso de estos en mi plantilla. 99 00:07:45,340 --> 00:07:48,170 Entonces, las propiedades que se definen dentro de mi archivo 100 00:07:48,170 --> 00:07:53,230 component.ts son accesibles desde mis archivos de plantilla. 101 00:07:53,230 --> 00:08:00,875 Hablaremos sobre el aspecto de enlace de datos un poco más adelante en otra lección. 102 00:08:00,875 --> 00:08:08,075 Para resumir, lo que hemos aprendido hasta ahora es que un componente está definido por 103 00:08:08,075 --> 00:08:15,990 especificando el código y también especificando la plantilla correspondiente. 104 00:08:15,990 --> 00:08:19,850 Por lo tanto, dentro del código puede definir propiedades y métodos 105 00:08:19,850 --> 00:08:24,455 que serán accesibles desde su plantilla desde la plantilla correspondiente. 106 00:08:24,455 --> 00:08:26,530 Entonces, como vio, en los metadatos, 107 00:08:26,530 --> 00:08:29,370 en el decorador, en el decorador de componentes, 108 00:08:29,370 --> 00:08:33,425 especificó el nombre del archivo de plantilla como un 109 00:08:33,425 --> 00:08:38,380 de las propiedades para su clase de componente aquí. 110 00:08:38,380 --> 00:08:41,870 Del mismo modo, cualquier propiedad y método que defina en 111 00:08:41,870 --> 00:08:45,875 su componente será accesible desde su plantilla. 112 00:08:45,875 --> 00:08:49,645 No solo eso, también puede tener lo que se llama como evento 113 00:08:49,645 --> 00:08:53,450 enlace desde su plantilla a sus componentes. 114 00:08:53,450 --> 00:08:57,320 Entonces, si se genera algún evento en sus plantillas, por ejemplo, 115 00:08:57,320 --> 00:09:02,180 haciendo clic en un botón en su plantilla que puede desencadenar llamadas 116 00:09:02,180 --> 00:09:08,535 a métodos dentro de su código aquí, 117 00:09:08,535 --> 00:09:11,400 el código Javascript o el código Type Script aquí. 118 00:09:11,400 --> 00:09:16,790 Veremos el uso de aquellos en una de las lecciones posteriores y luego allí, nuevamente, 119 00:09:16,790 --> 00:09:20,180 revisitaré este punto sobre el enlace de la propiedad y el enlace de eventos, 120 00:09:20,180 --> 00:09:23,500 y explicaré esto con un poco más de detalle. 121 00:09:23,500 --> 00:09:29,840 Los componentes de una aplicación angular pueden organizarse en una jerarquía. 122 00:09:29,840 --> 00:09:32,470 Por lo tanto, siempre tendrá un componente raíz. 123 00:09:32,470 --> 00:09:33,835 Así que para nuestra aplicación, 124 00:09:33,835 --> 00:09:37,130 el archivo app.component.ts y 125 00:09:37,130 --> 00:09:43,039 la plantilla HTML correspondiente forman el componente raíz para nuestra aplicación 126 00:09:43,039 --> 00:09:46,724 y este componente raíz puede contener 127 00:09:46,724 --> 00:09:52,825 componentes abajo en una jerarquía y puede incluir componentes en la jerarquía. 128 00:09:52,825 --> 00:09:56,750 Veremos eso en el próximo ejercicio, 129 00:09:56,750 --> 00:10:02,275 donde crearemos otro componente y luego usaremos eso en nuestro componente raíz. 130 00:10:02,275 --> 00:10:04,960 Por lo tanto, puede tener múltiples componentes siendo 131 00:10:04,960 --> 00:10:08,005 incluidos en su componente raíz y estos componentes 132 00:10:08,005 --> 00:10:13,690 ellos mismos a su vez pueden usar otros componentes que están incluidos dentro de ellos. 133 00:10:13,690 --> 00:10:21,075 Por lo tanto, esta jerarquía de componentes es lo que le permite diseñar la pantalla de su aplicación. 134 00:10:21,075 --> 00:10:24,940 Con esta rápida comprensión de los componentes 135 00:10:24,940 --> 00:10:28,810 y cómo los componentes son útiles para diseñar nuestra aplicación, 136 00:10:28,810 --> 00:10:32,935 pasaremos a nuestro próximo ejercicio donde crearemos 137 00:10:32,935 --> 00:10:37,339 y agregaremos otro componente a nuestra aplicación Angular 138 00:10:37,339 --> 00:10:41,810 y luego definiremos una plantilla para ese componente y luego hará uso de 139 00:10:41,810 --> 00:10:47,230 ese componente dentro de nuestro componente raíz para diseñar nuestra pantalla.