Una aplicación angular típica consta de muchos componentes.
Los componentes controlan una parte de la pantalla llamada como vista en Angular.
Por lo tanto, cuando cree su pantalla en su aplicación Angular,
puede dividir su pantalla en múltiples vistas,
cada una de ellas siendo controlada por un componente separado.
Hasta ahora, en el ejemplo,
tenemos un único componente raíz que controla toda la pantalla.
En esta lección, añadiremos un componente más que toma parte de la pantalla y toma el control
de esa parte de la pantalla y se encarga de
toda la representación de esa parte de la pantalla, aquí.
Vamos a hacer una visita rápida al componente App que
ya tenemos como parte de nuestra aplicación Angular.
Por lo tanto, en este componente,
se puede ver que estamos importando el componente desde el núcleo angular.
Por lo tanto, esto nos proporciona la capacidad de
definir un decorador de componentes y aplicarlo a nuestra clase.
Por lo tanto, esto definirá un componente que forma parte de nuestra aplicación Angular.
Así que, aquí, este componente en particular,
como se puede ver, cuando se define el decorador del componente,
consta de varias propiedades aquí una de ellas siendo el selector, aquí.
Ahora, esta propiedad de selector en particular define una cadena aquí.
Tenga en cuenta, en particular, lo que está contenido dentro de la cadena.
Dice app-root.
Ahora, mirando hacia atrás en el archivo index.html.
Entonces, voy al archivo index.html.
Puedes ver que justo ahí,
estamos usando esta raíz de aplicación como una de las etiquetas en nuestro archivo index.html.
Entonces, ahora ves que esta etiqueta en particular que estás usando se refiere
al selector de lo que hemos especificado aquí, app-root.
Por lo tanto, si desea dar una parte de la pantalla y hacer que sea controlable por un componente,
luego usa el selector para especificar y luego incluirá
la etiqueta del selector en su archivo HTML.
Lo mismo se aplica también a la plantilla de un componente.
Si incluye otro selector de otro componente
en la plantilla de este componente,
entonces esa parte de la pantalla se entregará a
el segundo componente a controlar desde el segundo componente.
También aprenderemos sobre eso en una de las lecciones posteriores.
Ahora, la segunda parte que ve que se especifica es TemplateURL.
Esta TemplateURL especifica el nombre del archivo de plantilla para este componente en particular.
Entonces, en este caso, como puede ver, esto es app.component.html.
Entonces, esa es la razón por la cual la plantilla se está definiendo en el archivo
app.component.html para este componente en particular.
Además, también puede proporcionar estilos para esta aplicación.
Entonces, aquí estamos diciendo StyleURLs y luego aquí,
entre corchetes estás proporcionando este dicho./app.component.scss.
Entonces, lo que significa que este archivo SaaS particular se aplica a este estilo.
Así que como viste cuando creamos nuestra aplicación Angular,
especificé que el formato de estilo que voy a usar es un SCSS.
Entonces, esa es la razón por la que estos archivos son SCSS.
Si no usa el estilo SCSS y en su lugar crea normalmente,
entonces estos serían solo archivos CSS y luego puede usar CSS para definir
los estilos que se pueden usar en sus plantillas de aplicación o en sus plantillas de componentes.
Por lo tanto, si tiene algún componente específico de estilos
que desea incluir para este componente en particular,
, entonces los incluirá en este archivo.
También puede especificar la plantilla y el estilo en línea.
Por lo tanto, si especifica el estilo o la plantilla en línea,
simplemente lo especificaría como con comillas.
Entonces, por ejemplo, puedo simplemente,
en lugar de hacer la plantilla,
simplemente puedo editar esto a la plantilla y
luego definiré la plantilla dentro de comillas atrás aquí.
Así que diría que y dentro de los qootes posteriores incluso puedo hacer plantillas como esta.
Entonces, puedo decir h1 y luego título.
Por lo tanto, esto sería lo que llamamos como plantilla en línea que usamos dentro de nuestra aplicación.
Ahora, si usa comillas,
también puede usar cosas como agregar dólares en
para usar variables dentro de sus plantillas, etc.
En este curso en particular,
vamos a utilizar archivos de plantilla separados
y crear las plantillas en esos archivos HTML en su lugar.
Prefiero ese método de definir mis plantillas en lugar de hacer plantillas en línea.
Pero si su plantilla es muy simple y contiene solo dos o tres líneas,
entonces, por supuesto, use una plantilla en línea como esta dentro de su aplicación.
Entonces, déjame cambiarlo de nuevo a mi valor original aquí.
Lo mismo para los estilos.
Además, puedo simplemente decir estilos y luego dentro de comillas
incluye mis clases CSS dentro de las comillas traseras.
Aunque como mencioné,
prefiero mantenerlos en archivos separados solo por tener código limpio en mis archivos.ts aquí.
Así que tenemos estilos de plantilla selector.
También tendremos otro llamado ID de módulo.
Por el momento no estoy usando eso para mi componente,
pero en algunos casos deberá especificar el ID del módulo explícitamente para su componente.
Veremos algunos ejemplos de eso un poco más tarde.
Ahora, además, un componente no es más que una clase JavaScript o una clase Type Script.
Así que es por eso que ves aquí,
definiendo una clase diciendo AppComponent y luego estás exportando esta clase.
La razón por la que usamos la exportación aquí,
para que este componente se pueda importar en mi módulo de aplicación.
Así que viste que estábamos importando esto en mi módulo de aplicación.
Así que cada vez que desee hacer que cualquier componente o módulo sea portátil en otro módulo,
siempre antepone la exportación a la clase aquí.
Así que, además,
vemos que tenemos algunas propiedades locales que definimos
dentro de nuestras clases aquí y estas serían accesibles a través de mi plantilla.
Así que puedo hacer uso de estos en mi plantilla.
Entonces, las propiedades que se definen dentro de mi archivo
component.ts son accesibles desde mis archivos de plantilla.
Hablaremos sobre el aspecto de enlace de datos un poco más adelante en otra lección.
Para resumir, lo que hemos aprendido hasta ahora es que un componente está definido por
especificando el código y también especificando la plantilla correspondiente.
Por lo tanto, dentro del código puede definir propiedades y métodos
que serán accesibles desde su plantilla desde la plantilla correspondiente.
Entonces, como vio, en los metadatos,
en el decorador, en el decorador de componentes,
especificó el nombre del archivo de plantilla como un
de las propiedades para su clase de componente aquí.
Del mismo modo, cualquier propiedad y método que defina en
su componente será accesible desde su plantilla.
No solo eso, también puede tener lo que se llama como evento
enlace desde su plantilla a sus componentes.
Entonces, si se genera algún evento en sus plantillas, por ejemplo,
haciendo clic en un botón en su plantilla que puede desencadenar llamadas
a métodos dentro de su código aquí,
el código Javascript o el código Type Script aquí.
Veremos el uso de aquellos en una de las lecciones posteriores y luego allí, nuevamente,
revisitaré este punto sobre el enlace de la propiedad y el enlace de eventos,
y explicaré esto con un poco más de detalle.
Los componentes de una aplicación angular pueden organizarse en una jerarquía.
Por lo tanto, siempre tendrá un componente raíz.
Así que para nuestra aplicación,
el archivo app.component.ts y
la plantilla HTML correspondiente forman el componente raíz para nuestra aplicación
y este componente raíz puede contener
componentes abajo en una jerarquía y puede incluir componentes en la jerarquía.
Veremos eso en el próximo ejercicio,
donde crearemos otro componente y luego usaremos eso en nuestro componente raíz.
Por lo tanto, puede tener múltiples componentes siendo
incluidos en su componente raíz y estos componentes
ellos mismos a su vez pueden usar otros componentes que están incluidos dentro de ellos.
Por lo tanto, esta jerarquía de componentes es lo que le permite diseñar la pantalla de su aplicación.
Con esta rápida comprensión de los componentes
y cómo los componentes son útiles para diseñar nuestra aplicación,
pasaremos a nuestro próximo ejercicio donde crearemos
y agregaremos otro componente a nuestra aplicación Angular
y luego definiremos una plantilla para ese componente y luego hará uso de
ese componente dentro de nuestro componente raíz para diseñar nuestra pantalla.