Angular (2022) 03. Estructura carpetas

3. Estructura carpetas

- Vamos a analizar la estructura de carpetas del proyecto, para lo que vamos a utilizar Visual Studio Code.
Una vez abierto VSC nos dirigimos a la carpeta del proyecto.
Inicializamos el servidor desde la terminal de VSC.
Este servidor tiene que estar abierto mientras nosotros estamos trabajando, tendremos que abrir otra ventana de terminal para poder ejecutar comandos.

- Vamos a centrarnos principalmente en la carpeta src ya que en ella se encuentran todos los archivos necesarios para poder mostrar nuestros contenidos.

- El único punto de ingreso a nuestra aplicación a a través de nuestro index.html, en el podemos observar la etiqueta app-root que se encarga de cargar este componente.
Y viene a ser el componente principal de nuestra aplicación.
Cualquier cosa que queramos mostrar en nuestro sitio web lo hemos de hacer por medio de componentes.

- Podemos ver como desde el archivo app.component.ts con la etiqueta selector se define app-root, esto es muy importante porque a través del este selector nosotros vamos a poder llamar a nuestros componentes.

- También encontramos las propiedades:
templateUrl: desde aquí se llama a un documento que contiene todo el contenido que se muestra. Es un archivo opcional, ya que todo el contenido lo podríamos mostrar desde el archivo typeScript.

styleUrls: Del mismo modo podríamos trabajar con las hojas de estilos.

- En relación al archivo app.module.ts TypeScript es un framework modularizado, es decir todos nuestro archivitos los hemos de ir agrupando a un módulo.
Aquí vemos como se declaran todos los componentes del módulo.

- De todos modos hemos de mencionar que en la carpeta node_modules se encuentran todas las dependencias de npm que va a utilizar nuestra aplicación para poder funcionar.

- Queda mencionar:
En la carpeta assets colocaremos las imágenes que no necesitemos compilar.
En la carpeta environments podremos almacenar nuestras credenciales para trabajar en local o en remoto.
En styles.css definimos estilos globales para toda nuestra aplicación.