Estructura de un proyecto Angular

Cuando creamos un proyecto con Angular CLI automáticamente se crean los siguiente ficheros que son la estructura base de Angular

Estructura general del proyecto.

De forma general esta estructura es la que crea Angular CLI cuando empiezas a trabajar con Angular, te voy a explicar los directorios más relevantes.

📁 node_modules: Con NPM agregamos las dependencias JavaScript estas dependencias se alojas en esta carpeta, no es común manipular esta carpeta.

📁 src: Aquí se encuentran todos los ficheros que componen la aplicación web.

📄 .angular.json: La función de este archivo es servir de guía para Angular CLI, declarando una serie de atributos que permiten a esta herramienta realizar operaciones sobre nuestra aplicación

📄 .gitignore: Es un archivo de GIT el en el cual se parametriza que carpetas deben o no subir al repositorio.

📄 karma.conf.js: Es un archivo de configuración de TEST por defecto Angular CLI lo instala.

📄 package-lock.json: Es un fichero muy importante que te evitará un montón de problemas en tus repositorios ya que este fichero tiene las versiones con las que funciona actualmente tu proyecto evitando que NPM instale la última versión disponible de la dependencia.

📄 package.json: Contiene la información del proyecto como su nombre, su versión, puedes crear scripts personalizados. Este fichero también contiene las dependencias instaladas.

📄 tsconfig.json: Contiene la configuración de Typescript con la que vamos a desarrollar en el proyecto Angular.

Estructura de la aplicación web (Angular – SRC)

Así como para una página web Angular también contiene su estructura de ficheros html, javascript, css.

📁 app: En esta carpeta se encuentran los componentes, vistas, servicios que le darán funcionalidad a la aplicación web.

📄 app.module.ts: En este fichero se especifican los componentes que va a usar la aplicación web cuando Angular CLI genera nuevos componentes se importan automáticamente aquí.

📄 favicon: Es el icono de la web.

📄 index.html: Es el fichero de entrada, este archivo es el primero en ejecutarse en el servidor e instanciar todos los componentes de angular mediante la etiqueta <app-root></app-root>.

📄 main.ts: Contiene configuraciones del proyecto Angular.

📄 polyfills.ts: Configuraciones y código que se ejecutará antes de que se inicie la app.

 📄 styles.css: Aqui se colocaran los estilos globales para toda la aplicación, se suelen colocar las fuentes, colores.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *