Angular | Aplicación de Tareas desde Cero
ฝัง
- เผยแพร่เมื่อ 21 ก.ย. 2024
- En este Vídeo te enseño a programar tu primer TODO o aplicación de tareas en el framework Angular en su version 4, usando typescript, visual studio Code, y las características que nos ofrece el framework, como javascript.
Código del Proyecto: goo.gl/NR7iJq
Mis Redes Sociales:
Sitio Web: www.faztweb.com
Blog: blog.faztweb.com
Facebook: / fazttech
Twitter: / fazttech
Patreon: / fazt
!Happy Coding!
Orgulloso de mí paisano, eprendi angular gracias ati, al inicio no sabía nada pero poco a poco metiendo mano y con mucha práctica aprendí, ahora veo nuevamente tu vídeo y es pan comido... Saludos Bro
Muchas gracias por hacer este tutorial, muy útil, he aprendido bastante contigo, nunca había tocado Angular ni tampoco JavaScript así que he venido sin tener ni idea. Pero lo explicas todo muy bien. El video merece muchos más likes de los que tiene. Supongo que mucha gente no llega a acabar el proyecto.
Gracias, un gusto que lo hallas terminado, y felicidades :)
Comando para abrir el proyecto en el navegador directamente sin tener que escribir localhost... en vez de: ng serve -> ng serve -o . Este comando lo abrirá automáticamente en el navegador que hallamos configurado o por defecto chrome.
PD: excelente explicación para los que repasamos angular, un sub más, gracias!
Se ve excelente el crud en angular, muchas gracias por compartir tus conocimientos. Saludos
Super video me. Parecía super difícil estas tecnologías nuevas y de verdad con tus videos lo he entendido como si fuera con plastilina super, muchas gracias
la documentacion + fazt = pro
muchas gracias soy nuevo es esto, pero aprendí mucho con este video sigue así .
muy buen tutorial de verdad. Explicas super bien. Saludos desde colombia.
Eres un excelente comunicador a mi opinión y tus tutoriales son de calidad, gracias.
Muchas Gracias :)
Felicitaciones que buen aporte, esperamos más!
Excelente video, muy explicativo y consiso. Para mi, solo le faltaría actualizar el array employees cada vez que se actualiza un dato, para así completar bien el CRUD
Lo tendre en cuenta para proximos videos, gracia por el comentario.
Excelente vídeo tutorial, fue de gran ayuda.
Vales oro amigo, estuve revisando el contenido de tu canal y que calidad la que manejas.
Tienes publicidad? me avisas para cuando vea un video tuyo desactive el adblock
muchas gracias por compartir tu conocimiento, es excelente, no se nada de angular pero entendi todo a la perfección!
Cristian muchas gracias, que genial que lo hallas hecho sin saber angular eso quiere decir que tienes buena basa de Javascript felicidades
Hola Fazt, muy bueno el vídeo de hecho hice el tutorial completo y me funciono de perlas logre hacerlo completo, creo que solo falto aparte de lo que mencionan los compañeros de lo de la API REST fuera sido genial las validaciones en los campos lo haria mas interesante pero para ser mi primer tuto de angular esta muy bueno muchas gracias full agradecido
Hola Ronal, Gracias. si te interesa crear una API REST puedes hacerlo con cualquir lenguaje de servidor, ya he creado una usando a Nodejs como servidor te dejo la serie de videos th-cam.com/video/R0-p6_uEg5I/w-d-xo.html Saludos!
gracias seguiré realizando los tutoriales para seguir aprendiendo mas muy agradecido
Muchísimas gracias. Muy buena sugerencia para practicar angular
Muy buenoooo gracias!
he visto varios tutoriales de fazt , pero este es muy FAST!!!! al extremo...
Está bueno 🎉
Hola @Fazt gracias por esos videos, explicas excelente, me podrias ayudar con alguna duda que me quedó al ver el video y es el siguiente.
1) no limpias los campos al ingresar los datos
2) como colacas el focus despues de ingresar los datos.
ademas que dicen que NO UTILIZAR las variables globales document o window, o a manipular directamente el DOM con ElementRef.
y por tanto no podrás reutilizar tu código para renderizar desde servidor (con Angular Universal). lo recomendable es Render2, pero con el no puedo hacer focus.
muchas gracias y quedo atento tu respuesta.
Excelente vídeo, todo muy claro, me ha servido mucho. La continuación seria consumir servicios REST.
Gracias por tu aporte.
Saludos!!!!!
Gracias, así es, espero subir pronto el ejemplo consumiendo un API REST con Nodejs. :) Gracias
@@FaztTech Lo subiste? si me puedes proporcionar el link bro
¡Gracias!
Gracias aprendí mucho
muchas gracias, el tutorial me sirvio mucho
Hola, excelente viejo, muchas gracias por el contenido que compartes. Podrías hacer un ejemplo de angular usando primeng con formularios reactivos, estaría genial
muy buen video seguí asi aprendí un montón felicitaciones y muchas gracias
Gracias! me alegra que te halla servido.
de nada, tendrás algún ejemplo de angular-crud utilizando componentes y servicios?
Gracias por el tutorial! Podrías publicar el link donde se encuentra el repositorio? no lo encuentro en github
cuando instalas el bootstrap en el proyecto ¿siempre toma la ultima version deñ bootstrap? y si es así ¿hay alguna manera de especificar que version queremos instalar?
Gracias, muchas gracias me salvaste!!!
Me has ayudado mucho compañero, tome su like!
W
Fazt gracias por tus enseñanzas, tengo una consulta, cuando agrego un segundo elemento la tabla los campos de la tabla se actualizan cuando ya voy ingresando en lo input. Gracias por tu apoyo.
Gracias muy interesante el Tutorial. Podrías indicarme como hago para crear Submodulos para cada una de las secciones como Crear, Tabla donde muestras los datos y la sección de Edición? También sería muy interesante consumir Servicios Rest desde este ejemplo.
Muchas gracias, he aprendido mucho.
Hola Eyder, un gusto. para crear submodulos utiliza el comando de angular-cli llamado ng g component "elnombre delcomponente", esto lo muestro en otro tuto de angular, aunque no recuerdo cual, sorry. en cuanto a los servicios Rest, pronto estare subiendo otro video en el cual muestro como usarlos. Un Saludo :)
Felicitaciones! es un buen video de hecho lo compartiré por las redes sociales! lo que queria saber y como la data subir a una BD ya sea mysql o firebase. Saludos desde Perú
todo bien explicado, pero mi pregunta es la siguiente esos datos estan en array perfecto pero como podemos manejar esos mismo con base de datos como mysql, o sql serve
excelente video muy bien explicado
Genial, gracias
Genial!. Muchas gracias.
Excelente video
Esta muy bien explicado. Yo no se de angular solo vue.js pero si me permite en algo le corrijo, según entendi de Jesus conde ud tendria que hacer mas componentes a esa misma app.
Bueno, no "tendría". sino más bien "podría". es decir depende. si tienes una app grande, es recomendable separarla en múltiples partes, de esa manera es fácil de mantener, pero en apps pequeñas como esta, es prácticamente igual. pero si quieres seguir mejorandola, en ese caso puedes seguir dividiéndola en multiples componentes. todo depende de ti, no hay reglas como tal ;). ¡Saludos!
por cierto, te recomiendo no guiarte por lo que digan otros, sino experimentarlo tu mismo, y sacar conclusiones (todo esto en tono buena onda ;)
Fazt gracias por contestar ah weno.
pregunta como puedo hacer para que no guarde si no tiene datos, ya que cuando presionas save guarda en blanco, excelente video
En el video pasado también tule el siguiente problema
ERROR in src/app/app.component.html:33:25 - error NG8002: Can't bind to '{ngModel}' since it isn't a known property of 'input'.
33 name="name" [{ngModel}]="model.name"
~~~~~~~~~~~~~~~~~~~~~~~~
src/app/app.component.ts:5:16
5 templateUrl: './app.component.html',
~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.
tengo instalado correctamente el Forms y también se encuentra bien diligenciado dentro del apps.module.ts no se que hacer, me podrían ayudar porfavor
Buen video pero todo lo orientas a desarrollar sobre el html
Que pasa con los otros archivos ts, las clases, los components y si se maneja datos los servicios?
Parce excelente tutorial
Genial!
Hola Fazt buen video disculpa por que position se puso sin las comillas y name si? si es muy obvio la pregunta disculpa aun soy nuevo en Angular gracias por el Video me sirvio de mucho.
hola primeramente gracias por tus videos son muy claros y utilied, recien le estoy dando a angular y empeze con este video sin embargo estoy atorado y quisiera ver si me pudes ayudar, resulta que la tabla que despliega los employees solo me muestra las cabeceras de mi tabla, pareciera como si el *ngFor no estuviera recorriendo el arreglo de employees
Hola una pregunta tengo problemas y me lanza muchos errores cuando descargo un proyecto de git y le doy NPM INSTALL. Podrán ayudarme porfa!!!
Hola me gusto mucho tu video
Cuál es el link para los videos de MEAN
Y una pregunta sobre el método edit quiero saber si hay otro método para no escribir campo por campo
Quiero decir que aquí tenemos this.name, this.position etc...
Pero si fueran 100 preguntas o más no creo que tengamos que escribir todos los this de cada pregunta
Hay algún método ??
excelente pero seria bueno hacerlo con conexion a BD Postgresql o Mysql con PDO gracias
Que pasa con angular cuando programas con asp o php? como manejas las vistas y esas cuestiones?
Gracias por el tutorial, pienso que deberías organizar mejor la explicación antes de saltar de un lado al otro construyendo así porque si a toda velocidad, todo proyecto por pequeño que sea tiene una arquitectura, eso es lo primero por lo que podrías empezar, porque no es igual con otros frameworks o lenguajes, de todas formas muchas gracias FAZT.
Hola un ayuda, estoy desarrollando una aplcacion (soy novato) mi problema es cuando llamo a una función que contiene una suscripción a un servicio para que se carge los datos a una variebel , dicha variable la quiero utilizar a continuación de haber llamado a esa función pero me sale undefined. sólo puedo tomar los datos dentro de la suscripción .Ayuda, se como arreglar esto me gustaría llamar a la función que contiene la suscripción y retornar el valor para no estar creando varias suscripciones pero no puedo :C
Excelente, ahora falta validar los campos bro :D
Gracias por el tutorial, pero estaria bueno que explicaras un poco porque haces cada cosa.
Muchas gracias! aprendí mucho... si te animas a hacer un tutorial con conexion a .NET con web apis (promises) quedaré atento!
Dale lo tendre en cuenta para proximos vídeos, va a la lista de pendientes. Saludos
Hola que tal una pregunta como se podría hacer la parte del edit del formulario desde un modal ?
Buenos días tengo una duda ¿con respecto al código donde lo puedo encontrar? ya que no sale nada al entrar al enlace
si les tira algun error al importar angular forms pueden solucionar en la ruta del proyecto ejecutar el comando "npm install @angular/forms"
Hola cuando creo el otro formulario para la opcion de actualizar , los datos de mi lista se borran :(
el código ya no está disponible
Now only EnotGlobal is left of the PF twists, the rest is lost , but they are not sold to everyone .. It has become difficult to move any commercial projects
tengo una super duda, que recomiendas Fazt usar la librería de angular.js o trabajar con su framework?
Si quieres aprender, te recomiendo hacer una que otra app desde cero, pero si estas en un proyecto serio, es mucho mejor usar una biblioteca o framework. cualquiera hace su trabajo en mi opinion, y varia dependiendo de lo que quieras hacer :)
saludos amigo excelente vídeo, pero como limpio los campos del formulario una vez enviado los datos? utilizo y lo limpia pero envía campos vacíos editables!
gracias, aquí no he enviado nada al server, todo es client side, pronto subire uno usando como servidor nodejs con express, pero lo que tendrias que hacer es que al enviar los datos, en la funcion que se encarga de hacerl el post, seria el lugar donde tendrias que limpiar los campos :)
gracias esperare con ansias ese vídeo! excelente trabajo!
en versión 6 tengo que modificar el archivo angular.json?
Gracias por los vídeos,. Lastima no sabes explicar muy bien ya que son difíciles para personas que no tienen mucha experiencia en otros lenguajes.
el for en la linea 38 del fichero app.component.app no es completamente innecesario?
fazt, se que el video es antiguo pero estoy estudiando angular desde cero. Ante todo muchas gracias
tengo una duda, cuando declaras la variable myValue global para que tenga el valor del indice y luego la usas en el metodo updateEmployees y la comparas con el if dentro de un for, y si coincide con el indice que va almacenado en la variable myValue lo reemplaza, pero esa variable global myValue no tiene ningun valor, el valor se le da dentro del metodo editar, como sabe que valor tiene parar reemplazarlo en el metodo update.. saludos
El valor para myValue es asignado dentro del método editEmployee(i), el cual es ejecutado antes de poder ejecutar el método updateEmployee(), por lo tanto myValue siempre contendrá el valor del índice que obtuvo editEmployee como parámetro.
Por otro lado, el ciclo for es innecesario, podrías directamente acceder al elemento del array de la forma this.employes[myValue], ya que no tiene absolutamente ningún sentido realizar el recorrido con el ciclo.
No entiendo por qué al incluir [(ngModel)]="model.name" en el input la aplicación o la ventana del navegador se muestra sin contenido, totalmente en blanco, el local server está funcionando bien creo porque sigue mostrando el favicon y no muestra avisos de error, alguna idea?, gracias por adelantado, saludos.
Si es que no hayaste el error amigo y para los que les suceda, vayan a app.module.ts y agreguen import { FormsModule } from '@angular/forms'; y tambien en el array de imports:[ FormsModule]
Gracias por el dato bro
Buenas tarde amigo, Cuando podrás hacer la coneccion con Express y MongoDB?
Hola adolfo, estos dias tengo una lista de cosas por publicar porque trato de dar prioridad a las personas que me estan dando soporte en www.patreon.com/Fazt, pero espero dentro de unos días subire un ejemplo de un CRUD hecho con express y mongodb, que incluso lo grabe pero no lo subi porque no me gusto la calidad del audio. Te dejo el ejemplo que voy a grabar github.com/FaztTech/express-mongodb-crud Un saludo
Amigo, disculpa el abuso, cuando puedes subir el vídeo? O enviarme el vídeo con el audio que no te gusto a mi correo por favor. Es que estoy trabajando en estos momentos con eso. Logré hacer la conexión pero desde el puerto 4200 de angular con el puerto 3000 de Express, logro comunicarme pero no es frontend, es simplemente un formulario y lo envio por POST al otro puerto
Fazt!! Cuano vas hacer el tutorial del stack MEAN? lo estoy esperando :"c
:D me he atrasado un poco por ver como conseguir ingresos para mantener este canal. Pero esta semana espero publicarlo al ya tener los cursos de express y mongo, y angular, ya solo falta grabarlo, :)
Dale man te esperamos (y)
Hola Roberto, el curso ya esta publicado hace una semana :) th-cam.com/video/R0-p6_uEg5I/w-d-xo.html
Disculpa, cómo puedo hacer un dashboard? Angular
creo que el ciclo en el metodo update esta de mas :o
Consulta, como se actualiza el cli de mi computadora y con el ejemplo de codigo de este video, al ejecutar el ng serve, es decir el local Cli es mas actual que la version local?
Hola, para actualizar el cli solo tienes que ejecutar el comando npm install -g @angular/cli nuevamente. para ejecutar el código de este video solo lo tienes que descomprimir luego ejecutas el comando npm install y finalmente el comando ng serve. el cli cambia constantemente así que es mejor ver la documentación siempre que sea posible.
Fazt gracias, eres el mejor
Fazt, saludos, muy buenos tus videos, sin embargo, he estado al pie de la letra seguiendo el tutorial y no entiendo porque no me funciona el boton de Edit, puede decirme por favor, quiza en que podria estar fallando? Y cabe aclarar que estoy usando 8 atributos en el arreglo
Hola Jhon, un Gusto, ¿ ya has tratado de revisar el código del ejemplo?, goo.gl/NR7iJq si es así te invito al grupo de Gitter para que puedas hacer tu pregunta, ya que es algo dificil contestar este tipo de preguntas por aquí :) gitter.im/Red-de-C%C3%B3digo/Lobby
Hola, men. Una pregunta, ¿pudiste con el botón? A mí tampoco me quiere dar. Saludos :)
hola preciso el codigo alguien lo tiene? estoy practicando pero tengo un error y no se como solucionarlo
Consulta: las clases de boostrap no me aparecen, hice la instalación como muestra el video
Tambien hay otra forma agregando en la ruta app/styles.css @import '~bootstrap/dist/css/bootstrap.min.css';
en la última actualización de angular no se realiza el documento "angular-cli-json" es el mismo que ahora sale como "angular.json" ??
si
No me deja visualizar el código del module
Que debo hacer si mi proyecto cuando nace no tiene ese archivo ".angular-cli.json" porque pasa eso? como hago que lo tenga gracias!
Tengo el mismo problema y no me compila
Alguien me pasa el codigo, el link ya no sirve, por favor
"(parameter) i: any
El parámetro 'i' tiene un tipo 'any' implícitamente" me sale este error cuando pongo la variable i en los campos de modificar y borrar
alguien sabe porque pasa?
Tienes que escribir " i:any " dentro del parentesis de " editEmployee( ) " ---->> ASI : " editEmployee( i:any ) "
Tambien me pasó mas adelante con el "myValue", tambien tienes que hacer lo mismo ---->> " myValue:any "
Asi no tuve problemas :)
@@xTheDarkSteamx buenas tardes me sigue marcando el error ya poniendo el codigo como dices
Buenas tardes amigo, tengo un problema y es que no me tomas los estilos del archivos css "syles.css" los cuales deberia tomar por defecto.
si te refieres a styles quizas lo has quitado de la configuración de angular, recuerda que styles es para los estilos generales, otra opción es que un componente este sobrescribiendo tus estilo, te invito unirte al slack, para que puedas hacer tu pregunta y ver si otras personas también han tenido el mismo problema goo.gl/n14Xx4
estoy siguiendo tu tutorial y no me toma los del estilos generales, me paso igual con tu otro tutorial de angular material , con ese lo que hice fue crear otra hoja de estilos llamada styles2.css en la misma ruta de styles.css y lo agregre en el .angular-cli.json y esos si me los tomo bien
probablemente sea el orden en el cual lo estas agregando, recuerda que los estilos van en orden inverso.
Amigo tengo una duda, como hago para subir el proyecto a heroku?
muchas gracias
Cristian bueno esta explicación solo te servirá si ya has subido antes una app a heroku, de todas formas mañana subía como hacerlo pero solo tienes que ejecutar el comando que manda la aplicación a producción y luego subes el directorio a heroku, denuevo mañana publicare un vídeo es eso :)
funciona, pero al recargar la pagina no quedan actualizados los cambios ... gracias por el aporte
Esparrago, para eso tienes que utilizar localStorage, un servidor, o firebase. Anteriormente he creado ejemplos de aquello que te menciono, si deseas echale un ojo al canal ->
th-cam.com/video/Sx_2dOYOtes/w-d-xo.html
Un Saludo y un gusto que te sirva :)
gracias por la respuesta amigo. saludos
o ya me pare no se yo estoy usando angular en su version 6 me marco error en ngModel
como puedo obtener el codigo de este video? :c
El link del código no jala
Puedes resubir el codigo?
Mmmmm parece como si estuviera programando en Java, que curioso xD
Si es porque los creadores de Typescript, son los mismos de C# y C# es competencia directa de Java. :D
ya no está el código u.u
No funciona el link del codigo
Hola Fazt, como puedo agregar estos datos a la base de datos mongoDb, exelente video
Para eso tendrías que crear una backend con algun lenguaje de programación y conectarlo a mongodb. Por cierto ya he realizado ese tutorial, se llama el Stack MEAN -> th-cam.com/video/khCIunNAEHI/w-d-xo.html
Saludos :)
Mil gracias Fazt!!!!
juan@juan.com XD Grande fazt :D
minuto 4:55; no tengo el archivo .angular-cli.json
En las últimas versiones de angular ese archivo se llama angular.json :)
"./node_modules/bootstrap/dist/css/bootstrap.min.css" solo escribe de esta manera solo con un punto al inicio
Esta increíble tu tutorial, pero el problema que tengo es que no puedo descargar tu código!!!!
Pudiste descargarlo?
@@imeldacervantes5606 No amigo, aver si puedes solucionar ese problemita
@@imeldacervantes5606 Parece ser que tu enlace de descarga a desaparecido!
No soy el creador, igual quiero descargarlo porque me marca un error
AngularAngularAngular
AngularAngularAngular
AngularAngularAngular
AngularAngularAngular
AngularAngularAngular
Un tutorial de copia y pega (mirando el código ) 😂
Deberías trabajar con dos pantallas si tienes que consultar constantemente el código, eso y el excesivo tiempo realizando css se hacen tediosos.
Además, porque 3 campos? estás triplicando de forma banal el código y no usas correctamente algo tan básico como los bucles. Lo siento pero muy mal tutorial.
no me aparece .angular-cli.json
El codigo ya no esta disponible