Estructura de un proyecto en Angular

Cuando empecemos un proyecto en Angular, es muy importante estructurar las carpetas para que sean escalables y evitar desorden en el desarrollo. Además, al crear nuestro proyecto, Angular-cli crea muchas carpetas y archivos que son imprescindibles saber para qué existen, ya que pueden surgirnos errores sobre ellos.

Por ello, en este artículo voy a explicar la estructura de un proyecto en Angular. ¡Vamos allá!

Estructura básica de un proyecto en Angular

Al realizar un nuevo proyecto, Angular Cli nos genera un nuevo espacio de trabajo,ng new. Aquí te explico cómo instalar Angular Cli

e2e: esta carpeta, denominada “end to end”, engloba unas series de ficheros cuya función es la realización de test automáticos, como si un usuario interactuase con la app. Se ejecuta con el comando ng e2e.
node_modules: es la carpeta que contiene todas las dependencias de nuestro proyecto.
Src: es el directorio donde trabajaremos nuestros módulos. Además, es el más importante, ya que contiene todo el código.

Carpeta app
Aquí se encuentra la carpeta app donde se ubica toda la implementación de los componentes principales, junto a su template html y archivos de estilos css.
Carpeta assets
Contendrá todos los asset y archivos adicionales para hacer que el proyecto funcione.
Carpeta enviroments
Donde se encuentra las configuraciones y variables de entorno para poner el proyecto tanto en desarrollo como en producción..
Archivo favicon.ico
Es el archivo del icono del proyecto.
Archivo index.html
Es el archivo de la página principal del proyecto.
Archivo main.ts
Es el archivo Type Script inicial del proyecto donde podrás configurar todas las configuraciones globales del proyecto.

editorconfig: es la configuración de nuestro editor de código.
.gitignore: son las carpetas o archivos que debe ignorar el git cuando lo añadamos al repositorio.
angularjson: contiene la configuración de Angular. Además, incluye rutas, versiones, etc.
package.json: es la configuración de nuestra aplicación. Contiene el nombre de la app, las dependencias necesarias para su correcta ejecución y muchas otras cosas.
REARME.md: aquí podemos añadir información sobre la aplicación. Este archivo es leído por GIT y los muestra en el repositorio.
tsconfig.json: contiene la configuración TypeScript.
tslint.json: se utiliza para que el código sea sostenible y se mantenga.

Desarróllate profesionalmente con nuestro curso de Angular

¿Quieres mejorar tus posibilidades de cambiar de puesto de trabajo o incorporarte al mercado laboral? Estas en el sitio adecuado. En Besoftware buscamos talentos digitales como tu para ayudarte a desarrollarte profesionalmente y llegar a donde te propongas.

Por ello, vamos a impartir un curso en Angular de forma videopresencial, para aprender desde casa, de la mano de nuestros profesionales expertos en la materia. Y te preguntarás ¿merecerá la pena este curso? Descúbrelo por ti mismo.

Materias que se verán en el curso

1. Introducción a Angular.

2. Angular Cli.

3. Node y Npm.

4. Instalación y primeros pasos.

5. Editor de Código.

6. Estructura de un proyecto.

7. Resumen del flujo de ejecución de la aplicación básica Angular.

8. Elementos que conforman Angular.

9. Primer ejemplo práctico.

10. Componentes y Plantillas.

11. Módulos 12. Typescript.

13. Funciones de flecha.

14. Clases, Modelos de datos y Objetos.

15. Directivas.

16. Comunicación entre componentes ( Input / Output ).

17. ¡Y mucho más!

¡Te esperamos!

Más información