Angular 4| Curso Practico Completo, Desde Cero, Para Principiantes

¡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

[@IngPedroAraujo]

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?

[@IngPedroAraujo]

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

[@FaztTech]

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

[@IngPedroAraujo]

Gracias por tu respuesta..éxito en todo lo que hagas. Estaré pendiente de las próximas entregas.

[@randycastrocaro6358]

gracias pedro araujo !!

[@ghersmok2561]

Tengo el mismo problema... hice el cambio antes mencionado y nada, me marca error en @NgModule.

[@FaztTech]

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

[@pacorrokhrz]

Es la primera vez que utilizo Angular y gracias a tu tuto lo comprendí de volada. Me suscribo, sigue con el buen trabajo.

[@mauriciom7691]

la verdad amigo que estube por otros videos antes de llegar al tuyo y les ganastes a todos, espero seguir viendo mas como este!!

[@FaztTech]

Muchas Gracias, la semana que viene empezare a subir muchos cursos. :)

[@crisuar1989]

Gracias +Fazt!! tus trabajos son de calidad y eso se aprecia mucho!

[@FaztTech]

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 :)

[@__renesan]

Excelente explicación, aprendí, ha sido la mejor hora 13 minutos con 51 segundos que he invertido este mes :) Muchas Gracias.

[@FaztTech]

¡Gracias!. Genial que te haya servido.

[@dannywilches5915]

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

[@miguelmejias934]

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

[@FaztTech]

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

[@miguelmejias934]

Fino!

[@TheSldsnake]

definitivamente eso era gracias !

[@TheSldsnake]

amigo me puedes ayudar como solucionaste esto ; this.postService.getPosts().subscribe(posts =>{ this.posts = posts; });

[@miguelmejias934]

dime compa, no se mucho, pero que problema te da?

[@RodolfoEscalante13496]

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.

[@arsmagnax4472]

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

[@MaxiQuiroz]

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

[@FaztTech]

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 kzbin.info/www/bejne/d5nSeZKen9KnY9k No olviden que si tienen algún problema pueden decírmelo. Un saludo :).

[@playmovies2756]

necesito ayuda! cuando compilo mi app los colores de variables.scss no se aplican, todo queda blanco, ¿conoces alguna solución?

[@WilliamCalisaya]

Lo máximo bro...!!.. hasta hoy tenia miedo a angular4, y a TS... gracias amigo, un gran aporte.!!!!!

[@FaztTech]

Genial Que te sirviera :)

[@joaquindiaz7504]

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!

[@gabrielamonserratgm49]

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 :)

[@FaztTech]

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 kzbin.info/www/bejne/d4OUpX99hpx2hdU Mucha suerte aprendiendo Angular :)

[@GianXJH]

En mi trabajo normalmente llorarían y renunciarían... Por qué no tengo una compañera de trabajo como tú :(

[@mariobolivar7045]

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!

[@FaztTech]

Un gusto que te sirva, Mario. Saludos y Mucha suerte Aprendiendo Angular.

[@ivanLee2372]

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.

[@FaztTech]

Muchas Gracias, te dejo la playlist de angular, por si quieres ver y hacer más ejemplos kzbin.info/www/bejne/ianCY5eFjrSnm9U Saludos :)

[@adriansangon9028]

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.

[@FaztTech]

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 -> kzbin.info/aero/PLL0TiOXBeDahR7sJZxCabDAOfdz6E8H3n Saludos

[@unedocencia1069]

En una me has puesto al tanto del meollo. Eres grande Fazt. Mucho éxtio.

[@anroswell]

Men excelente curso, desde mi perspectiva muy bn explicado, en espera de los futuros vídeos...gracias.

[@genjuro1287]

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

[@FaztTech]

Este fue un vídeo de una hora, y fue hace bastante tiempo que lo grabe, pero muy pronto lo renovare, mi estimado. :D

[@juanmanuelduran2912]

Muy bueno, ud sabe explicar, gracias señor

[@sebastiannieto1020]

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

[@elbarto5266]

