Crea una cuenta o inicia sesi贸n

隆Contin煤a aprendiendo sin ning煤n costo! 脷nete y comienza a potenciar tu carrera

Estructura de un proyecto en Angular

4/22
Recursos

Angular posee desde el inicio de un proyecto muchos directorios y archivos que se generan por defecto al crearlo. Mira qu茅 es cada cosa:

Screenshot from 2022-03-18 15-17-44.png

De arriba hacia abajo:

  • node_modules: Todo proyecto de Javascript posee este directorio donde se almacenan las librer铆as y dependencias que se descarguen con NPM.
  • src: Directorio principal del proyecto donde encontramos:
    • app: Directorio donde guardaremos todo el c贸digo fuente de Angular.
    • assets: Directorio para im谩genes y otros recursos que la app necesita.
    • environments: Directorio de ambientes, por defecto viene con desarrollo y producci贸n.
    • favicon.ico: 脥cono por defecto que tendr谩 la pesta帽a del navegador.
    • index.html: Archivo HTML principal desde donde se construye toda la aplicaci贸n.
    • main.ts: Archivo principal para la configuraci贸n de Angular.
    • polyfills.ts: Librer铆a para que Angular funcione en navegadores viejos y que la aplicaci贸n sea retro compatible.
    • styles.scss: Archivo principal de estilos.
    • test.ts: Archivo principal para lanzar el ambiente de pruebas de Angular.
  • .browserslistrc: Lista de navegadores y sus versiones que permite configurar la compatibilidad de la aplicaci贸n con cada uno.
  • .editorconfig: Permite autoformatear los archivos, espacios, indentaci贸n, etc. Hay que tener instalado la extensi贸n en el editor.
  • .gitignore: Indicarle a GIT qu茅 archivos/directorios ignorar.
  • angular.json: Archivo principal con toda la configuraci贸n del proyecto Angular.
  • karma.conf.js: Archivo de configuraci贸n de Karma. Karma es un task runner para correr pruebas unitarias.
  • package-lock.json: Describe el las dependencias exactas que se generaron en la instalaci贸n del proyecto.
  • package.json: Archivo para el manejo de dependencias, scripts y metadatos relevantes para el proyecto.
  • README.md: Archivo markdown para la documentaci贸n del proyecto.
  • tsconfig.app.json: Archivo principal para la configuraci贸n de TypeScript.
  • tsconfig.json: Extensi贸n con m谩s configuraciones de TypeScript.
  • tsconfig.spec.json: Configuraci贸n de TypeScript pero para el ambiente de pruebas.

Aporte creado por: Kevin Fiorentino.

Aportes 41

Preguntas 13

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

A los amantes de platzi 馃挌 les recuerdo que con amor lanzaron un tema de VSCode para nosotros.

PlatziTheme

RESUMEN:

鈥 src
Aqui se encuentra el coraz贸n del proyecto, est谩n los componentes, htm, css, etc.

鈥 .browserslistrc
Indica a angular en que versiones de navegadores tiene que ser compatible tu aplicaci贸n.

鈥 .editorconfig
Tiene que ver con el trabajo en el equipo, ver el mismo espacio de identaci贸n, etc.
Para que este archivo funcione se debe tener un plugin en el VSCode: EditorConfig for VS Code

鈥 tsconfig.json
Tiene que ver con la configuraci贸n de angular con tipescript.
Este archivo nos dice como va a compilar, hacia donde va a transpilar los archivos, que versi贸n vamos a utilizar de JavaScript, ver algunos compiladores de angular.

鈥 angular.json
Aqui podemos manejar diferentes ambientes, como por ejemplo para realizar pruebas(tester), tambi茅n para algunas configuraciones de compilaci贸n de angular.

鈥 karma.conf.js
Configuraci贸n para correr pruebas unitarias.


鈥 .nvmrc
Este archivo debemos agregarlo, indica cual es la versi贸n de node recomendada para correr el proyecto.


PLUGIN+:
-> Angular Language Service
-> Ayuda que la experiencia con angular sea increible.

El archivo .nvmrc est谩 brutal, no lo conoc铆a jeje

Hab铆a aplazado el aprender Angular, por fin tome la decisi贸n y me esta gustando.

Para copiar la version de node en el .nvmrc, pueden usar el siguiente comando

node -v >  .nvmrc 

Si tienes diferentes versiones de node y adem谩s tienes el nvm (node version manager)
puedes creas el fichero
.nvmrc
donde podr谩s indicar la versi贸n recomendada de node para correr este proyecto.

