Estructura de un proyecto en Angular

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,

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

Angular por defecto trabaja con typescript

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.

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’s 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 “Install from vsix…” and then select the .vsix file for the release you just downloaded.

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.

La extensión de angular language services
https://marketplace.visualstudio.com/items?itemName=Angular.ng-template

.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.

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

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

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

✅

También es valido colocarlo de esta manera

18.10.0

Para usar esta versión de node tendrías que usar

nvm use $(cat .nvmrc) 

para luego instalar

npm install -g @angular/cli

y listo eso sería todo.

Para personalizar la lista de navegadores compatibles en nuestro proyecto de Angular, ejecutar
ng generate config browserslist
Sí deseas configurar Karma, puedo hacerlo con el siguiente comando
ng generate config karma
Actualmente no se generan los archivos de .browserslist y karma.conf.js. Porque ya vienen establecidos en la configuración interna de nuestro proyecto.
Esta es la documentación de angular que habla sobre ello.
Docs BrowersList Angular
Docs Tests Angular

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

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: “Son 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 “CocInstall coc-angular”.
O tambien lo pueden instalar con vundle.
“Plugin ‘iamcco/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.