Gracias bro tbn tenia ese problema justo lo acabo de resolver.

[@maylernavarro2772]

Igual, tenia los mismos problemas, gracias

[@RenatoApaza]

Perfecto, ahora si funciona, muchas gracias.

[@mp250986]

Gracias por el aporte, ya estaba preocupado de que tenia mal y me dio por revisar los comentarios y encontré tu apunte. Bendiciones...!!!

[@javiervillar4109]

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';

[@martinqs827]

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

[@davidsko3886]

El mejor tutorial en español!!!

[@joelkratos2011]

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 ], [...] })

[@patriciocastillo8457]

Explicas muy bien te felicito

[@emanuelb.2559]

gracias Fazt, tus videos y explicaciones son muy claras

[@lewiscalewis]

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

[@angelatorres2334]

muchas gracias muy completo :)

[@tjarredondo3868]

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.

[@ClaudioGuzmanHerrera102]

Excelente guia, voy por el siguiente video. Saludos

[@personal-danidev]

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 } })

[@alejandrooronoz4501]

Excelente amigo gracias por el tutorial despeje muchas dudas.

[@FaztTech]

Muchas Gracias, me alegra que te sirviera :)

[@elsantish]

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

[@damianfelix7890]

Muchas gracias por este aporte!

[@xeanort99]

Por qué en el ngIf no hace falta poner showHobbies entre dos corchetes?

[@LucasSilberberg]

Muy buen video! ... Podrias mostrar como agregar less?

[@yibelismarrero7232]

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.

[@DanielPacheco0587]

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

[@FaztTech]

Muchas Gracias, pero para mi es suficiente saber que de algo sirve lo que estoy haciendo. :)

[@watjtorres4946]

excelente video. gracias

[@byrons9]

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

[@hudamale-9080]

Hola, muy bueno tu video, tendrás uno donde explique como crear un login y register? Gracias

[@davidr9165]

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?

[@kevinandreszapatazuniga7725]

Quisiera simular la ultima fecha de la clasificacion al mundial mi pregunta es muy duro? ese trabjo???

[@edwinespinosa4644]

Excelente tutorial, muchas gracias!

[@FaztTech]

No es nada, esta semana espero subir el nuevo curso de Angular 5. Saludos!

[@emanuelb.2559]

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

[@IngTellez]

Se puede trabajar con Sql Server 2012 ?? por medio de ASP:NET MVC 5 '?

[@alexdiaz5951]

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

[@franciscogarciacontreras4356]

Muy buen vídeo, solo trata de no poner tantas variables con nombres similares, para poder diferenciarlas mejor, saludos

[@sergiodobobuto]

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!

[@johanjaviersolisvelasco2483]

para solucionar el error de [(ngModel)] //se agrega en el archivo app.module.ts import { FormsModule } from '@angular/forms'; imports: [ BrowserModule, FormsModule

[@sebastiannazarian1102]

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';

[@exricardo]

bien Fazt! muy bueno tu tutorial pe!

[@FaztTech]

exricardo gracias :)

[@davidborras3367]

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

[@magnerlesmes1405]

Buenas amigo gracias por el tutorial, ¿como podemos con VScode hacer debug de proyectos Angular CLI?, gracias

[@rodaft2]

hola no se si me puedas guiar con el uso de ventanas emergentes con angular usando ng2-dpo-popup gracias

[@mic2162]

Cuando puedas cam bia tu micrófono. Está bueno el video.

[@estebanmellado]

Hola, genial video. Voy a seguir los siguientes cursos. Una pregunta, ese "Loading.." se carga solo? o como lo hace?

[@ManuelMartinez-el3iw]

he tratado de crear un proyecto de angular pero me sale 5 veces "npm WARN deprecated" como puedo solucionar ese error?

[@juliocesaramadortejeda1455]

Hola.. una duda Como le agrego codigo javascript a un componente? para ya sea agregar efectos o funcionalidad

[@FaztTech]

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 -> kzbin.info/aero/PLL0TiOXBeDahR7sJZxCabDAOfdz6E8H3n ¡Un saludo!