Para ver que versi贸n tienes en la consola pones

node -v

y copias y pegas este valor en el fichero, en mi caso es v14.17.6

Ahora, en la version actual que tengo, no posee .browserslistrc,

Angular por defecto trabaja con typescript

Que buen nombre que escogieron para las pruebas, Karma, lo que no hagas bien hoy lo pagaras manana

Poniendo esta instrucci贸n en Visual Studio Code instalas el plugin mencionado
Ctrl+P

ext install EditorConfig.EditorConfig

miren mi pagina en mi perfil. creo que lo hice lo mejor que pude con comandos. dios los bendiga a todos.

En esta nueva aventura lo importante es seguir y mejorar.

.nvmrc es lo mejor que han podido explicar en este curso, seguro que es lo mas impresionante.

Como instalar el manager de versiones de node
https://www.youtube.com/watch?v=tFxPR6-BYOs&ab_channel=dhandrohit

Pasos.
1.- Se decargar el nvm download windows
2.Instalar el .exe
3.Comandos usados
4.Nvm: para revisar que ya se instalo
5.Nvm list : muestra todas las versiones de node instaladas
6.Nvm list aviable: revisar que versiones de node est谩n instaladas
7.Nvm install numero del versi贸n
8.Nvm use numero del versi贸n

Estructura de un proyecto en Angular

Ya vimos como nuestro CLI nos crea un proyecto con una estructura basica con unos archivos y directorios los cuales corresponden a:

 /.angular
.browserslistrc
.editorconfig
.git
.gitignore
.nvmrc
/.vscode
README.md
angular.json
karma.conf.js
/node_modules
package-lock.json
package.json
/src
tsconfig.app.json
tsconfig.json
tsconfig.spec.json
  • src: En este directorio se encuentra la base logica de nuestro proyecto (Componentes, modulos, servicios, pipes, etc), aca es donde crearemos nuestros componentes y es donde en particular estaremos trabajando la mayoria del tiempo codificando.

  • .browserslistrc: Es un archivo que por lo general indica a angular en que versiones de navegadores tiene que ser compatible tu aplicaci贸n. Si tuvieramos que desarrollar por algun motivo una aplicacion para una version antigua o una version en especifico de un navegador, en este archivo es donde se deberia indicar el navegador y la version en especifico

  • .editorconfig: Este archivo permite definir la configuracion de escritura y visualizacion de codigo en los diferentes editores. Ayuda al equipo de desarrollo configurar cosas como cuantos espacios de identacion existira en el codigo, etc. Para que este archivo funcione se debe tener un plugin en el VSCode: EditorConfig for VS Code

  • tsconfig.json: En este archivo se defina la configuraci贸n de angular con typescript.
    Este archivo nos dice como va a compilar, hacia donde va a transpilar los archivos, que versi贸n vamos a utilizar de JavaScript, entre otras configuraciones.

  • angular.json: En este archivo es donde podemos definir el comportamiento de la amplicacion en diferentes ambientes de despliegue. Tambien algunas configuraciones como por ejemplo importacion de librerias por cdn, etc.

  • karma.conf.js: Es un archivo clave para correr pruebas unitarias de nuestra aplicacion.

  • .nvmrc: Este archivo por lo general no lo crea Angular con el ng new, asi que es recomendable crearlo con el nombre .nvmrc. La caracteristica principal de este archivo es que permite definir la version en especifico de nodejs con la cual trabajara nuestra aplicacion. Esto nos ayuda a que el proyecto pueda ser usado por otros miembros del equipo de desarrollo sin tener que sufrir los conflictos de la version de node de cada maquina.

NOTA: Como dato adicional, es recomendable instalar algunos plugins importantes para el desarrollo en angular:
- Angular Language Service
- EditorConfig

La estructura de un proyecto de Angular puede variar dependiendo de la configuraci贸n y las opciones que elijas al crear el proyecto, pero en general, un proyecto de Angular tiene la siguiente estructura:
my-project/
鈹溾攢鈹 e2e/
鈹溾攢鈹 node_modules/
鈹溾攢鈹 src/
鈹 鈹溾攢鈹 app/
鈹 鈹溾攢鈹 assets/
鈹 鈹溾攢鈹 environments/
鈹 鈹溾攢鈹 index.html
鈹 鈹溾攢鈹 main.ts
鈹 鈹溾攢鈹 polyfills.ts
鈹 鈹溾攢鈹 styles.css
鈹 鈹溾攢鈹 test.ts
鈹 鈹溾攢鈹 tsconfig.app.json
鈹 鈹溾攢鈹 tsconfig.spec.json
鈹 鈹斺攢鈹 tslint.json
鈹溾攢鈹 .editorconfig
鈹溾攢鈹 .gitignore
鈹溾攢鈹 angular.json
鈹溾攢鈹 browserslist
鈹溾攢鈹 karma.conf.js
鈹溾攢鈹 package.json
鈹溾攢鈹 package-lock.json
鈹溾攢鈹 README .md
鈹溾攢鈹 tsconfig.json
鈹斺攢鈹 tslint.json
Algunos de los directorios y archivos m谩s importantes en un proyecto de Angular son:

