Udemy

Platform

Español

Language

Web Development

Category

Aprende Angular 8+ desde 0 con 10 proyectos completos

Aprende a realizar aplicaciones web Front-End

4.35 (158 reviews)

Students

34.5 hours

Content

Aug 2021

Last Update
Regular Price


What you will learn

Manejar los conceptos básicos de Angular.

Entender todo lo que compone Angular (componentes, servicios, directivas, pipes, etc).

Crear aplicaciones web con Angular.

Desplegar tus propias aplicaciones en un servidor.


Description

¡Bienvenidos a mi curso de Angular (8/9)! Angular esta experimentando un crecimiento enorme en el desarrollo web Front-End, haciendo que si estas en este sector tarde o temprano tengas que aprender este framework Javascript de Google.

En este curso, quiero que te inicies en este framework y lo haremos haciendo desde pequeñas aplicaciones a otras más complejas.

Aprenderemos todos los componentes que forman Angular para hacer nuestras aplicaciones web.

Estas serán las aplicaciones que haremos en este curso:

  • Pregunta y respuestas: primera aplicación para empezar con lo más básico de angular, los componentes, la estructura de este y directivas *ngIf y *ngFor.

  • Lista de tareas: creamos nuestras propias tareas y podremos visualizar aquellas que estén completas y las que no. En esta app, aprenderemos como se comunican los componentes entre sí, usando Input y Output.

  • Agenda de contactos: añadiremos nuestros contactos a través de un formulario y los visualizaremos en pantalla. Veremos el potencial de los formularios en Angular en esta app.

  • Cocktail app: usando la API de cocktaildb, realizaremos filtros para buscar nuestros cocktails preferidos. En esta app, veremos como usar los servicios para recoger información de fuera. También veremos como se crean y usan los modelos (clases).

  • Viajes soñados: Cargaremos una lista de países en una lista que podremos arrastrar y mover a otra lista usando drag and drop. Veremos como usar angular Material y directivas propias de angular.

  • Viajes soñados (mejora 1): Vemos como usar un instalar y poner un mapa de Google maps. Por cada país que indiquemos, se colocará una marca en el mapa.

  • Reservas peluqueria Juani: Usando un formulario, introduciremos los datos para añadir una reserva. Mediante un logueo, podremos ver las reservas que nos han creado. Las reservas se guardan en FireBase. El formulario será un formulario reactivo.

  • Reservas peluqueria Juani (mejora 1): Añadimos un calendario (fullcalendar) para mostrar las reservas.

  • Burguer Queen: Imitamos los paneles de pedido rápido de las cadenas de comida rápida, repasando todo lo anterior pero aun mayor nivel. Los pedidos serán guardados en FireBase.

  • Burguer Queen (mejora 1): Añadimos paypal como forma de pago

  • Dashboard: Parte trasera de la aplicación de blog dinámico, nos permitirá crear post y categorías. Veremos gráficas, herencia de componentes, guards y directivas propias. Todo se guarda en FireBase

  • Blog dinámico: Mostramos los posts guardamos a través de la aplicación dashboard, la aplicación es una imitación de mi web original, discoduroderoer.

  • Controla gastos: Aplicación para controlar nuestros gastos e ingresos para tener una idea global de como gastamos nuestro dinero, pudiendo crear nuevos usuarios y loguearnos en la app. Usaremos gráficas, detalles, animaciones, suscripciones, validadores personalizados, formularios, etc. Todo lo gestionaremos desde FireBase.

  • Visor pedidos Burguer Queen: Aplicación relacionada la de Burguer Queen donde veremos los pedidos que se realizan desde esta con una vista para el empleado que gestiona el pedido y otra para el cliente que espera su pedido. Generamos PDFs para mostrar nuestro pedidos.

  • Escritorio aplicaciones: Aplicación que recopila todas las anteriores aplicaciones para mostrar todas las aplicaciones realizadas en el curso y otras tuyas. Vemos como podemos tener aplicaciones una dentro de otra.

Como extra, os agrego las aplicaciones que hacemos en Youtube y Twitch.