[@omarsosa409]

ayuda ! . cuando ingreso un nuevo hobby , apreto enter , se me actualiza la pagina ,haciendo que no se agregue el nuevo hobby.. alguna solucion ? gracias

[@johancarmino6116]

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

[@williamjesusbalanhernandez9545]

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.

[@mohaisometrico6077]

Qué lenguaje de programación usa?

[@alfredozanoni3218]

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!

[@DarkSpartanHM]

maravilloso

[@felipesanchez2450]

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)

[@danielarestrepo763]

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.

[@FaztTech]

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.

[@danilogonzalez7903]

hola, tienes un video de como traer una tabla desde sql server y mostrarla en la aplicacion

[@stac95]

Hola!!! Me aparecen WARN deprecated nodemailer@2.7.2 cuando ingreso ng new myfirstapp. A que se debe??

[@mario.guitar_]

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.

[@malvarez1001]

Podrias hacer una app simple con CRUDs usando un backend hecho en django (api rest), con vistas reactivas usando channels de django?

[@FaztTech]

pues ahora solo estoy subiendo de javascript, pero pronto subire de Django y Flask, que ya tengo las apps , pero faltan grabar :).

[@malvarez1001]

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

[@xaviernavarroivives8015]

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.

[@FaztTech]

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 kzbin.info/www/bejne/eWe9paekoMx2eJY Gracias por comentar y cualquier cosa me dices. Saludos

[@xaviernavarroivives8015]

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

[@FaztTech]

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 kzbin.info/www/bejne/pKTHm4GbbJ11g80 o si quieres usar Typescript ya he creado un curso kzbin.info/www/bejne/jqnUmWOIpLyrhMU si ya terminaste este curso continua con los otros ejemplos kzbin.info/aero/PLL0TiOXBeDahR7sJZxCabDAOfdz6E8H3n 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 kzbin.info/www/bejne/b4abdpSMn9qkbLc. 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

[@Browler32]

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?

[@LeninGonzalezMec]

Can't bind to 'ngModel' since it isn't a known property of 'input' Tengo este error ? no puedo avanzar de ahi

[@FaztTech]

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

[@FaztTech]

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 :).

[@LeninGonzalezMec]

Gracias , esta funcionando!!!

[@FaztTech]

Genial! :)

[@maylernavarro2772]

tenia el problema con http, graciass

[@demianboullon945]

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.

[@demianboullon945]

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); }); }

[@inverelectricbaez7717]

excelente. solo una pregunta. Cómo enlazo un backend usando node y el framework express con un proyecto usando angular?

[@FaztTech]

kzbin.info/www/bejne/iGGQoWmVqqqaa6s

[@maes4224]

Excelente.

[@popartdesign]

Excelente. Muchas gracias!

[@FaztTech]

Genial que te sirviera. Mucha suerte.

[@BrunoArnaldo]

no me tomaba los post lo arregle tambien agregando: in app module Step 1 add import import { HttpModule } from '@angular/http'; Step 2 add HttModule in : imports: [ HttpModule ],

[@itifjpp]

Ami me me dio problemas con este problema Property 'subscribe' does not exist on type Observable 'void googlee y no encontre la solucion espero nos ayudes en este problema para usarlo tambien porque para el ejemplo de servicios use PROMISES :v

[@FaztTech]

Hola Felipe, si me pegas el codigo en un gist, te ayudare en lo posible --> gist.github.com/ Saludos :D

[@martinmorales3216]

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!

[@mauriciom7691]

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

[@FaztTech]

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 kzbin.info/www/bejne/eWe9paekoMx2eJY y si tienes dudas te recomiendo unirte al slack, porque a veces no me llega la notifiacion de los comentarios . :)

[@1995thebama]

excelente video seria bueno que hicieras un video de React o de React Native saludos :)

[@FaztTech]

Muchas Gracias!. En estos días subiré un video de como hacer un chat con React.js paso paso. Gracias por comentar. Saludos! :D

[@geronimojordan759]

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.

[@codigodeu5503]

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.

[@k9999k1]