src/: Este es el directorio principal del c贸digo fuente de la aplicaci贸n. Contiene todos los componentes, servicios y dem谩s elementos de la aplicaci贸n.
src/app/: Este es el directorio donde se almacenan la mayor铆a de los componentes y servicios de la aplicaci贸n.
src/index.html: Este es el archivo HTML principal de la aplicaci贸n. Se carga en el navegador cuando se inicia la aplicaci贸n.
src/main.ts: Este es el archivo principal de TypeScript de la aplicaci贸n. Se encarga de iniciar la aplicaci贸n y cargar los m贸dulos necesarios.
e2e/: Este es el directorio donde se almacenan las pruebas de aceptaci贸n de la aplicaci贸n.
node_modules/: Este es el directorio donde se instalan todas las dependencias de Node.js del proyecto.
package.json: Este es el archivo de configuraci贸n del proyecto de Node.js. Contiene informaci贸n sobre las dependencias del proyecto y scripts para ejecutar diferentes tareas.
angular.json: Este es el archivo de configuraci贸n principal de Angular. Contiene informaci贸n sobre la estructura del proyecto y la configuraci贸n de tareas y herramientas.

Estructura de un proyecto en Angular

my-app/
鈹溾攢鈹 e2e/
鈹溾攢鈹 node_modules/
鈹溾攢鈹 src/
鈹   鈹溾攢鈹 app/
鈹   鈹   鈹溾攢鈹 app.component.ts
鈹   鈹   鈹溾攢鈹 app.module.ts
鈹   鈹   鈹斺攢鈹 ...
鈹   鈹溾攢鈹 assets/
鈹   鈹溾攢鈹 environments/
鈹   鈹溾攢鈹 favicon.ico
鈹   鈹溾攢鈹 index.html
鈹   鈹溾攢鈹 main.ts
鈹   鈹溾攢鈹 polyfills.ts
鈹   鈹斺攢鈹 styles.css
鈹溾攢鈹 .editorconfig
鈹溾攢鈹 .gitignore
鈹溾攢鈹 angular.json
鈹溾攢鈹 package.json
鈹溾攢鈹 README.md
鈹溾攢鈹 tsconfig.json
鈹斺攢鈹 tslint.json

Algunos de los elementos m谩s importantes en la estructura de un proyecto de Angular incluyen:

  • src/: Contiene el c贸digo fuente de la aplicaci贸n.
  • src/app/: Contiene los componentes, servicios, m贸dulos, entre otros elementos de la aplicaci贸n.
  • src/app/app.component.ts: Es el componente principal de la aplicaci贸n, que act煤a como el punto de entrada de la misma.
  • src/app/app.module.ts: Es el m贸dulo principal de la aplicaci贸n, que contiene la declaraci贸n de los componentes, servicios y otros elementos que conforman la aplicaci贸n.
  • src/assets/: Contiene los recursos est谩ticos de la aplicaci贸n, como im谩genes, archivos CSS y JavaScript adicionales.
  • src/index.html: Es la p谩gina principal de la aplicaci贸n, que contiene la etiqueta de inicio de Angular y carga los componentes y recursos necesarios.
  • src/main.ts: Es el archivo principal de la aplicaci贸n, que contiene la l贸gica para iniciar y ejecutar la aplicaci贸n.
  • package.json: Contiene la lista de las dependencias y scripts de la aplicaci贸n.
  • angular.json: Contiene la configuraci贸n de la aplicaci贸n, incluyendo la estructura de la aplicaci贸n, la configuraci贸n de compilaci贸n y el listado de scripts.
  • .editorconfig: Permite autoformatear los archivos, espacios, indentaci贸n, etc. Hay que tener instalado la extensi贸n en el editor.

.editorconfig nos sirve para dejar una normativa para el equipo de desarrollo que vaya a trabajar en el proyecto

The language service extension relies on the @angular/language-service and typescript packages for its backend. @angular/language-service is always bundled with the extension, and is always the latest version at the time of the release. typescript is loaded, in order of priority, from:

