Aprende ANGULAR 17 desde cero para principiantes GRATIS
HTML-код
- Опубликовано: 10 июл 2024
- En este tutorial de Angular 17, desde la instalación, exploraremos cada aspecto del desarrollo con este framework. Desde la configuración inicial con Node.js y Angular CLI hasta la creación de componentes, directivas, eventos y comunicación entre componentes. Además, abordaremos temas avanzados como rendimiento, suscripciones a eventos, y soluciones para problemas comunes.
▶ No te pierdas más directos en: / midudev
00:00:00 - Introducción
00:00:57 - ¿Qué vamos a ver/hacer?
00:01:57 - Instalar Node.js
00:03:00 - npm install Angular-cli
00:04:09 - Conozcamos Angular
00:04:54 - Cosas importantes de Angular
00:06:43 - Iniciando proyecto
00:09:01 - Revisando archivos de Angular
00:09:40 - package.json
00:10:28 - Angular.json
00:10:50 - EXTENSION IMPORTANTE
00:12:49 - main.ts
00:13:34 - app router
00:14:13 - Carpeta app
00:15:23 - Standalone, imports
00:16:36 - templateURL, StyleURL
00:16:53 - Decorador
00:18:38 - app.config.ts
00:19:50 - Inicializar proyecto
00:20:51 - Primer Hola angular
00:22:08 - Crear estilos y estructura (nivel de componente)
00:23:06 - recomendación
00:24:13 - Propiedades
00:27:02 - Estilos
00:29:01 - :root de CSS
00:30:02 - Nuestro primer componente
00:33:03 - exportar/importar componentes
00:36:14 - Directivas
00:37:15 - @if @else
00:41:42 - preguntas y comentarios de la comuindad
00:42:47 - Creando otro componente
00:43:14 - Componente Dry-Run
00:43:50 - Cómo omitir los test?
00:44:28 - más de Dry Run
00:45:08 - Componente Game
00:45:39 - @for
00:49:18 - El “Property Binding”
00:50:04 - Agregando imagenes + Hack para obtener el avatar de un usuario de GitHub
00:51:07 - Eventos (click y más)
00:52:24 - Cambiar un estado en Angular
00:55:51 - Props + Comunicación entre Componentes
00:59:54 - @Output Comunicación de Hijo a Padre
01:01:46 - Explicación de lo que hicimos
01:02:51 - La parte del Padre
01:03:44 - “subscribed” Suscribirse a un Evento
01:06:57 - @defer
01:08:51 - Creando un Componente de Comentarios
01:11:50 - Problema de Rendimiento
01:13:14 - pregunta de usuario
01:14:51 - Usando el @difer
01:16:41 - @placeholder
01:20:54 - @loading
01:22:19 - Fin 
Наука
Cuando ví este video, yo sabia que iba a hacer el curso por mi trabajo. Hoy es el día jajajajaja. Gracias por el contenido
siempre quise que midu hiciera angular!!!
Justamente estaba buscando como comunicar componentes, excelente explicación!
Vamos Midu, que pedazo de curso de Angular, queremos mas!!!!
Hermano, creo que explicaste esto de forma magistral, sinceramente ganaste un perro fiel... digo un seguidor
este video me abrio la cabeza para una idea de seria donde hagas el front y trabajes en colaboracion con otro dev de backend como hdleon, y armen algun producto sencillo mostrando un poco mas la gestion de proyecto. de ahi en mas gracias por el content siempre!
Muy agradecido y esperando una segunda parte!! Abrazos
Muy buen video Midu, esperando con ganas la segunda parte
hola midu! estoy con angular en el FP y este video me ha ayudado una barbaridad, si te sobra tiempo ojala subas una 2ª parte con los formularios, propierti building y esas cosas. Un saludo, me encanta tu contenido
Por fin veo que Midu toca Angular, es mi favorita, desarrolla más cosas con Angular por favor.
Justo mañana me pasan un proyecto en angular, no sabia ni como instalarlo, espero poder hacer lo que piden ajjajaja xd pero que buen video midu gracias, son como esos videos que dicen aprende tal cosa en tan solo 10 minutos, eres el mejor... saludos
Hoy estoy tomando el curso para mi primer trabajo!!!
Midu en Angular 😮😮😮
Ojala una segunda parte, me gusto mucho la explicacion.
la mejor clase, ni en mi universidad, uso html y css, pero con angular, me facilita rapidamente todo
Espectacular esta introducción a Angular 17, yo ya había visto algún video con las nuevas actualizaciones pero este es de los mejores si no el mejor
Gracias por proporcionarnos más herramientas Midu❤️
Excelente curso Midu!, seria perfecto más contenido de Angular.
Excelente para refrescar conceptos basicos. Espero con ansias la segunda parte, saludos Midu :))
Maldita sea, creia que este momento nunca llegaria 🥵🥵🥵
Mejor explicado no puede estar, muchas gracias Midu!!!
Llegó mi momento de tener que aprender Angular, y que mejor que hacerlo con Midu
Hola,
gracias Midu !
Espero segunda parte!!
Como siempre midu enseñando justo lo q andaba necesitanto
Bastante interesante la nueva version de Angular, muy bueno lo del @defer
Eres un crack, gracias por el contenido, no dejes de subir este tipo de contenido a tu canal.
creo que despues de este video, habra mas dev con angular, muy bien ahi midu, excelente contenido.
Gracias por este contenido Midu!! Excelente!!!
Yo, como desarrollador de Angular. Estoy insanamente agradecido con midu por hacer este vídeo. Y a ver si así se aprecia más Angular.
Pues yo no era muy amigo de angular, pero este video lo cambio todo por completo.
Excelente video y como siempre, EXCELENTE Angular
Lo mejor de laravel en Angular 🎉🎉 con esa sintaxis ya hasta me creo experto 😅 siempre supe que mi curso de c/c++ iba a tener frutos 😂😂
Me gusta se está Sveltizando Angular. Segunda parte con signals 🙏
Entro a RUclips y veo en las notificaciones Aprende ANGULAR 17 desde cero para principiantes GRATIS de midulive y me vuela la cabeza, pensé que era de broma pero no, midu usando angular 🤯
excelente video midu me has ayudando un monton me gustaria que hagas un curso de angular
Tengo algo que reclamarte y es algo muy serio, tengo tanto tiempo siguiendo tu canal y porque no habías hecho este video antes. Por cierto me estoy comiendo tus videos de ReactJs mil gracias !!!
Segunda parte pls, m encanta tu contenido y me pareces el mejor para aprender
Excelente tutorial. Felicitaciones.
Excelente video!!! Contenido de CALIDAD!!!
Mil gracias!
Hola! Pensé que este día nunca llegaría, pero es que Angular se ha esforzado para encantar a desarrollares React.
Gracias por compartir tus conocimientos
Aprendo mucho contigo.
Excelente video tutorial, me has facilitado la vida
esperando segunda parte, quiero ver más cosas interesantes. 👀
Muchas gracias por el curso Midu, me ha ayudado mucho! Veo que en España almenos hay muchas mas ofertas de trabajo de Angular que React, y yo estudie todo en React en un BootCamp que acabe hace un mes. Por eso me estoy poniendo ahoracon Angular como loco jaja
Genial tutorial! bien explicado y al punto, solo que me desconcentraba lo pesado del chat con el backseating
Buenísimo un tuto de 🅰️ngular!! Espero la parte 2
Midu, este tuto no lo veo porque estoy arrancando recien pero me sorprende la actividad que tenes en las paltaformas, supongo que tenes "empleados" que suben tus videos y demas pero dioss, cada un rato hay algo nuevo que mirar en tu canal. Muy bueno
si, esto realmente es un fragmento de un stream suyo en twitch, mucho de su contenido lo realiza en directo y ya luego sus editores se encargan de recortar y editar para los vídeos o los shorts/tiktoks etc
Gracias te ganaste mi like.. estaba buscando como incorporar al app el nuevo componente ya creado y no encontraba.. gracias mil..
Excelente video midu
Gracias por el video🎉
Amigo realmente se me hace una curva de aprendizaje muy grande, pero se ve realmente interesante Angular.
midu para el tema de las extensiones podrias usar los profiles para configurar las extensiones y configuraciones para los proyectos en diferentes techs
excelente tutorial
Que gran maestro
IntelliJ te ayuda y puedes hacer automáticamente los imports, así que menos preocupaciones
Intellij para angular, realmente esta buena esa combinación ?
PD: Mi primer trabajo lo he conseguido gracias a Angular
Mi primera chambaaaa... 😂😂😂
@@sk8osnerrecuerdo el día cuando yo de la chamba me enamoré
muy bueno ✌✌
*Solución al error si no quiere ejecutar los scripts desde visual studio*
Consideración a tomar en cuenta al momento de querer levantar el proyecto, desde visual studio nos arroja el siguiente error.
No se puede cargar el archivo “Aquí aparece la ruta de donde se encuentra tu proyecto” porque la ejecución de scripts está deshabilitada
en este sistema.
para resolverlo solo es ejecutar como administrador la *powershell* con el siguiente comando, *Set-ExecutionPolicy Unrestricted*. Nos aventara una instrucción para habilitar los scripts solo pondremos *S*, y listo ya nos dejara usar los scripts de angular dentro de la terminal de visual studio.
De las mejores explicaciones de @defer que he visto, muchas gracias!
@midulive Es genial verte haciendo un video de Angular, aunque en realidad no me lo esperaba, no imagino el hate que te ganarás por videos como este o cualquier otro que tenga que ver con Angular. En mi opinión más sincera y el que te hayas puesto la gorra de Angular por un rato dice mucho de su versatilidad y grandeza, le estás mostrando a la comunidad que las herramientas son solo eso y que ser desarrollador va más allá del fanatismo que existe actualmente… Gracias por educar a la comunidad 🎉 Un saludo.
que extension estás utilizando para se marquen de color morado los condicionales en html, como por ejemplo el if else?
Gracias Midu
eres el mejor
Chulada de angular
Excelente aporte para iniciar en el mundo de Angular
por favor mas proyectos en angular 17
eres mejor q mi profe :)
Excelente video! Me ha ayudado muchisimo, solo quisiera saber cual es tu extensión que tienes de git en tu terminal.
Justo en el trabajo que aplique me pidieron usar Angular, vendo de nextjs, a ver que me deparara el futuro
Me recomienda avanzar en este curso si deje angular desde la version 1 angujar js ? quisiera continuar con angular
No conocía Angular. De hecho, lo miraba con mucho respeto (y miedo) por todo o que dicen de su "elevada" curva de aprendizaje, etc...
Pero hasta ahora (min: 30:44), maneja muchísimos elementos casi iguales a Vue y Laravel, que son mi stack.
Muchísimas gracias Miguel por este tutorial que me está permitiendo quitarle el velo a Angular para comenzar a aprenderlo en serio.
De acuerdo contigo en lo que debería traer TailwindCSS por defecto (caso de Laravel), pero le incorporé el CDN y va de mil maravillas.
Que tengas un feliz y bendecido 2024 bro.
Fuerte abrazo desde Venezuela.
Editado:
min 36 - Así comenzó Vue.js en su Option API. Había que hacer la importación 2 veces. Eso cambió con Vue 3 y la Composition API donde simplemente al escribir tu componente, lo importas y punto. Probablemente, Angular camine hacia allí en un futuro.
Gracias amigo, muy buen contenido.
Una pregunta. Cómo puedo desplegar esta app en un bucket de s3? Veo que el resultado del ng build en la versión 17 es levemente diferente y cuando subo los archivos de browser obtengo un error al intentar renderizar la página 😢.
Como es el defer con astro es el client attr o que es?
una pregunta, cuando añades los componentes y h1 en app.component.ts, el programa te corrige, pero a mi no, es por alguna extension? pongo los acentos que usas tú, funciona pero a la hora de escribir codigo VSC no me ayuda, ni me detecta error de sintaxis como a ti.
el loading de varios segundos mínimo aunque sea innecesario, lo usé para que los de marketing vieran que había hecho lo que me pedían. ja ja...
Buenas Midu, increible video, me ha encantado
Una preguntita, cual es el tema de iconos que usas? Gracias :)
¿Que plugins usas para mostrar los errores en linea, autocompletado, etc?
el midu ya esta en el 2024
Gracias Midu, no has pensado en tener una academia propia? sin duda seria un éxito, yo seria el primero en inscribirme!
Estás en ella ahora mismo ^^
en el minuto 36:00 no me sale el "user works", a que se puede deber?
tiene alguna extensión que le muestre así la terminal?
(no he terminado de ver el video, por si le menciona ahí pues no he llegado a esa parte jsjsjs
)
alguien me puede decir que material icon usa midudev, please.
Excelente aporte, estaría bien una colaboración con un de backend para tu hacer el front de algo y el haga el back, como dicen en un comentario más abajo, algo nuevo 😅
grasias
* * * * * 5 estrellas tío.
Hay algun otro curso de angular de Midulive? uno mas completo y profundo? aunque sea de pago?
Alguien sabe como pone esa fuente de texto al visual studio? o cual es? Edit: Ya lo he encontrado, pones 'Cascadia Code' en el font-family del editor, en los settings del visual studio
porque el CommonModule no se creo de forma automatica si estoy usando la version 17 igual y el node v20
Primer Comentario 🥰
🥇
Uffff!!!
SEGUNDA PARTE PLS
La sistasis de salida de @input según angular esta mal escrita a mi también me apareció lo que hice fue ir hacia la directiva de @angular/core' e inportarlo desde ahi al igual que el EventEmitter... porque al parecer no estaba implementado e incluso me enrrolle un monton porque 1 tenia mayusculas y el otro no..
Aprender Angular y luego NestJS para tus proyectos, es una buena forma de comenzar a ser Full Stack
Cual es la extension para que le de todas esas suggestions, es Copilot?
"Antes estaba antes, pero ahora está después" :D
porrrr finnnnn @midulive te amamos
Cual son las extenciones que usas para que te sugiera que que codiga tienen que poner, o para llenar mas rapido el codigo.
Más abajo menciona que Git Hub Copilot salu2
agradeceria si alguien me diria la extensión que usa para angular porfavor enserio me perdí varias veces por los import
Hermano, estoy perdido con el tema de conexión y obtención de datos con angular. Vengo de un MVC y la verdad no comprendo. Utilizo Angular 17 y no hay nada sobre el tema de conectar una bd mysql y obtener o hacer post and get con los datos. Help miduuu
Bro sabes que, para que me funcione cualquier comando como el npm install -g @angular/cli y el ng serve, no me funcionan así como lo tirastes, tengo que anteponerles sudo, me pide la contraseña del admin de la cuenta y ahí si mola. Estoy usando una MacBook Air m3, que me aconsejas maestro?