Todas las aplicaciones han sido testeadas en las siguientes versiones:

  • v8.0.1

  • v8.2.14

  • v9.1.2

  • v10.0.5

  • v11.1.1

  • v12.0.2

¡Nos vemos en el curso!


Screenshots

Aprende Angular 8+ desde 0 con 10 proyectos completos
Aprende Angular 8+ desde 0 con 10 proyectos completos
Aprende Angular 8+ desde 0 con 10 proyectos completos
Aprende Angular 8+ desde 0 con 10 proyectos completos

Content

Introducción

Introducción

Un poco sobre mí

Sobre las calificaciones tempranas

¿Que es Angular?

¡Pregunta!

Redes sociales

Discord

Preparacion del entorno

Instalando Visual Studio Code en Windows

Instalación de NodeJS en Windows

Instalando Visual Studio Code en Linux

Instalación de NodeJS en Linux

Instalando Visual Studio Code en Mac

Instalación de NodeJS en Mac

Instalar angular-cli

Documentacion Angular

Documentación oficial Angular

Angular Expo

Creacion de proyectos y comandos ng utiles

Creando nuestro proyecto

Explicando la estructura general del proyecto

Arrancando en nuestro proyecto

Introducción sobre NPM

Añadir bootstrap 4 y JQuery en nuestro proyecto

Conectar nuestra aplicación angular con nuestra tablet o movil

Extensiones recomendadas para Visual Studio Code con angular

Atajos de teclado Visual Studio Code

Debbugear nuestro código con Visual Studio Code

Debbugear nuestro código con el navegador

Preguntas y respuestas

Resultado esperado

Creando nuestro primer componente

Creando el contenedor base con bootstrap

Creando una pregunta y sus respuestas

Mostrar nuestra pregunta usando interpolación

Mostrar nuestras respuestas con *ngFor

Chequear respuesta correcta

Mostrando si la respuesta es correcta con *ngIf

Mejorando el responsive

Validar si la pregunta o las respuestas son correctas

Descarga de la aplicacion

Lista de tareas

Resultado esperado

Añadiendo Fontawesome 4.7 a nuestro proyecto

Creando nuestro componente padre e hijo y la base

Creando la plantilla base

Empezando con el componente TaskList

Estilos generales de nuestra app

Interface Task

Creando input para introducir tareas

Añadiendo tareas

Inputs

Creando la plantilla de nuestras tareas

Pipes

Outputs

Tareas completadas

Mostrar y ocultar tareas completadas

Descarga de la aplicación

Agenda de contactos

Resultado esperado

Creando nuestra base

Creando nuestro menu

Media queries

Creando nuestras rutas

Interface Contact

Formulario de añadir contacto - Parte 1

Formulario de añadir contacto - Parte 2

Usando ngModel

Servicio para guardar contactos

Listar contactos

Validar formulario - parte 1

Validar formulario - parte 2

Cargar contactos de un fichero JSON

Mostrar ventana modal en el contacto

Pipe capitalize

Descarga de la aplicación

Cocktail App

Resultado esperado

Explicando como funciona el API REST de cocktail

Creando la base

Creando modelo Cocktail (parte 1)

Creando modelo Cocktail (parte 2)

Creando modelo Cocktail (parte 3)

Creando nuestra estructura de rutas

Mostrar boton 'Mostrar filtro'

Creando interfaz Filter

Creando el formulario de filtro

Obtener los cocktails según el filtro

Parsear los datos del Cocktail en nuestro servicio

Mostrando nuestros cocktails en cards

Mostrar spinner mientras carga nuestros cocktails

Paginar nuestros cocktails

Llamar al detalle cocktail

Creando plantilla del detalle cocktail

Descarga de la aplicación

Viajes soñados

Resultado esperado

Creando la base

Componente list countries

Obtener paises con restcountries

Modelos country

Modelo region

Fichero regiones

Obtener todas las regiones del fichero

Utilzando un Forkjoin

Mostrando nuestros paises

Importar componentes de angular material

Colocando nuestro filtro de region

Filtrando países según la región seleccionada

Colocando nuestro spinner

Drag and drop con una lista

Drag and drop entre dos listas

Filtrando paises ya visitados

Descarga de la aplicación