The path specified by typescript.tsdk in project or global settings.
(Recommended) The version of typescript bundled with the Angular Language Service extension.
The version of typescript present in the current workspace鈥檚 node_modules.
We suggest not specifying typescript.tsdk in your VSCode settings per method (1) above. If the typescript package is loaded by methods (1) or (3), there is a potential for a mismatch between the API expected by @angular/language-service and the API provided by typescript. This could lead to a failure of the language service extension.

For more information, please see #594.

Installing a particular release build
Download the .vsix file for the release that you want to install from the releases tab.

Do not open the .vsix file directly. Instead, in Visual Studio code, go to the extensions tab. Click on the 鈥溾︹ menu in the upper right corner of the extensions tab, select 鈥淚nstall from vsix鈥︹ and then select the .vsix file for the release you just downloaded.

Me encanta como explica la manera de crear un proyecto Angular

Plugin Angular Language Service
instalas el plugin
Ctrl+P

ext install Angular.ng-template
En la version 16 ya no viene el browserlist

Estoy emocionado por aprender Angular!

La arquitectura de angular

  • SRC el coraz贸n de la aplicaci贸n
  • .editorconfig normativa para tener organizado mejor (Solo funciona si se tiene editor config)
  • tsconfig corresponde a algunas de las configuraciones de compilaci贸n
  • angular Json podemos configurar diferentes ambientes
    • Podemos establecer pesos, de la aplicaci贸n
  • Karma es para correr pruebas unitarias
  • Package Json donde est谩n los paquetes

馃挕 Agrega un archivo el cual sea .nvmrc para decirle que version de node es recomendada para el proyecto

Para los que usan Linux y deben gestionar proyectos de Angular con diferentes versiones, aqu铆 la soluci贸n:

Cambiar la versi贸n de Node autom谩ticamente usando NVM

lo importante en el uso de los frameworks como Angular es conocer los archivos que se componen y en que momento se puede manipular, sea para un trabajo local o colaborativo

Estructura de un proyecto en Angular

Angular tiene varios archivos importantes para el correcto desarrollo y funcionamiento del proyecto.

  • .editorconfig es para que todo el equipo de desarrolladores sigan las mismas reglas de escrituras del c贸digo
  • angular.json son configuraciones propias de angular
  • tsconfig.json son conriguraciones de typescript
  • .nvmrc te dar谩 una versi贸n recomendada de node para correr el proyecto (la puedes definir t煤 haciendo node -v > .nvmrc)

Configurar versi贸n de NVM en un proyecto Angular en el archivo .nvmrc

Es interesante lo mucho que ha cambiado Angular.

En lugar de nvmrc podr铆amos usar docker, no? es pregunta

Recomiendo mucho esta extensi贸n de VSC que permite darle un 铆cono a la casi todos los archivos.

https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme

Template Forms
Son formularios controlados por modelo
El modelo basado en plantillas
Angular crea modelos como FormGroups y FormControls
Directivas de Angular NgForm y NgModel
Reactive Forms
*Mucho mas potentes y mejor rendimiento

Basados en observable
Mejora el tipo de Validaci贸n de los datos
Se usa para Formularios complejos

Mi primera impresi贸n sobre la estructura de carpetas en angular: 鈥淪on muchas configuraciones xD鈥

Empezando con angular con toda la actitud 馃槂

gracias por la explicacion

vamos con todo

Para los que quieran hacer uso de su terminal pueden crear el archivo .nvmrc con el siguente comando.

node -v > .nvmrc

Para los usuarios de vim. Tenemos una muy buena alternativa y tenemos el pluging de editor config. Lo pueden instalar muy facilmente con manegadores de paquetes como bundle. Les delo el link.

Editor config plug for vim.

Por otro lado como alternativa de angular language service tenemos coc-angular. Tienen que instalar previamente coc que es un plugin de vim que ayuda con la sintaxis. Pueden instalarlo directamente desde el plugin coc, con el comando 鈥淐ocInstall coc-angular鈥.
O tambien lo pueden instalar con vundle.
鈥淧lugin 鈥榠amcco/coc-angular鈥欌 -> dentro de sus plugins.
[Alternativa de Angular Language Service con VIM]
(https://github.com/iamcco/coc-angular)

Enlace para EditorConfig en cualquier editor de texto o IDE: https://editorconfig.org/#download

Supongo que .editorconfig es como prettier, esto tiene q ver con el trabajo en equipo, es una normativa, una forma de tener reglas claras dentro del equipo de desarrollo.