Se ve muy bien pero type script lo veo muy poco intuitivo python lo deja atras por mucho

[@OPANDROIDSU]

mucho mejor que los cursos basicos del udemy :v

[@isaacbladehd]

Buenas tengo una pequeña interrogante @fazt Como puedo crear una funcion en un componente padre y usarla en uno de los componentes hijos o en cualquier otro componente que desee. Por ejemplo. En este ejemplo uso jQuery por que lo tengo instalado en mi proyecto. Favor comunicarme si no soy especifico private fazt() { $(function() { // este boton es del componente hijo $('.botonHijo').click(function(){ //contenedor componente padre $('.contenedorPadre').css({ 'background': 'teal' }); }); }); } La cuestion es como hago que las funciones del componente hijo afecten al padre? Ya con eso resuelvo una gran necesidad en el diseño de mi webapp Angular Saludos

[@carloscardona8149]

hola como obtengo un host en internet?? para mi pagina

[@personal-danidev]

una pregunta bro cuando doy enter para registrar el hooby la pagina se actualiza me podrias decir porque? gracias de antemano

[@FaztTech]

Es así como los formularios de HTML funcionan, pero en angular puedes cancelar ese evento agregando un false a tu método del formulario :)

[@mauriciom7691]

andas bien amigo para explicar, gracias

[@FaztTech]

Gracias, pronto actualizare este curso, solo estoy esperando que salga la version 5 y considerar los cambios, saludos y gracias por comentar

[@mauriciom7691]

otra mas va a salir? osea que tendre que aprender una cada año? :/

[@FaztTech]

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.

[@mauriciom7691]

ha gracias ahora si entendí

[@FaztTech]

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. kzbin.info/www/bejne/eWe9paekoMx2eJY es un chat, que reviso a diario, saludos y suerte

[@victorfranco912]

Basico, con algunos errores en cuanto a profundizar en los conceptos, especialmente en no saber el error al momento de asignar los posts a la interfaz ... el resto bien

[@ZaeroX]

Estimado Muy buen video.. pero no me edita el nombre cuando utilizo ngmodel y esta puesto tal cual esta el video.

[@FaztTech]

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

[@ZaeroX]

Fazt muchas gracias.. en la mañana resolvi el problema y efectivamente agrege y se soluciono... gracias

[@FaztTech]

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

[@desarrolladorweb9852]

hola Fazt como estas, no me esta funcionando ngModel y la verdad nose que sea, puedes ayudarme? gracias

[@FaztTech]

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

Es recomendable aprener Angular 4 aún, o mejor aprendo Angular 5?

[@FaztTech]

Aprende la ultima versión :)

Muchas gracias

[@KNONXD1986]

buen tuto

[@iPhoeniix26]

fazt por favor contempla un video de un CRUD con angular y mysql

[@FaztTech]

Hola, ya estoy preparando un ejemplo, de como usarlos, toda esta semana me estoy dedicado a ello, muy pronto lo publicare

[@designzedart4263]

buen video tutorial me podrian ayudar con este error .. gracias import 'rxjs/add/operator/map'; Failed to compile. /home/iepiadm/controlAsistencia/src/app/posts.service.ts (14,76): Property 'map' does not exist on type 'Observable'.

[@FaztTech]

Intenta importandolo de esta manera: import {Observable} from 'rxjs'; es decir reemplaza esa linea por esta.

[@ISALINOBEATZ]

Te quiero hacer algunas preguntas.. este curso sólo tiene 1 parte ? Podré usarlo si ya salió la versión 6

[@FaztTech]

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 :)

[@ISALINOBEATZ]

Fazt gracias bro, lo espero con ansias....

[@sebavj3395]

tengo una pregunta, omo podria agregar esto a un framework cakephp?

[@FaztTech]

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

[@FaztTech]

Por cierto he creado un slack por si tienes más dudas, alguie más te puede ayudar allí, kzbin.info/www/bejne/eWe9paekoMx2eJY

[@sebavj3395]

muchas gracias :) le vy a revisar gracias por la ayuda