Reservas peluqueria

Resultado esperado

Instalar primeng

Instalar ng-bootstrap

Creando la base

Creando nuestro servicio de traduccion

Pipe translate

Componente header

Formulario para añadir bookings - Parte 1

Formulario para añadir bookings - Parte 2

Calendar primeng - Parte 1

Calendar primeng - Parte 2

Form groups

Validar formulario

Firebase, primeros pasos

Modelo booking

Servicio para añadir bookings

ng-template para los modales

ViewChild

Modal al añadir booking

Recoger todos los bookings

Modal cuando existe un booking

Creando nuestro modal del Login

Formulario Login

Servicio de autentificacion

Redirigiendo del login a la lista de bookings

Mostrando la lista de bookings

Mostrar solo los bookings con fecha mayor a la actual

Guardar si nos hemos logueado y logout

Cambiar idioma al nvegador para comprobar traducciones

Descarga de la aplicación

Pedidos Burguer Queen

Resultado esperado

Creando la base

Favicon

Header de nuestra aplicacion

Instalando nuevas fuentes

Footer

ProductService (cargar todos los productos)

Modelo product

Mostrando las categorias de productos

Mostrando los productos de cada categoria - Parte 1

Mostrando los productos de cada categoria - Parte 2

Mostrar producto

Mostrando los extras un producto - Parte 1

Mostrando los extras un producto - Parte 2

Mostrando los extras un producto - Parte 3

Mostrando los extras un producto - Parte 4

Tocando estilos de mat-checkbox con ::ng-deep

Tocando estilos de mat-radio con ::ng-deep

Ultimos retoques producto extra

Modelo Order

Método para añadir productos en el modelo Order

Añadiendo productos a nuestra orden con un servicio

Modal al añadir un producto

Modal para mostrar nuestra orden - Parte 1

Modal para mostrar nuestra orden - Parte 2

Componente ProductsOrder

getExtras y totalPrice en el modelo de Product

Creando mas funcionalidad en el modelo Order

Rematando el modal del pedido

Recibir respuesta del modal

Crear nuestro pedido

Subir nuestro pedido a firebase

Modal con nuestro numero de pedido

Descarga de la aplicación

Dashboard

Resultado esperado

Creando la base

Cargando la configuración inicial

Colocando Sidebar y Dashboard

Sidebar - Parte 1

Sidebar - Parte 2

Sidebar - Parte 3

Rutas

Widget padre

Widget hijo estadisticas

Modelo comment

Firebase avanzado

Obtener comentarios con AngularFireDatabase

Widget ultimos comentarios

Instalar chartjs y moment

Widget gráfica de visitas - parte 1

Widget gráfica de visitas - parte 2

Rematando el componente Resume

Modelo Category

Empezando con el componente categorias

Formulario añadir Categoria - parte 1

Formulario añadir Categoria - parte 2

Añadiendo categorias

Tabla para mostrar las categorias - parte 1

Tabla para mostrar las categorias - parte 2

Mostrando las categorias

Seleccionando y borrando categorias

Creando buscador de categorias

Directiva HighLight - Creacion - parte 1

Directiva HighLight - Ciclos de vida - parte 2

Directiva HighLight - Remate y uso - parte 3

Modelo Post

Empezando con el Componente Posts

Formulario añadir post - parte 1

Formulario añadir post - Editor HTML kolkov - parte 2

Widget para seleccionar categorias

Widget upload thumbails - parte 1

Widget upload thumbails - parte 2

Widget upload thumbails - parte 3

Añadiendo posts

Obtener todos los posts

Mostrando posts

Pipe Join

Seleccionando y borrando posts

Retoque en el widget de estadísticas

Centrándonos con el componente Login

Formulario login

Interface ILogin

Comprobar si el login es correcto con AngularFireAuth

Comprobar que estas logueado

LoginGuard

Logout

Alternativa a localstorage

Descarga de la aplicación

Blog dinamico

Resultado esperado

Antes de comenzar

Creando la base

Completando ConfigService

Header - Redes sociales

Header - Bloque buscar post

Header - Enlace dashboard y logo

Header - Menu

Footer

Componente Widget

