Introducción
Ahora que hemos creado y ejecutado exitosamente nuestra aplicación Angular, es momento de conocer su estructura interna. Aunque al inicio algunos archivos pueden parecer complejos, comprender el propósito de los elementos principales nos ayudará a navegar con mayor facilidad dentro del proyecto.
En este capítulo realizaremos un recorrido general por los archivos más importantes de una aplicación Angular Standalone y entenderemos cómo se relacionan entre sí.
El archivo index.html
Dentro de la carpeta src encontraremos el archivo:
src/index.html
Este archivo constituye el punto de entrada de nuestra aplicación web desde la perspectiva del navegador.
Al abrirlo veremos una estructura HTML similar a la siguiente:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>AngularPeliculas</title>
/
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<app-root></app-root>
</body>
</html>
Elementos importantes
Declaración del documento
<!DOCTYPE html>
Indica que el documento utiliza HTML5.
Etiqueta <head>
Contiene información relacionada con la página:
Título de la aplicación.
Codificación UTF-8.
Configuración del viewport.
Referencias a recursos externos.
Etiqueta <body>
Aquí encontramos un elemento muy importante:
<app-root></app-root>
Esta etiqueta no pertenece al estándar HTML. Se trata de un componente Angular que representa el punto de inicio de nuestra aplicación.
Todo el contenido visual que construyamos durante el curso será renderizado dentro de este elemento.
El archivo angular.json
En la raíz del proyecto encontraremos:
angular.json
Este archivo contiene gran parte de la configuración utilizada por Angular CLI para construir y ejecutar la aplicación.
Entre las configuraciones más importantes se encuentran:
Configuración de compilación.
Configuración de pruebas.
Archivos de estilos.
Archivos de recursos.
Ruta de salida para producción.
Por ejemplo:
"index": "src/index.html"
Esta configuración indica a Angular cuál es el archivo HTML principal que debe utilizar durante el proceso de compilación.
Carpeta de salida
Dentro de la configuración de compilación también encontraremos algo similar a:
"outputPath": "dist/angular-peliculas"
Esta ruta corresponde a la ubicación donde Angular generará los archivos finales optimizados para producción.
Más adelante, cuando aprendamos a publicar la aplicación, volveremos a trabajar con esta configuración.
El archivo main.ts
El verdadero punto de entrada de Angular se encuentra en:
src/main.ts
Este archivo es el encargado de arrancar la aplicación Angular.
Un ejemplo simplificado sería:
bootstrapApplication(AppComponent, appConfig)
.catch(err => console.error(err));
¿Qué significa Bootstrap?
En desarrollo de software, el término bootstrap hace referencia al proceso de inicialización de una aplicación.
En este caso:
Angular inicia la aplicación.
Carga la configuración principal.
Establece cuál será el componente raíz.
El componente raíz: AppComponent
En el archivo main.ts podemos observar que Angular inicia la aplicación utilizando:
AppComponent
Este componente se convierte en la raíz de toda la aplicación.
Es decir, Angular toma este componente y lo renderiza dentro de:
<app-root></app-root>
del archivo index.html.
La relación es la siguiente:
index.html
│
▼
<app-root>
│
▼
AppComponent
La carpeta app
Dentro de:
src/app
encontraremos varios archivos relacionados con el componente principal.
Por ejemplo:
app.component.ts
app.component.html
app.component.css
app.component.spec.ts
Cada uno cumple una función específica.
app.component.html
Este archivo contiene la interfaz visual del componente.
Por ejemplo:
<h1>Hola {{ title }}</h1>
<p>
¡Felicidades! Tu aplicación está funcionando.
</p>
Todo lo que aparezca en este archivo será mostrado al usuario en el navegador.
Cuando Angular ejecuta la aplicación, este contenido es renderizado dentro de:
<app-root>
que vimos anteriormente.
Modificando la interfaz
Supongamos que cambiamos el contenido de:
<p>
¡Felicidades! Tu aplicación está funcionando.
</p>
por:
<p>
Felicidades, tu aplicación está corriendo.
</p>
Al guardar los cambios:
Ctrl + S
Angular actualizará automáticamente la página gracias al sistema de recarga en caliente (Hot Reload).
El resultado se verá reflejado inmediatamente en el navegador.
app.component.ts
Mientras que el archivo HTML contiene la parte visual, el archivo:
app.component.ts
contiene la lógica del componente.
Por ejemplo:
export class AppComponent {
title = 'angular-peliculas';
}
Aquí podemos declarar:
Variables.
Métodos.
Propiedades.
Eventos.
Interpolación de datos
Observemos el siguiente fragmento del HTML:
<h1>Hola {{ title }}</h1>
La expresión:
{{ title }}
se conoce como interpolación.
Angular reemplaza automáticamente esa expresión por el valor de la variable definida en el componente:
title = 'angular-peliculas';
Por lo tanto, el navegador mostrará:
Hola angular-peliculas
Más adelante estudiaremos en profundidad este mecanismo de enlace de datos (Data Binding).
Separación de responsabilidades
Angular promueve separar la lógica de la interfaz visual.
Por ello, normalmente encontramos:
Esta organización facilita el mantenimiento y la escalabilidad de la aplicación.
La carpeta node_modules
En la raíz del proyecto existe una carpeta llamada:
node_modules
Esta carpeta contiene todas las dependencias instaladas mediante npm.
Por ejemplo:
Angular.
TypeScript.
RxJS.
Herramientas de compilación.
Librerías auxiliares.
Su tamaño suele ser considerable debido a la gran cantidad de paquetes utilizados por el ecosistema JavaScript.
¿Debemos modificarla?
No.
La carpeta node_modules es administrada automáticamente por npm y normalmente no se modifica manualmente.
Ocultar node_modules en Visual Studio Code
Debido a la gran cantidad de archivos que contiene, puede resultar útil ocultarla del explorador de Visual Studio Code.
Para ello:
Abrir configuración:
Ctrl + ,
Buscar:
exclude
Agregar la siguiente configuración:
"files.exclude": {
"**/node_modules": true
}
Esto únicamente oculta la carpeta del explorador visual.
Importante: La carpeta no se elimina ni afecta el funcionamiento del proyecto.
Flujo general de inicio de una aplicación Angular
El proceso de arranque puede resumirse de la siguiente manera:
index.html
│
▼
app-root
│
▼
main.ts
│
▼
bootstrapApplication()
│
▼
AppComponent
│
▼
app.component.html
Este flujo representa la base sobre la cual construiremos toda la aplicación durante el resto del curso.
Resumen
En este capítulo exploramos los elementos fundamentales de un proyecto Angular:
index.html es el punto de entrada de la aplicación web.
angular.json contiene la configuración principal del proyecto.
main.ts inicia la aplicación Angular.
AppComponent actúa como componente raíz.
app.component.html contiene la interfaz de usuario.
app.component.ts contiene la lógica del componente.
node_modules almacena las dependencias instaladas mediante npm.
Comprender la relación entre estos archivos es fundamental, ya que trabajaremos con ellos constantemente durante el desarrollo de nuestra aplicación de películas. En el próximo capítulo profundizaremos en el concepto de componentes, la pieza fundamental de cualquier aplicación Angular.
