Angular 4| Curso Practico Completo, Desde Cero, Para Principiantes
ฝัง
- เผยแพร่เมื่อ 10 ก.พ. 2025
- ¡IMPORTANTE!
Este Curso ha sido Actualizado, te recomiendo Ver este vídeo en lugar de este:
• Angular 6 Curso Practi...
En este curso te voy a enseñar Angular desde Cero, Paso a paso, empezando por instalar el entorno con Node.js, visual studio code, y angular-cli hasta hacer una aplicación de ejemplo con angular y typescript desde cero en el entorno más conocido que es windows.
MÁS VIDEOS DE ANGULAR: • Angular 4| Curso Pract...
** Si has podido Terminar el Curso, Felicitaciones,estaré subiendo más vídeos de Angular pronto, y disculpa por los errores del vídeo, adema si tienes alguna duda o problema no dudes en decirme.
Los Libros en los que me he basado para enseñarte en este Tutorial los puedes adquirir en Amazon:
Learning Angular: amzn.to/2rXttSb
ngBook: amzn.to/2swWVwN
Otros Vídeos Que te Ayudaran:
Los Mejores Frameworks Front-End de Javascript: goo.gl/Dekt7w
Instalación de Node.js: goo.gl/6wNQFf
Tu primera Pagina Web con Node.js: goo.gl/Tds0MZ
Como usar la consola de Windows: goo.gl/srhpeu
Como Instalar Visual Studio Code: • Visual Studio Code | I...
Otro editor de Código: goo.gl/uxjbuq
Que Más Puedes desarrollar en Javascript: goo.gl/JQJtWn
Otro tuto de Draw.io: goo.gl/fglqbl
Webs Mostradas en el Video:
Nodejs: nodejs.org/en/
Angular: angular.io/
Visual Studio Code: code.visualstu...
Ionic: ionicframework...
Post del Blog de Angular: goo.gl/zf2sPe
Te invito a unirte a nuestro Discord para cualquier duda, o tema:
/ discord
Foro de Preguntas: / discord
Sitio Web: www.faztweb.com
Blog: blog.faztweb.com
Facebook: / fazttech
Saludos he estado siguiendo el vídeo pero ya en la parte final cuando intento implementar el formulario para cambiar el nombre y el correo, sale el siguiente error:
compiler.es5.js:1689 Uncaught Error: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'input'. ("
name="name"
placeholder="Change Name"
[ERROR ->][(ngModel)] = "name"
Como input tengo:
que estoy haciendo mal?
Ya logré que funcionara. Resulta que la sintaxis [(ngModel)] no esta disponible prederterminadamente, sino que pertenece a: FormsModule. Entonces debo de importarlo en nuestra aplicación para poder utilizarlo.
Abro el archivo app.module.ts, e importo este modulo agregando la siguiente línea de código:
import { FormsModule } from '@angular/forms';
y en el arreglo imports agrego:
FormsModule
Ahora el archivo app.module.ts, luce de esta manera:
....
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
imports: [
BrowserModule,
FormsModule //
Disculpa, Pedro recien he podido leer el comentario, me alegra que lo hallas solucionado, exacto, en las ultimas versiones de Angular-cli no esta agregando por defecto @angular/forms, ni tampoco @angular/http, así que lo tenemos que agregar manualmente, eso lo explicare en un vídeo subiré estos días. Saludos
Gracias por tu respuesta..éxito en todo lo que hagas. Estaré pendiente de las próximas entregas.
gracias pedro araujo !!
Tengo el mismo problema... hice el cambio antes mencionado y nada, me marca error en @NgModule.
Este es el primer Vídeo que ha llegado a las 1000 vistas, gracias a todos coders! :D, como fue este el primero ya he terminado un ejemplo de como usar un CRUD con Mongodb, Express, Angular4, y Node.js. Un Saludo. pronto estaré subiendo tal tutorial, aunque desde ya digo que sera largo :'v
Para los desarrolladores que se han encontrado con algún problema, con los formularios de angular, he creado algún vídeo de este tema th-cam.com/video/AhoH_hjmt-w/w-d-xo.html
No olviden que si tienen algún problema pueden decírmelo. Un saludo :).
necesito ayuda! cuando compilo mi app los colores de variables.scss no se aplican, todo queda blanco, ¿conoces alguna solución?
Es la primera vez que utilizo Angular y gracias a tu tuto lo comprendí de volada. Me suscribo, sigue con el buen trabajo.
Excelente explicación, aprendí, ha sido la mejor hora 13 minutos con 51 segundos que he invertido este mes :)
Muchas Gracias.
¡Gracias!. Genial que te haya servido.
Excelente video Fazt, yo también tuve problemas con el JSON y al momento de cambiar el nombre en el formulario, al parece en las ultimas actualizaciones toca importar los modulos en el archivo de app.module los dos problemas se solucionaron agregando esos items pero excelente!!
la verdad amigo que estube por otros videos antes de llegar al tuyo y les ganastes a todos, espero seguir viendo mas como este!!
Muchas Gracias, la semana que viene empezare a subir muchos cursos. :)
Gracias +Fazt!! tus trabajos son de calidad y eso se aprecia mucho!
Muchas Gracias!, aun no tienen la calidad que me gustaría, pero tratare de mejorarlos a medida que oy aprendiendo, pronto tratare de seguir subiendo más contenido de manera constante, estoy considerando dedicarme a enseñar online, al menos por ahora empiezo con el patreon, pero espero subir más contenido actualizado al canal. Muchas Gracias Saludos :)
Muchísimas gracias, tu vídeo me ha servido de mucho. Al inicio cuando empecé a aprender Angular por otra plataforma(video2brain), me confundía muchísimo y hasta me pareció algo complejo; sin embargo, tu vídeo me mostró una forma fácil y sencillo de iniciar en Angular.
Muchas gracias Genio, sigue así!
Sóla una cosa: para los que les de ERROR al buscar la ruta de ./post.service
agreguen la extension .ts es decir:
./post.service.ts aunque en el editor de texto les muestre error está bien, les digo porque a mi por más que le movía no me agarraba la ruta del archivo y me decía que no existía, incluso pensé en desinstalar Node por lo que miré en otros foros pero NO es sólo ponerle la extensión del archivo
Excelente video!!! Todo bien, me dió un poco de lata para la parte del service y obtener los posts de la url y mostrarlo en consola. Pero googleando un poco en la documentación de angular pude resolver.
Mi código era return this.http.get('jsonplaceholder.typicode.com/posts').map( res=>{res.json();});
Lo modifiqué a: return this.http.get('jsonplaceholder.typicode.com/posts').map( res=>res.json());(sin las llaves después del res=>) y por fin mostró..
Saludos. Esperando el próximo tutorial!!
Gracias Miguel, me alegra que te halla servido el tutorial, felicitaciones por poder resolver el problema, y gracias por compartir tu código. pronto estare subiendo ejemplos prácticos de angular en aplicaciones reales. estoy trabajando en mejorar la calidad
Fino!
definitivamente eso era gracias !
amigo me puedes ayudar como solucionaste esto ;
this.postService.getPosts().subscribe(posts =>{ this.posts = posts; });
dime compa, no se mucho, pero que problema te da?
que buen curso, me ha servido un monto, ya sabia angularjs y tu curso me ayudo a actualizarme un poco jajajaj
espero mas actualizaciones de angular, se agradece el que enseñes lo que sabes.
suerte en todos tus proyectos.
Muchas Gracias, te dejo la playlist de angular, por si quieres ver y hacer más ejemplos th-cam.com/video/Sx_2dOYOtes/w-d-xo.html Saludos :)
En una me has puesto al tanto del meollo. Eres grande Fazt. Mucho éxtio.
Muchisimas gracias colega, es lo que andaba buscando para empezar con angular, valoro los detalles que das cuando explicas, ya me suscribi para ver los demas videos, saludos!
Un gusto que te sirva, Mario. Saludos y Mucha suerte Aprendiendo Angular.
Lo máximo bro...!!.. hasta hoy tenia miedo a angular4, y a TS... gracias amigo, un gran aporte.!!!!!
Genial Que te sirviera :)
Men excelente curso, desde mi perspectiva muy bn explicado, en espera de los futuros vídeos...gracias.
El mejor tutorial en español!!!
Gracias Fazt por este vídeo. Ojala pueda explicar otras funcionalidades de angular con más ejemplos. Me ayudado a entender lo básico y esperando por más vídeos.
No es Nada Adrian. Genial que te haya sido de utilidad, te dejo el playlist, si ya entendiste esto ya puedes hacer los siguientes tutoriales -> th-cam.com/play/PLL0TiOXBeDahR7sJZxCabDAOfdz6E8H3n.html Saludos
hola, quede con la duda, por ejemplo el tag lo llenas con un array, bien, si ahora esa lista quiero que sean link, seria algo como esto ...., como le paso al href su url correspondiente? tengo una variable como arreglo de string donde asigno cada url
Muchas gracias por este aporte!
gracias Fazt, tus videos y explicaciones son muy claras
muchas gracias muy completo :)
Excelente guia, voy por el siguiente video. Saludos
Muy bueno, ud sabe explicar, gracias señor
Excelente amigo gracias por el tutorial despeje muchas dudas.
Muchas Gracias, me alegra que te sirviera :)
Explicas muy bien te felicito
El dia 26 de Febrero (2018) viendo el video me encontre con los siguientes errores y aqui su respectiva solucion, para las personas que lo vean y tengan inquietudes:
1. No se cambia el nombre con lo ingresado en el input
Abro el archivo app.module.ts, e importo este modulo agregando la siguiente línea de código:
import { FormsModule } from '@angular/forms';
y en el arreglo imports agrego:
FormsModule
Ahora el archivo app.module.ts, luce de esta manera:
....
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
imports: [
BrowserModule,
FormsModule // {res.json();});
Lo modifiqué a: return this.http.get('jsonplaceholder.typicode.com/posts').map( res=>res.json());(sin las llaves después del res=>) y por fin mostró..
y tambien agregar esto
importar http de esta forma. import { HttpModule } from '@angular/http'; y luego pegar en el arreglo imports HttpModule, justo como hiciste con FormsMudule :)
en el archivo app.modules.ts,
Al final todo me funciono, cualquier inquietud me dicen
Gracias bro tbn tenia ese problema justo lo acabo de resolver.
Igual, tenia los mismos problemas, gracias
Perfecto, ahora si funciona, muchas gracias.
Gracias por el aporte, ya estaba preocupado de que tenia mal y me dio por revisar los comentarios y encontré tu apunte. Bendiciones...!!!
Holaa, a mi me sale el siguiente error : TS2339: Property 'map' does not exist on type 'Observable'. A pesar que en la cabecera le puse import 'rxjs/add/operator/map';
Hola mi estimado, ya no seguiste con estos videos. La verdad me ayudaste mucho pero aún estoy muy básico así que seguiré buscando información y si subes las continuaciones de este video de verdad que no me las perderé.
Este fue un vídeo de una hora, y fue hace bastante tiempo que lo grabe, pero muy pronto lo renovare, mi estimado. :D
Para los que tengan un error con el "ngModel", es porque deben importar lo siguiente en app.module.ts:
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [
[...]
FormsModule
],
[...]
})
muy importante no olvidar para que no se partan la cabeza como me paso !!!!!!!!!!
poner en app.Module.ts
1- en la parte inicial poner import { HttpModule } from '@angular/http';
2- luego en el arreglo imports poner HttpModule
,al menos eso evitara que den vueltas en circulo, revisando el código, si es que escribieron bien....
bien Fazt! muy bueno tu tutorial pe!
exricardo gracias :)
Hey! hice el tutorial, si de igual manera te marcaba un error en el servicio dentro del archivo posts.service.ts en "map(...)" lo solucioné de la siguiente manera:
El archivo posts.service.ts al final me quedó así:
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { map } from 'rxjs/operators'; //Cambié este import
@Injectable()
export class PostService {
constructor(private http:Http) { }
getPosts() {
return this.http.get('jsonplaceholder.typicode.com/posts').pipe(map( res=>res.json())); //añadí el pipe( )
}
}
Espero que también te funcione :)
Hola Gabriela, gracias por compartir tu solución. este video es de angular 4, he renovado este video hace unos días te dejo el enlace por si te interesa th-cam.com/video/AR1tLGQ7COs/w-d-xo.html
Mucha suerte aprendiendo Angular :)
En mi trabajo normalmente llorarían y renunciarían... Por qué no tengo una compañera de trabajo como tú :(
excelente video. gracias
Muy buen video! ... Podrias mostrar como agregar less?
Gracias! Tu tutorial me ayudó a mejorar mi situación laboral al aprender Angular 4!
Si algún día te conozco, te invitaré una cerveza. Es lo menos que te debo...
Muchas Gracias, pero para mi es suficiente saber que de algo sirve lo que estoy haciendo. :)
para los que tengan problemas con ngModel es necesario importar FormsModule en app.model.ts
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
y en @ngModule({
imports:[
FormsModule
}
})
Buenas, no estoy seguro si me perdí en alguna parte del video lo siguiente, pero si corres el servidor con 'ng serve --open' abre la aplicación en el navegador automáticamente.
Saludos!
Excelente tutorial, muchas gracias!
No es nada, esta semana espero subir el nuevo curso de Angular 5. Saludos!
gracias por el video. estoy empezando en todo esto y cai en tu canal. ahora , que videos me recomiendas ver despues de estos? en orden si es posible.
muchas gracias!
no se si sea tarde para preguntar... pero soy un poco novato y no entiendo muy bien como hiciste en el formulario que tuviera una función con atributo dentro del input, ósea la función newHobby(hobby), ¿cómo le pasaste y como recogió la variable hobby del input? Igual es una pregunta tonta, pero me gustaría entenderlo
Cuando trato de instalar o agragar el nuevo archivo o myFirstApp, en el cdm o simbolo de sistema me bota esta opcion, Would you like to add Angular Routing? enrautamiento de que? que deberia de colocara yes or not?
espero que me puedan ayudar.. un cordial saludos.
Hola excelente video, tengo una duda, es obligatorio usar ng serve? es posible usar wamm? si es posible como se puede configurar para usar wammp?. Gracias
Hola, genial video. Voy a seguir los siguientes cursos. Una pregunta, ese "Loading.." se carga solo? o como lo hace?
Muy buen vídeo, solo trata de no poner tantas variables con nombres similares, para poder diferenciarlas mejor, saludos
Excelente. Muchas gracias!
Genial que te sirviera. Mucha suerte.
Hola, muy bueno tu video, tendrás uno donde explique como crear un login y register? Gracias
Se puede trabajar con Sql Server 2012 ?? por medio de ASP:NET MVC 5 '?
amigo una pregunta como creo un input que me lea un codigo de barras y que melo muestre en otro y que se vaya incrementando cada vez que le ingrese otro codigo de barras en angular 4 y typescript
Si me puedes responder te agradeceria
Cuando puedas cam bia tu micrófono. Está bueno el video.
Buenas amigo gracias por el tutorial, ¿como podemos con VScode hacer debug de proyectos Angular CLI?, gracias
maravilloso
Muy buena explicación si puedes compartir el código del app.components por favor ya que tuve un error y necesito comparar y ver en donde está el error saludos...
excelente video seria bueno que hicieras un video de React o de React Native saludos :)
Muchas Gracias!. En estos días subiré un video de como hacer un chat con React.js paso paso. Gracias por comentar. Saludos! :D
hola no se si me puedas guiar con el uso de ventanas emergentes con angular usando ng2-dpo-popup gracias
Por qué en el ngIf no hace falta poner showHobbies entre dos corchetes?
andas bien amigo para explicar, gracias
Gracias, pronto actualizare este curso, solo estoy esperando que salga la version 5 y considerar los cambios, saludos y gracias por comentar
otra mas va a salir? osea que tendre que aprender una cada año? :/
jajaj, no no, hay algo que se llama semantic version ,en termino simples, significa que ya no importa si es version 2, 4 , 5 la sintaxis se mantener, solo pequeñas cositas van a ir actualizando de poco a poco, por eso los creadores de angular dicen que ya no hablen de angular 2 o 4 o 5. de ahora en adelante solo es Angular :). así que tranquilo que lo que aprendiste ahora si te servira para el resto de tus dias como desarrollador de angular.
ha gracias ahora si entendí
Por cierto si este es el primer vídeo hoy subire otro ejemplo para que puedas seguirlo despues de aquí, solo estoy esperando que termine de renderizar el video y subirlo que mi computador es super lento, y cualquier duda todos estan invitados a unirse al slack. th-cam.com/video/C6ZttnkgCB4/w-d-xo.html es un chat, que reviso a diario, saludos y suerte
Quisiera simular la ultima fecha de la clasificacion al mundial mi pregunta es muy duro? ese trabjo???
Hola, he visto tu video, instale angular cli y al dar el comando de crear app me crea un monton de carpetas, pero se pone a descargar un monton de cosas y tarda varios minutos y al final me creo una carpeta de 200 mb con 33 mil archivos, es normal?
Buen día, estoy comenzando a desarrollar en Angular pero soy desarrollador de escritorio y me cuesta un poco los lenguajes web (por múltiples razones). Desearía si me pudieras ayudar con una asesoría para utilizar la API de Google Drive para un proyecto que estoy realizando. Por favor. Saludos.
despues de hacer el ng serve me dice que se montó en localhost:4200 pero al abrirlo el navegador me dice que el servidor no fue encontrado :( a qué se debera? (trabajo desde ubuntu)
Buenos días Fazt, quisiera empezar a trabajar sobre este entorno, he revisado tu vídeo mas de una vez y me han surgido dudas y problemas,.... no se si das opción de poder conectarte por Skype... si es así lo comentamos, muchas gracias por todo y felicidades por el vídeo.
Hola Xavier, si deseas comentarme un poco más de que se trata, te recomiendo unirte al slack goo.gl/n14Xx4 y si tienes problemas como unirte aquí hay un vídeo th-cam.com/video/C6ZttnkgCB4/w-d-xo.html Gracias por comentar y cualquier cosa me dices. Saludos
Gracias Fazt, el problema que tengo es que básicamente llevo toda mi vida, trabajando en lenguajes orientado a objetos con Vb, y la filosofía de Js, HTM,... es totalmente diferente... me recomiendas algún sitio donde pueda aprender estos lenguajes? y como aplicarlo a Angular, gracias
Si entiendo, he pasado por lo mismo, primero te aconsejo aprender bien Javascript, o Typescript, pero yo te aconsejaría aprender Javascript, yo te aconsejaria empezar con los cursos de Jesus conde de Javascript th-cam.com/video/nsdjNe78BMk/w-d-xo.html o si quieres usar Typescript ya he creado un curso th-cam.com/video/Xxqh0RoWxNc/w-d-xo.html si ya terminaste este curso continua con los otros ejemplos th-cam.com/play/PLL0TiOXBeDahR7sJZxCabDAOfdz6E8H3n.html y luego como crear APIs, en cualquier lenguaje de programación como PHP, Python Ruby, pero si no quieres complicarte aprendiendo estos lenguajes tambien puedes hacerlo con javascript, el mismo javascript que usas en angular, lo que reduce el trabajo, echale un ojo al video de nodejs th-cam.com/video/9U8EaVjuq6U/w-d-xo.html. Para resumirlo, creas tu aplicacion en Angular, que usa Typescript(que es javascript mas nuevas funcionalidades), pero para que envie y reciva datos necesitas crear tu servidor que puede estar escrito en javascript con Nodejs, y luego conectarlo a una base de datos Mongodb que es Javascript o Mysql, Posgtre o cualquier otra. :D
Excelente.
he tratado de crear un proyecto de angular pero me sale 5 veces "npm WARN deprecated" como puedo solucionar ese error?
Buenas me ha gustado mucho tu vídeo pero me ha surgido un problema al imprimir mi arreglo este se imprime así .123 .123 .123 en vez de imprimirse así .1 .2 .3 cual crees que sea el problema?
tengo una pregunta , ya con tocar y crear archivos dentro de la carpeta APP se puede hacer todo entonces? o hay que conocer todos los otros archivos que son como mil
hahaha, pues no es necesario hasta un punto, es decir que con esto puedes facilmente hacer aplicaciones sin necesidad de conocer que hacen los otros archivos, pero si te quieres dedicar tan solo a angular, te recomiendo ir viendo que hace cada archivo, a medida que vas aprendiendo, por ejemplo para estilizar tus componentes tienes que tocar otro archivo de configuración, pero es mejor ir aprendiendolo a media que vas creando apps, es por eso que voy a seguir subiendo ejemplos en los que vamos ir subiendo el nivel, puedes ir viendo los que ya estan subídos th-cam.com/video/C6ZttnkgCB4/w-d-xo.html y si tienes dudas te recomiendo unirte al slack, porque a veces no me llega la notifiacion de los comentarios . :)
Hola amigo. Gracias por tus videos. Una pregunta por favor: yo comencé a estudiar angular 4 hace un tiempo y ahora que estoy retomando veo que ahora ya está el angular 5 e incluso el 6. Como hago para descargar e instalar solo el angular4? o puedo seguir el curso asi? Que me recomienda? Gracias.
Hola Daniela. te recomiendo utilizar Angular en su ultima version, es decir la 6, en estos momentos. No hay mucha diferencia entre lo que explico en este vídeo y las nuevas versiones, yo creo que podrás aplicar en la nueva version, la mayoria de cosas que explico aquí. y si en todo caso tienes alguna, todos estan invitados a unirse al slack, el cual es un chat enfocado a cualquier duda de programación, te dejo el enlace:
join.slack.com/t/fazt/shared_invite/enQtMjE1MDIxMDI4Mzg4LWQ3OTUxYjgxNzFiZTc3MDQ1MGNmNWQ1OTk0MDVlZmQ4MGNiYWY5ZDgwMDVhZjcyZjE0NmViMjNhOWNiOTEyMTM
Un Saludo.
Hola!!!
Me aparecen WARN deprecated nodemailer@2.7.2 cuando ingreso ng new myfirstapp. A que se debe??
gracias
Genial que te sirviera :)
hola, tienes un video de como traer una tabla desde sql server y mostrarla en la aplicacion
excelente. solo una pregunta. Cómo enlazo un backend usando node y el framework express con un proyecto usando angular?
th-cam.com/video/R0-p6_uEg5I/w-d-xo.html
Podrias hacer una app simple con CRUDs usando un backend hecho en django (api rest), con vistas reactivas usando channels de django?
pues ahora solo estoy subiendo de javascript, pero pronto subire de Django y Flask, que ya tengo las apps , pero faltan grabar :).
De Django, se incluyen los channels?, tareas en background, frontend con angular4.
Se me haria muy ultil videos con estas tecnologias, aplicaciones actuales en tiempo real, de ahi usar channels en django y por el lado de angular4 esto: www.npmjs.com/package/ng2-django-channels-data-binding
La idea que la api rest sea en DRF(dango rest framework), front en angular4
Necesito hacer un proyecto con estas caracteristicas y me haria de mucha ayuda tener algo para hacer esto, y sobre todo en español
Qué lenguaje de programación usa?
buen tuto
Hola buen dia estuve mirando tus tutos estan muy buenos , mira te comento en 2 semanas rindo mi examen final de desarrollo web y la verdad me cuesta muchisimo , necesito de tu ayuda ya que contigo es con quien mejor he entendido acerca de angular y html, , mi proyecto final consta de hacer una pagina donde con mongodb como servidor y nodejs, pueda yo ya sea con angular o jquery poder hacer una pagina a la que se le pueda cargar datos, y luego en otra pagina ver esas estadisticas, eso es lo que me urge hacer y la verdad necesito de tu ayuda, por favor podrias hacerme un tutorial? somos 15 los que estamos con esa duda y dije de encargarme de contactar con alguien que pueda hacernos este video, si tu cobras por esto no tengo problema , me sucribire a tu canal es urgente espero su respuesta y muchas gracias!
Buen día, siguiendo el video y sabiendo que tiene más de 3 años tengo un problema no me conecta al localhost 4200. Saludos buenas explicaciones das en otros videos al igual que este
ayuda ! . cuando ingreso un nuevo hobby , apreto enter , se me actualiza la pagina ,haciendo que no se agregue el nuevo hobby.. alguna solucion ? gracias
una pregunta bro cuando doy enter para registrar el hooby la pagina se actualiza me podrias decir porque? gracias de antemano
Es así como los formularios de HTML funcionan, pero en angular puedes cancelar ese evento agregando un false a tu método del formulario :)
Te quiero hacer algunas preguntas.. este curso sólo tiene 1 parte ? Podré usarlo si ya salió la versión 6
Yo les digo cursos, pero es un video introductorio practico, pero como este nombre es largo...
Yo creo que si te puede servir para entender los conceptos generales de Angular, pero este fue uno de mis primeros videos y la calidad no es muy buena, ya estoy creando un curso de Angular 6, espero publicarlo pronto. Un Saludo :)
Fazt gracias bro, lo espero con ansias....
Alguien sabe por qué si dejo un rato de editar mi proyecto después mi localhost:4200 no se muestra?, a veces manda un error como si el proyecto no estuviera disponible y después se queda la página totalmente en blanco.
Buenas Noches Fazt y disculpa que otra vez te este fastidiando sino que queria tenia algunas dudas como tal yo soy nuevo en angular ya e visto varios de tus tutoriales y son muy buenos e aprendido mucho, pero algunas de las cosas que no me quedan claras es como montarlo a un servidor remoto ya que hay que ejecutar el comando ng serve no me queda del todo claro ese paso y lo segundo si quisiera crear otras paginas para que redirecione y usar angular con php yo intente crear un archivo con extencion php pero no lo lee seria de gra ayuda para saber estos datos mas que todo poder exportar la web a un servidor remoto muchas gracias por los cursos y disculpa las molestias
Property 'subscribe' does not exist on type 'void'. tenes el código para compartir? (lo de Miguel no funciona) al menos los files posts.services.ts y app.component.ts? gracias!
Tengo una duda, soy nuevo en angular, y vi que ya tenias el archivo myfirstapp con archivos dentro, y despues lo copiaste, lo que yo hice fue crear MyFirstApp file, y tambien, como en el video, lo cree en el cmd, pero no me generó nada de archivos.
Hola.. una duda
Como le agrego codigo javascript a un componente? para ya sea agregar efectos o funcionalidad
tendrias que agregarlos desde la parte Scripts, dentro de el angular-cli.json -> esto lo he mostrado en otros ejemplos de angular, te comparto la playlist -> th-cam.com/play/PLL0TiOXBeDahR7sJZxCabDAOfdz6E8H3n.html ¡Un saludo!
Que tal me sale el siguiente error Property 'map' does not exist on type 'Observable'. En la cabecera le puse import 'rxjs/add/operator/map';
tengo una pregunta, omo podria agregar esto a un framework cakephp?
Hola, Al ser Angular un framework de lado cliente, es decir que solo sirve para crear la interaz, lo que tendrías que hacer es desarrollar una REST API, que es una forma de solo enviar datos sin html, para que angular reciva los datos y los pueda mostar en pantalla. te dejo la docs de rest de cake-> book.cakephp.org/3.0/en/development/rest.html
Por cierto he creado un slack por si tienes más dudas, alguie más te puede ayudar allí, th-cam.com/video/C6ZttnkgCB4/w-d-xo.html
muchas gracias :) le vy a revisar gracias por la ayuda
Es recomendable aprener Angular 4 aún, o mejor aprendo Angular 5?
Aprende la ultima versión :)
Muchas gracias
hola como obtengo un host en internet?? para mi pagina
mucho mejor que los cursos basicos del udemy :v
como algunos que han comentado, yo tuve problemas con getPosts, en la parte del map, y aparte de eso también tuve problemas de compatibilidad porque según creo estoy usando Angular 6, lo resolví con esto:
getPosts() { return this.http.get('jsonplaceholder.typicode.com/posts').pipe(map(res => res.json())); }
y con esto arriba:
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
y si tienen problemas de compatibilidad entre versiones, yo arreglé con estas (no sé específicamente con cual, yo intenté con todas esas):
ng update
ng update @angular/core
ng update rxjs
ng update @angular/material
Estimado tengo problemita en posts.service." C:/Users/William/Desktop/projectangular4/src/app/posts.service.ts (10,76): Property 'map' does not exist on type 'Observable' " a pesar que he colocado : import {Observable} from 'rxjs';
espero tu pronta respuesta gracias.
no me reconoce el 'map'
me paso lo mismo map
import { map } from "rxjs/operators";
getPosts(){
return this.http.get('jsonplaceholder.typicode.com/posts').pipe(map(res=>{
res.json();
}))
Excelente el tutorial! Tengo un problema, al memonto de probar la funcion getPosts, me sale este error:
"Property 'getPosts' does not exist on type 'PostService'."
Pero la funcion está declarada e incluso me la reconoce al momento de codearla.
Codigo:
import { Component } from '@angular/core';
import {PostService} from './posts.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [PostService]
})
export class AppComponent {
title : string;
name : string;
email : string;
direccion : string;
hobbies : string[];
show_Hobbies: boolean;
constructor(private postService:PostService){
this.name = "Marcelin";
this.email = "demian@mail";
this.direccion = 'facebook.com/demian.boullon';
this.hobbies = ['Correr','Astronomia','Dormir'];
this.show_Hobbies = false;
this.postService.getPosts().subscribe(posts => {
console.log(posts);
});
}
hola Fazt como estas, no me esta funcionando ngModel y la verdad nose que sea, puedes ayudarme? gracias
probablemente es que no tienes agregado en app.module.ts el formsModule.
ve al archivo app.module.ts y agrega esta linea de codigo al inicio: import { FormsModule } from '@angular/forms';
y luego agrega en la parte de imports, FormsModule, separado por una coma si tienes otros modulos dentro.
y eso creo que solucionara tu problema
fazt por favor contempla un video de un CRUD con angular y mysql
Hola, ya estoy preparando un ejemplo, de como usarlos, toda esta semana me estoy dedicado a ello, muy pronto lo publicare
No sé si ya han actualizado este video, pero por aquello, los que tengan problemas con el formulario y al recibir el json deben de modificar el archivo app.module.ts de la siguente forma:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule , FormsModule, HttpModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Y en cuanto al posts.service.ts tuve que hacerlo de la siguiente forma:
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
@Injectable()
export class PostService {
constructor (private http:Http) {
}
getPost(){
return this.http.get('jsonplaceholder.typicode.com/posts').map(res=>
res.json()
);
}
}
Muchas gracias amigo por compartir esta info :D
para solucionar el error de [(ngModel)] //se agrega en el archivo app.module.ts
import { FormsModule } from '@angular/forms';
imports: [
BrowserModule,
FormsModule
Hola Genio!"".. este canal va a ser todo un exito!!!...
AppComponent_Host.html:1 ERROR Error: No provider for Http!
me sale este error!. no puedo descifrar de que se trata. alguna sujerencia??
ohh tambien tienes que importar http de esta forma. import { HttpModule } from '@angular/http'; y luego pegar en el arreglo imports HttpModule, justo como hiciste con FormsMudule :)
Fazt gracias genio
gracias por eso yo tenia ese problema :D
A mi me estaba pasando lo mismo
En app.module.ts importa
mport { HttpModule } from '@angular/http';
y declaralo en imports luego en getPost retorna
return this.http.get('jsonplaceholder.typicode.com/posts').map(res=>
res.json();
Can't bind to 'ngModel' since it isn't a known property of 'input'
Tengo este error ? no puedo avanzar de ahi
Hola Lenin, es porque angular-cli ha cambiado, mira esta solución de Pedro Araujo.
Ya logré que funcionara. Resulta que la sintaxis [(ngModel)] no esta disponible prederterminadamente, sino que pertenece a: FormsModule. Entonces debo de importarlo en nuestra aplicación para poder utilizarlo.
Abro el archivo app.module.ts, e importo este modulo agregando la siguiente línea de código:
import { FormsModule } from '@angular/forms';
y en el arreglo imports agrego:
FormsModule
Ahora el archivo app.module.ts, luce de esta manera:
....
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
imports: [
BrowserModule,
FormsModule //
tambien tienes que importar http de esta forma. import { HttpModule } from '@angular/http'; y luego pegar en el arreglo imports HttpModule, justo como hiciste con FormsMudule :).
Gracias , esta funcionando!!!
Genial! :)
tenia el problema con http, graciass
hola: nuevamente yo... tengo un problemita .. el proyecto funciona bien en el pc de mi trabajo pero al momento de llevarlo al pc de mi casa no me funciona nada y esta instalado todo igual que el pc de mi trabajo.. ej el angular/forms no lo toma escribo en la caja de texto y no actualiza el texto de mas arriba.. nota: en el pc de mi trabajo el proyecto esta en la raiz del disco C: y en mi casa esta en una particion sera ese el problema o tengo que hacer algo mas.. volvi a descargar angular en mi pc de casa realize los mismos pasos y no me funciona el angular/forms.. saludos,
Hola Victor, has vuelto a instalar el proyecto a través del comando: npm install ? :D
si reinstale con npm install .. descarge nuevemente el proyecto con ng y nada .. quisas sea mi equipo??? tendre que instalar algo mas en el..
también puede ser que sea por la versión de Node.js, si actualizas a la ultima versión, y luego lo intestas ejecutar?, voy a volver a escribir el código y subirlo para los que están teniendo problemas con el para que puedan descargarlo y compararlo creo que así seria más fácil. :D
puedo empezar por este curso, o debo empezar por angularjs?
Hola, entre Angular y Angular.js, si va a hacer tu primer framework es mejor empezar por Angular. porque angular.js ya esta quedandose atrás. así que sí, Puedes empezar por aquí como tu primer framework del lado cliente. si tienes cualquier problema me lo mencionas :)
ya estudiado angularjs... pero si es mejor empezar por las ultimas actualizaciones seria mejor ya estaria actualizada. gracias deseo aprender mucho
Te comento un poco de forma rápida. en las primeras versiones de angular.js, se uso javascript, ahora usamos typescript (el cual también estoy haciendo una serie de vídeos que quizas te pueda ayudar), es por eso que quitaron el .js del Nombre Angular. Así que te recomiendo no comparar Angular con angular.js, para que se te facilite mucho el aprenderlo, pero de cualquier forma, si tienes dudas solo me lo comentas. Saludos
saludos, podrias pasar el enlace donde esta la serie de videos de typescript. gracias seria interesante verlos.
Estimado Muy buen video.. pero no me edita el nombre cuando utilizo ngmodel y esta puesto tal cual esta el video.
Hola Victor, es debido a que probablemente como estas utilizando la ultima versión de @angular--cli, ahora ya no agrega por defecto el paquete @angular/forms, es decir que se tienen que hacer manualmente, pero mira el comentario que he fijado, esta al inicio, allí Pedro Araujo muestra como lo ha solucionado. Saludos
Fazt muchas gracias.. en la mañana resolvi el problema y efectivamente agrege y se soluciono... gracias
Genial Victor, me alegra que lo hallas solucionado :D. lo explicaré en el vídeo que subiré hoy sera de usar angular y Material Ui. Saludos
Hay 2 cosas que no me funcionan y no quedaron bien explicadas a mi entender. La primera es que cuando hace this.posts el sistema le subraya el mismo y le indica que el tipo void no es asignable a un tipo IPost. Lo deje como el y el explorador me tira el error pero a el le funciona correctamente. Como hay un corte de cámara no se si lo corrigió y se olvido de mostrarlo, o si tiene configurado el entorno de manera diferente.
Lo segundo es que no puedo hacer funcionar toda la parte de posts. No me trae los posts (si bien conecta con el servicio y el servicio ejecuta su constructor, siempre me trae undefined cuando lo quiero imprimir con console log en app.components.
Para quienes tiene este error la solución es cambiar posts: IPost[ ]; por posts: any;
De igual manera para quienes siguen este tutorial utilizando versiones actualizadas de Angular. el post.service.ts ya cambia en muchas partes del código.