Creando nuestros widgets footer con ng-template

Copyright

Componente Content

Cargando posts

Spinner y overlay

Componente Card Post

Cargar Post via id

Mostrar post

Pipe sanitize

Formulario para dejar un comentario

Mejorando modelo comentario

Añadir comentario

Cargar comentarios de un post

Mostrar comentarios de un post

Paginar comentarios

Paginar posts

Mostrar principal post

Mostrar posts por categoria

Busqueda de posts

Directiva ClickOutside

Retomando el buscador de posts

Descarga de la aplicación

Controla gastos

Resultado esperado

Antes de comenzar

Creando la base

Header

Menu

Shared Module

Componente Spinner

Modelo categoria

Componente Category

Componente detalle generico

Preparando nuestro detalle añadir categoria

Adaptando tamaño de nuestro detalle añadir categorias

Animacion detalle

Formulario del detalle de añadir categorias

Preparando firebase

Añadir categorias

Modales añadir categorias

Recuperar categorias

Mostrar categorias

Dandole estilos a las categorias

Editar categorias

Borrar Categorias con un modal de confirmacion

Validar que no metamos categorias existentes

Modelo Registry

Abriendo nuestro detalle de registros

Formulario detalle registros - Parte 1

Formulario detalle registros - Parte 2

Traducir calendario segun el idioma actual

Añadir registros

Modales añadir registros

Validar cantidad de un registro

Componente resumen

Mostrar registros

Rematando estilos para los registros

Mostrar la suma total de los registros

Paginacion registros

Borrar registros

Seleccionar un registro para editar con una subscripción

Editar registros - Parte 1

Editar registros - Parte 2

Interfaz filter

Componente Filter

Formulario para filtrar

Filtrando datos en los registros

Rematando filtro y componente resumen

Gráficos

Rellenando los datos para la grafica

Añadiendo el select de años en el componente Filter

Filtrando datos en las gráficas

Mejorando el estilo del componente filter

Preparando login

Formulario Login

Componente create account

Formulario create account

Crear cuenta de usuario

Comprobar login

Comprobar si estamos logueados

Logout

Login guard y redirect guard

Recoger registros y categorias del usuario actual

Validar confirmar password

Descarga de la aplicación

Distribuyendo nuestra aplicación

Compilando nuestras aplicaciones

Instalar XAMPP en Windows

Instalar XAMPP en Linux

Instalar XAMPP en Mac

Desplegando nuestras aplicaciones

Descarga de proyectos

Descarga de todos los proyectos

Aplicaciones hechas en youtube o twitch

Curriculum vitae

Visor de eventos

Cupones

Despedida

Despedida


Reviews

D
Deimer2 September 2020

Decepcionado. La verdad deja muchos cabos sueltos, en un momento estas bien concentrado en un archivo y de repente salta a otro en el próximo capitulo sin ningún preámbulo, ademas siento que le falta mas organización en la estructura de lo que se enseña, primera vez que veo este framework y la verdad no me acaba de convencer el "aprendizaje desde cero " planteado en el título del curso.

C
Claudio11 July 2020

Excelente el profesor, paso a paso detalle a detalle va explicando y se entiende todo perfecto. Tal vez profesor podria entrar mas en detalle que rol en el proyecto cumplen los archivos, así uno sabe a cuales prestarle atención, en un capítulo lo hizo pero muy por encima.

O
Omar3 June 2020

Me gusta el curso, el expositor va explicando en detalle y se entiende bien, y espero seguir aprendiendo.

S
Sebastian27 April 2020

La manera en que funciona este curso, es altamente soportada en la repetición. Son muchos proyectos y en todos hay elementos comunes. En mi caso, no pude completarlo porque tomaba demasiado tiempo hacer el código y después de un tiempo resultaba monótono. Terminé de aprender lo básico con la documentación oficial y otros medios más rápidos para el proyecto que estaba haciendo. Sería excelente si el curso tuviese el "antes" - "después" en el repositorio del curso para los conceptos nuevos de cada capítulo.

J
Jose10 April 2020

