Estructura de un proyecto en Angular

Contenido del curso

Primeros pasos

Comunicación de datos

Estructuras de control

Estilos

Deploy

20
Despliegue con Firebase Hosting
09:48 min

Despedida

21
Continúa con el Curso de Angular: Componentes y Servicios
00:57 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:007:35

Estructura de un proyecto en Angular

Curso de Fundamentos de Angular

Clase 4 de 21

Clase 4 / 21

Comentarios (58)58 comentarios

Ricardo Garduño Rojas

Hace 5 años

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

PlatziTheme

Andrés López

Hace 5 años

Edgar Andrés Montenegro Martínez

Hace 5 años

Esta bellísimo.

Aaron Paredes Cabrera

Hace 5 años

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.

Edixon javier Pabon Lizcano

Hace 4 años

Muchas gracias, excelente resumen.

Cristian Baudino

Hace 3 años

Excelente! Gracias! 💚

Juan Jose Mayorga

Hace 5 años

El archivo .nvmrc está brutal, no lo conocía jeje

Gabriela Suarez Carvajal

Hace 3 años

no me ha funcionado, que hay que hacer despues de crear el archivo

Jimmy Buriticá Londoño

Hace 5 años

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

Reinaldo Mendoza

Hace 5 años

jeje, yo también, ya toco

Ivan Blancas Rivera

Hace 4 años

Me siento identificado con tu comentario <3

Josué Isaac Fuentes López

Hace 5 años

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

node -v >  .nvmrc

Jesús Ignacio García Fernández

Hace 5 años

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

Reinaldo Mendoza

Hace 5 años

que dataso compañero, gracias

Marco Antonio Alducin Garcia

Hace 4 años

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

Juan Sebastian Viazzo Perrone

Hace 4 años

Me sucede lo mismo, espero que sea asi por la nueva version, deberemos buscar a donde figura ahora.

Slds!

David Augusto Trujillo Delgado

Hace 4 años

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.

Reinaldo Mendoza

Hace 5 años

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

Jesús Ignacio García Fernández

Hace 5 años

Angular por defecto trabaja con typescript

Daniel Meza

Hace 5 años

¿Habrá curso de testing en Angular?

Omar Daniel Centeno

Hace 5 años

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

Eduard Arias

Hace 4 años

Ya existen los curso de testing con angular, en la siguiente ruta: Angular

Jesús Ignacio García Fernández

Hace 5 años

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

ext install EditorConfig.EditorConfig

Randy Guerra

Hace 5 años

Disculpa pero donde se pone,en que seccion?.

carlos chavez

Hace 5 años

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

Randy Guerra

Hace 5 años

En esta nueva aventura lo importante es seguir y mejorar.

Juan Carlos Ortiz Romero

Hace 5 años

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.

Platzi Team

Hace 4 años

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.

Rony Porraz Vargas

Hace 5 años

La extensión de angular language services

Michelle Osorio

Hace 4 años

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

Yadira Rodriguez Lemus

Hace 4 años

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

German Pinilla

Hace 4 años

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

Michelle Osorio

Hace 4 años

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.

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:

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.

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

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

Resumen

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:

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.

Primeros pasos

Qué es Angular: ventajas y cómo aprenderlo

Instalación de Angular CLI

Comandos de Angular para correr tu proyecto

Estructura de un proyecto en Angular

Conceptos básicos de TypeScript para usar Angular

Comunicación de datos

String interpolation

Property Binding

Introducción al Event Binding de Angular

Otros eventos que puedes escuchar

Data binding con ngModel

Estructuras de control

Uso de *ngIf

Uso de *ngFor

*ngFor para arrays

Uso de *ngSwitch

Angular Devtools

Estilos

Estilos a la lista de productos

Class and style

NgClass y NgStyle

Crear un formulario

Deploy

Despliegue con Firebase Hosting

Despedida

Continúa con el Curso de Angular: Componentes y Servicios

Estructura de un proyecto en Angular

Progreso del curso

Primeros pasos

Comunicación de datos

Estructuras de control

Estilos

Deploy

Despedida

Recursos

Recursos