Archivos en la carpeta app

Antes de profundizar en el componente principal, revisemos los archivos que se encuentran en la carpeta app y sus funciones dentro de la aplicación.

Cuando se crea un nuevo proyecto de Angular, todo comienza en la carpeta app. Aquí se almacenan los archivos principales que definen la estructura de la aplicación. En esta sección, exploraremos el contenido de esta carpeta y analizaremos en detalle el componente principal, que actúa como punto de entrada a la interfaz de usuario.

Componente principal

Ahora, examinemos en detalle el componente principal, AppComponent. Este componente se crea por defecto al ejecutar el comando ng new y funciona como el componente raíz de la aplicación.

En Angular, los componentes se crean utilizando decoradores. Un decorador es una función especial que añade funcionalidad adicional a una clase.

Dentro del decorador @Component, se especifican configuraciones importantes que determinan cómo se verá y comportará el componente. Analicémoslas:

Elementos clave en el archivo app.component.ts:

• Selector (selector) – define cómo se nombrará el componente en el HTML. En este caso, puede utilizarse como <app-root></app-root>;

• Imports (imports) – lista de dependencias necesarias para que el componente funcione. En este ejemplo, utiliza RouterOutlet, que gestiona la visualización del contenido según la ruta;

• Template (templateUrl) – ruta al archivo HTML (app.component.html) que contiene la plantilla del componente;

• Styles (styleUrls) – ruta al archivo CSS (app.component.css) que define la apariencia del componente.

Cómo se utiliza el componente principal

El proceso comienza en el archivo index.html ubicado en la carpeta src. No contiene contenido típico, solo una estructura básica con una etiqueta especial:

Esta etiqueta <app-root> corresponde al selector en app.component.ts. Cuando Angular se inicializa, encuentra esta etiqueta y la reemplaza con el contenido de app.component.html.

Conclusión

El componente principal es el núcleo de la aplicación. Se carga primero y gestiona la plantilla principal. Todo lo que vemos en la pantalla pasa a través de él. La etiqueta <app-root> en index.html es el punto de entrada por el cual Angular "entra" en la página.