Llevo comprados de Udemy 147 cursos, y puedo decir sin lugar a dudas que este es el curso más infravalorado que he visto. No entiendo cómo tiene tan pocos estudiantes, sólo el código que obtienes vale 100 veces más de lo que cuesta el curso. Empieza desde cero y va generando proyectos reales de más sencillos a más complejos, explicándote muy bien cada concepto, muy bien extructurado, y es divertido ir aprendiendo así. Lo recomiendo 100%.

G
Geovanni26 February 2020

esta bueno el curso asta ahora tambien seria bueno que inplementara unos capitulos con bases de datos locales no se por ejemplo MariaDB para completar mas el curso

A
Alejandro11 January 2020

Acabo de comenzar y no llevo muchos videos aunque de momento las explicaciones son adecuadas y detalladas. Se nota el alto nivel de conocimiento de Fernando.

L
Luis6 December 2019

Bien, creo que ya es hora de dar mi calificación. El curso esta excelente, Te enseña de lo mas basico a lo mas avanzado poco a poco. En mi opinión personal los proyectos te abren la mente a otros proyectos mas grandes, se que poco a poco incluirá mas proyectos avanzados, pero para alguien que quiere aprender todo lo de angular sencillo práctico y bien explicado, es el curso que tienen que tomar... Ha otra cosa. la asesoria esta genial, en el curso viene una opcion para estar comunicándose de manera inmediata con el profesor. así que a sacarle provecho. Saludos

T
Tony24 November 2019

Este es un gran curso de Angular. Los proyectos son geniales, van desde ejemplos sencillos a cosas muy avanzadas. Se aprende un montón con este curso.

S
Sergio29 October 2019

Excelente curso para personas nóveles y que quieran refrescar conocimientos de Angular. Te explica todo paso a paso. Un curso interesante e interactivo, donde puedes ir haciendo los ejercicios paso a paso.

C
Carlos13 October 2019

El curso es bueno, a mi me ha servido para afianzar conocimientos ya que actualmente soy desarrollador de Angular, pero siendo objetivo, no es para gente que nunca haya visto Angular, creo que faltan algunas explicaciones en ciertos momentos y a veces la velocidad de las clases es algo alta. Un saludo y enhorabuena!

C
Christian17 September 2019

Va muy bien el curso, lo único que me gustaría, si se tiene planeado hacer más grande con nuevas clases, es que fuera mejor planeado. Es confuso cuando se deja un código a medio hacer y se va a otro archivo o archivos, a agregar una variable para que funcione en donde se dejo el código sin terminar. Si se quiere seguir la creación del código conforme el vídeo, a veces pasa que lo que ya había avanzado en el transcurso de la clase va cambiando y lo poco o mucho que había avanzando lo tengo que borrar/cambiar.

D
Daniel4 September 2019

Este curso considero que está muy enfocado para aprender dinámicamente y de forma muy práctica. Además de que el temario es ámpliamente completo, desde las clasicas instalaciones, a resolución de problemas habituales abarcando casos de desarrollo como logins, servicios de autentificación, bucles, condicionales, etc... A desarrollo de aplicaciones con elementos externos como Firebase. Además en todas las clases, se obtienen tips para reutilizar código, optimizar el uso de Visual Studio y comprender mejor el funcionamiento interno, por lo que considero que el curso es muy completo y para todos independientemente del nivel.

M
Manuel27 August 2019

Estoy muy contento por haber elegido este curso, es bastante completo y Fernando lo explica todo de forma clara y con muchos casos prácticos de ejemplo, por lo que se hace muy ameno. Es ideal para principiantes o personas que ya tienen ciertos conocimientos en Angular y que quieren especializarse.

J
Jesús23 August 2019

Curso bastante completo. Las cosas están muy bien explicadas ya que explica al detalle como se van haciendo cada una de las aplicaciones. Recomiendo el curso al 100% ya que es lo que hoy en día se utiliza y que mejor que tener un curso tan bien explicado y con tantos ejemplos como este. De 10


Coupons

DateDiscountStatus
11/7/201995% OFFExpired
4/5/202095% OFFExpired
4/20/202095% OFFExpired

2146572

Udemy ID

1/12/2019

Course created date

11/7/2019

Course Indexed date
Bot
Course Submitted by