Ricardo Garduño Rojas
Andrés López
Edgar Andrés Montenegro Martínez
Angular posee desde el inicio de un proyecto muchos directorios y archivos que se generan por defecto al crearlo. Mira qué es cada cosa:
De arriba hacia abajo:
Aporte creado por: Kevin Fiorentino.
Ricardo Garduño Rojas
Andrés López
Edgar Andrés Montenegro Martínez
Aaron Paredes Cabrera
Edixon javier Pabon Lizcano
Cristian Baudino
Juan Jose Mayorga
Gabriela Suarez Carvajal
Jimmy Buriticá Londoño
Reinaldo Mendoza
Ivan Blancas Rivera
Josué Isaac Fuentes López
Jesús Ignacio García Fernández
Reinaldo Mendoza
Marco Antonio Alducin Garcia
Juan Sebastian Viazzo Perrone
David Augusto Trujillo Delgado
Reinaldo Mendoza
Jesús Ignacio García Fernández
Daniel Meza
Omar Daniel Centeno
Eduard Arias
Jesús Ignacio García Fernández
Randy Guerra
carlos chavez
Randy Guerra
Juan Carlos Ortiz Romero
Platzi Team
Rony Porraz Vargas
Michelle Osorio
Yadira Rodriguez Lemus
German Pinilla
Michelle Osorio
A los amantes de platzi 💚 les recuerdo que con amor lanzaron un tema de VSCode para nosotros.
PlatziTheme
Esta bellísimo.
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.
Muchas gracias, excelente resumen.
Excelente! Gracias! 💚
El archivo .nvmrc está brutal, no lo conocía jeje
no me ha funcionado, que hay que hacer despues de crear el archivo
Había aplazado el aprender Angular, por fin tome la decisión y me esta gustando.
jeje, yo también, ya toco
Me siento identificado con tu comentario <3
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
que dataso compañero, gracias
Ahora, en la version actual que tengo, no posee .browserslistrc,
Me sucede lo mismo, espero que sea asi por la nueva version, deberemos buscar a donde figura ahora.
Slds!
Que tal! Solamente en la terminal escribe "ng generate config browserslist" porque desde la versión 15 ya no crea por default este archivo. Espero ye ayude.
Que buen nombre que escogieron para las pruebas, Karma, lo que no hagas bien hoy lo pagaras manana
Angular por defecto trabaja con typescript
¿Habrá curso de testing en Angular?
Hola
Esperemos que sí, se vienen varios cursos con Angular en Platzi. Siempre puedes hacer llegar tus ideas para nuevos cursos escribiendo a team@platzi.com
Saludos
Ya existen los curso de testing con angular, en la siguiente ruta: Angular
Poniendo esta instrucción en Visual Studio Code instalas el plugin mencionado Ctrl+P
ext install EditorConfig.EditorConfig
Disculpa pero donde se pone,en que seccion?.
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
.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.