Udemy

Platform

Español

Language

Web Development

Category

Angular: De cero a experto - ( Edición 2021 )

Componentes, directivas, servicios, mapas, gráficas, JWT, autenticación, despliegues, mongo, Git, GitHub y mucho más

4.83 (786 reviews)

4278

Students

41.5 hours

Content

Feb 2021

Last Update
$199.99
Regular Price

What you will learn

Angular profundamente

Desarrollar tus propias aplicaciones usando Angular

Seguir estándares y buenas prácticas framework

Aprender Angular basado en TypeScript

Usar librerías de terceros

Aprender otros temas relacionados en desarrollo de aplicaciones con Angular


Description

Angular de cero a experto: (Angular 11+)

Angular es un framework para desarrollo de aplicaciones de todo tipo, por defecto genera aplicaciones web muy poderosas y robustas, y si se mezcla con otras tecnologías, puedes hacer aplicaciones móviles y de escritorio también con el mismo código.


Este curso te ayudará a aprender Angular (la última versión) a profundidad mediante ejercicios y tareas que tú mismo harás. Partiendo de cero conocimiento de TypeScript hasta crear un sistema robusto de autenticación, uso de mapas, consumo de servicios y mucho más. Puntualmente tocamos estos temas:

  1. Bases de TypeScript y ESCMAScript

  2. Hola Mundo en Angular

  3. Componentes

  4. Directivas

  5. Servicios

  6. Módulos

  7. Todos los pipes de Angular

  8. Rutas

  9. Rutas Hijas

  10. Carga perezosa o Lazyload de módulos

  11. Guards

  12. Protección de rutas

  13. Autenticación mediante JsonWebTokens

  14. Mapas

  15. Uso de librerías de terceros escritas en Angular

  16. Uso de librerías NO escritas para Angular

  17. Consumo de APIs

  18. CRUD

  19. SPA

  20. Git

  21. GitHub

  22. Despliegues a producción

  23. MongoDB

  24. Node

  25. Re-utilización de componentes, directivas, servicios..

  26. Comunicación entre componentes y módulos

  27. Uso de extensiones reactivas

  28. PrimeNG

  29. Material Design

  30. Bootstrap

  31. Y mucho más...

Este es un curso robusto y fuerte, que contiene todo lo que necesitarás para trabajar en Angular y poder desenvolverte como deseas en el Framework, eso incluye poder leer la documentación, errores y optimizaciones de código para mejorar la forma de escribir nuestras aplicaciones.

Al finalizar el curso, podrás crear tus propias aplicaciones usando Angular y poder comprender código de otros desarrolladores porque seguimos estándares recomendados por el framework, sin contar que también hay información extra dentro del mismo para seguir el camino una vez terminado el curso.




Screenshots

Angular: De cero a experto - ( Edición 2021 )
Angular: De cero a experto - ( Edición 2021 )
Angular: De cero a experto - ( Edición 2021 )
Angular: De cero a experto - ( Edición 2021 )

Content

Introducción al curso

Introducción

¿Cómo funciona el curso?

¿Cómo hacer preguntas?

Instalaciones necesarias y recomendadas

Instalar AngularCLI

Conceptos generales para empezar con Angular y TypeScript

Introducción a la sección

Temas puntuales de la sección

¿Qué es TypeScript? y ¿Por qué Angular usa TypeScript?

10 Mitos y realidades de Angular

Base de TypeScript - Sección recomendada

Introducción a la sección

Temas puntuales de la sección

Inicio de proyecto - Introducción a TypeScript

Tipos básicos y conceptos generales

Objetos, arreglos e interfaces

Funciones básicas

Funciones con objetos como argumentos

Tarea sobre objetos e interfaces

Desestructuración de Objetos

Desestructuración de Arreglos

Desestructuración de argumentos

Importaciones y exportaciones

Clases básicas

Constructor de una clase

Extender una clase

Genéricos

Decoradores de clases

Encadenamiento opcional

Código fuente de la sección

Introducción a Angular

Introducción a la sección

Temas puntuales de la sección

Introducción a Angular

Crear un proyecto de Angular

Explicación de cada archivo del proyecto

Explicación de los archivos dentro del SRC

App Component

Contador App

Métodos en el componente

Tarea con el contador

Crear un componente manualmente

Componente de Heroe y separación de directorios

Cambios en el template del componente

Concepto de one way data binding - enlazado en una sola vía

Crear componente de forma automática

Directiva *ngFor

Directiva *ngIf

Ng-Template y el ngIf-else

Módulos

Módulos - segunda parte

Bonus: Hacer respaldo de nuestro proyecto en GitHub

Código fuente de la sección

Expandiendo nuestras bases

Introducción a la sección

Temas puntuales de la sección

Continuación del proyecto

Módulo DBZ (Dragon Ball Z)

Diseño de la pantalla a trabajar

FormsModule

ngModel

Mostrar listado de personajes

Crear componentes hijos

@Input

Tarea con inputs y módulos

@Outputs y EventEmitter

Bonus: Depuración de aplicación

Servicios

Centralizar el acceso de los personajes en el servicio

Métodos en el servicio

Código fuente de la sección

Despliegues rápidos a producción

Introducción a la sección

Temas puntuales de la sección

Generar build de producción

Desplegando en Netlify

GifsApp - Aplicación para buscar imágenes

Introducción a la sección

Temas puntuales de la sección

Demostración del objetivo final de la sección

Inicio de proyecto - GifsApp

Diseño inicial de nuestra aplicación de Gifs

Módulo Shared

GifsModule y sus componentes

@ViewChild - Obtener referencias a objetos del HTML

GifsService

Controlar el historial de búsquedas

Giphy Api Key - Giphy Developers

Realizar una petición HTTP

Mostrar los resultados en pantalla

Colocando un tipado a las peticiones http

LocalStorage

Cargar imágenes automáticamente

Obtener imágenes desde el sidebar

HttpParams

Animate.style CSS

Código fuente de la sección

SPA - PaisesApp

Introducción a la sección

Temas puntuales de la sección

Demostración de la sección

Inicio de proyecto - PaisesApp

Estructura y explicación de la aplicación de países

Creando los módulos y los componentes básicos

Estructura HTML de nuestra aplicación

RouterModule - Rutas en nuestra aplicación

RouterLink

Componente Sidebar

Componente para buscar por país

Servicio para buscar países

Manejo de errores

Tipado de la petición de RestCountries

Llenar la tabla de países

Componente Input y Tabla

Funcionalidades del componente PaisInputComponent

DebounceTime - en el input

Por Capital

Ver país de forma independiente

RxJs - SwitchMap

Terminar la pantalla de ver país

Fin de la pantalla de ver país

Código fuente de la sección

Continuación aplicación de Países - Sugerencias, debounce y más

Introducción a la sección

Temas puntuales de la sección

Continuación del proyecto - PaísesApp

ngClass, class y [class.]

Clases de CSS condicionales

Mostrar países por región

Optimizar las peticiones HTTP

Animaciones de CSS

Mostrar sugerencias al escribir - autocomplete

Código fuente de la sección

Pipes de Angular

Introducción a la sección

Temas puntuales de la sección

Demostración del objetivo de la sección

Inicio de proyecto - PipesApp

Introducción a los Pipes de Angular

Instalar PrimeNg

Prime Button y estilo global

Cards y botones con íconos

PrimeNg module

PrimeNg - MenuBar

Rutas de nuestra aplicación

Cambiar las rutas utilizando el MenuBar

PrimeFlex

UpperCase, LowerCase y TitleCase Pipes

Date Pipe

Cambiar el idioma por defecto

Timezone y otros idiomas

DecimalPipe

CurrencyPipe y PercentPipe

PrimeNg - Fieldset

I18nSelectPipe

I18nPluralPipe

Tarea sobre i18nPipes y Primeng

SlicePipe

KeyValuePipe

JsonPipe

AsyncPipe

Código fuente de la sección

Pipes personalizados

Introducción a la sección

Temas puntuales de la sección

Continuación de proyecto - PipesApp

Pipe personalizado - mayusculasPipe

Valor y argumentos a los pipes personalizados

PrimeTable y PrimeToolbar

Llenar un PrimeTable con data

Tarea pipe personalizado - VuelaPipe

Ordenar héroes por nombre - OrdenarPipe

Parametrizar nuestro pipe personalizado

Primeng - Sortable Table

Código fuente de la sección

HeroesApp - Rutas hijas y Lazyload

Introducción a la sección

Temas puntuales de la sección

Demostración del objetivo final de la sección

Inicio de proyecto - HeroesApp

Módulos y componentes iniciales

Rutas principales - Root

Rutas hijas y LazyLoad - AuthRoutes

Tarea - Rutas Hijas de Héroes

Resolución de la tarea - Rujas Hijas de Héroes

Mostrar Rutas Hijas - Segundo RouterOutlet

Código fuente de la sección

HeroesApp - Angular Material & Angular Flex-Layout

Introducción a la sección

Temas puntuales de la sección

Demostración del objetivo final de la sección

Continuación del proyecto - HeroesApp

Material Sidenav, Toolbar e iconos

Material Navlist

Heroes Backend - json-server

Heroes Service - Traer información de los héroes

Interfaz Héroe

Material Card - Flex Layout

Flex Layout - Diferentes resoluciones

Tarea - HeroeTarjetaComponent

Tarea - PipeImagen

Tarea - Ruta Héroe y Editar Héroe

Pantalla de Héroe

Diseño de la pantalla de Héroe

Variables de entorno

Material Autocomplete

Autocomplete - Segunda Parte

Tarea - Autocomplete cuando no encontró nada

Resumen de la sección

Código fuente de la sección

HeroesApp - CRUD (Continuación con Angular Material)

Introducción a la sección

Temas puntuales de la sección

Demostración del objetivo final de la sección

Continuación del proyecto - HeroesApp

Diseño de la pantalla para agregar héroes

Insertar en base de datos

Editar héroes

Excepciones en nuestro ImagenPipe

Eliminar registros

Pipes Puros e Impuros

Material Snackbar

Material Dialog

Información desde y hacia el dialogo

Adecuar los textos de la pantalla de agregar

Código fuente de la sección

Protección de Rutas

Introducción a la sección

Temas puntuales de la sección

Continuación de proyecto - HeroesApp

Pantalla de Login Básico

AuthService - Servicio para mantener el estado de la autenticación

Mostrar la información del usuario activo

Angular Guards - CanLoad

CanActivate

Mantener la sesión del usuario

Código fuente de la sección

Formularios - Template y Lazyload

Introducción a la sección

Temas puntuales de la sección

Inicio de la sección - Formularios

Creación de módulos necesarios

Componentes y LazyLoad de formularios

SideMenu

Template: Diseño del formulario básico

Template: FormsModule

Template: Mostrar mensajes de error

ViewChild

Template: Validar número igual mayor a 0

Directivas personalizadas - CustomMin - Opcional

Template: Limpiar el formulario

Template: Formularios dinámicos y arreglos

Agregar elementos de forma dinámica

Eliminar elemento creado de forma dinámica

Agregar juegos favoritos

Template: Radio, Check y Switches

Template: Validando Radios, Checks y Switches

Código fuente de la sección

Formularios Reactivos

Introducción a la sección

Temas puntuales de la sección

Continuación de proyecto - Formularios

Primeros pasos en formularios reactivos

FormBuilder

Validaciones básicas - Forms Validator

Mostrar mensajes de error

Submit del formulario

Tarea: Validar un nuevo campo

FormArray

Agregar controles al FormArray

Eliminar elementos de un FormArray

Formularios Reactivos: Switches

Actualizar el valor de la persona

Documentación de formularios reactivos en Angular

Código fuente de la sección

Formularios: Validaciones manuales y asíncronas

Inicio de sección

Temas puntuales de la sección

Continuación de proyecto

Resolución de la tarea - Ruta y LazyLoad

Diseño de la pantalla de registro

Validar contra una expresión regular

Evaluar un email

Validaciones personalizadas

Separar la lógica de validaciones del componente

Validar contraseñas iguales

Preparaciones para Validaciones Asíncronas

Validaciones asíncronas

Estado del formulario

Errores personalizados

Mensaje de error personalizado

Código fuente de la sección

Formularios Reactivos - Multiples selectores anidados

Introducción a la sección

Temas puntuales de la sección

Demostración del objetivo de la sección

Inicio de proyecto - Selectores

Estructura de directorios para esta aplicación

Formulario reactivo - primer selector

Selector de regiones

Segundo selector anidado

Limpiar país cuando el primer selector cambia

Tercer selector anidado - Fronteras

Llenar tercer selector - Fronteras

Mejorar la experiencia de usuario

Cambiar códigos de fronteras por los nombres de los países

Código fuente de la sección

LifeCycle Hooks

Introducción a la sección

Temas de la sección

Inicio de proyecto - LifeCycle

Implementar todos los hooks del ciclo de vida

Explicación sobre los ciclos de vida

ngOnChanges

ngOnDestroy

Más información sobre el ciclo de vida

Código fuente de la sección

Mapas en Angular

Introducción a la sección

Temas puntuales de la sección

Demostración del objetivo final de la sección

Inicio de sección - MapasApp

Creando los componentes necesarios y rutas

Menú de la aplicación

Mostrar un mapa en pantalla completa

Punto central, zoom y accessToken de forma global

Página Zoom-Range - Diseño y tarea

Controlar el objeto del mapa - ZoomIn y ZoomOut

Controlar el nivel del Zoom

Crear EventListeners del mapa

Restringir el Zoom y uso del Range

Obtener las coordenadas centrales del mapa

Marcadores en el mapa

Añadir marcadores de forma dinámica

Mantener el arreglo de marcadores y colores

FlyTo

Guardar y leer del LocalStorage

Nota de actualización

Borrar y actualizar marcadores

Lista de propiedades - Diseño y estructura de la data

Componente MiniMapa

Código fuente de la sección

Gráficas en Angular

Introducción a la sección

Temas puntuales de la sección

Demostración del objetivo final de la sección

Inicio de proyecto - GraficasApp

Estructura del proyecto

Rutas y LazyLoad

Menú de la aplicación

Gráfica de barra

Personalizando la gráfica

Componente personalizado para mostrar gráficos

Añadir flexibilidad a nuestro componente personalizado

Gráfica de Dona

Gráfica de Dona mediante petición Http

Mostrar la información en la gráfica

Cambiar la información mediante RXJS

Código fuente de la sección

Directivas personalizadas de Angular

Introducción a la sección

Temas puntuales de la sección

Inicio de proyecto - DirectivasApp

Estructura de la aplicación

Formulario reactivo tradicional

Directiva personalizada - ErrorMsg

Directive Input - Cambiar el color del host

Cambiar el mensaje de la etiqueta

Reaccionar a los cambios en tiempo real

Input setters

Resolución del problema

Mostrar y Ocultar si tiene error el campo

Directivas estructurales personalizadas

Código fuente de la sección

Auth Backend - MEAN

Introducción a la sección

Temas puntuales de la sección

Demostración del objetivo final de la sección

Inicio de proyecto - Auth MEAN

Npm - Nodemon

Instalaciones necesarias para el backend

Configurar servidor de Express

Crear las rutas de nuestra aplicación

Separar el controlador de la ruta

Configurar CORS y body de las peticiones

Variables de entorno de Node

Servir una página HTTP desde Express

Validar campos obligatorios

Tarea: Validar campos

Custom Middleware - ValidarCampos

Configurar base de datos - MongoDB

Conectar MongoDB Atlas - Compass y Node

Crear modelo de base de datos

Crear usuario en base de datos

Hash de la contraseña

Generar JsonWebToken

Login de usuario

Renovar y validar el JWT

Solución a la tarea - Generar JWT

Código fuente de la sección

AuthApp - MEAN

Introducción a la sección

Temas puntuales de la sección

Demostración de la sección

Inicio de proyecto - Auth MEAN

Estructura del proyecto - AuthApp

Rutas y LazyLoad

Diseño de la pantalla de Registro y Login

Pantalla protegida

Login de usuario desde Angular

Almacenar la información del usuario

Mensajes de error visuales

Mantener el usuario activo tras recargar el navegador web

ValidarToken - Guard

Logout

Tarea: Registro de usuarios

Resolución de la tarea

Tarea: Mantener el email del usuario

Resolución de la tarea - Email

Código fuente de la sección

Desplegar backend y frontend a producción

Introducción a la sección

Temas puntuales de la sección

Continuación de proyecto - AuthApp

Desplegar aplicación de Angular en Node

Desplegar aplicación de Node a Heroku

Configurar ambiente de producción

Revisar logs de Heroku

Fin del curso

Documentos complementarios sobre Angular

Más sobre mis cursos

Despedida



Reviews

F
Francisco10 February 2021

Recomendado, un duro Fernando Herrera. Siempre sus cursos son excelentes y aprendes cada cosa que explica ya que lo hace impecable.

R
Rafael9 February 2021

Hasta el momento es un gran curso, una excelente introduccion de Typescript, muy clara la explicacion y los ejemplos

A
Alonso8 February 2021

Por ahora mejor de lo esperado. Las explicaciones son absolutamente maravillosas, todo claro y conciso.

E
Erick6 February 2021

Es de los mejores sino es que el mejor curso que podras encontrar de Angular, Fernando te lleva de la mano en todas las lecciones complejas que conforman este espectacular y temido framework, la mejor inversion que puedes hacer si quieres aprender Angular.

A
Alejandro29 January 2021

El curso esta muy bien, he aprendido cosas que no sabia de Angular eso que ya tengo 1 año usándolo, el Profesor enseña de una manera muy clara y entretenida además enseña muchos detalles que en otros cursos no.

C
Carlos29 January 2021

Me hubiese gustado que incluya una sección de testing unitario y tests e2e, integración continua, etc. La mayoría de cursos en udemy no toca esos temas super importantes. Espero que los agreguen en algún momento.

N
Nicci29 January 2021

Hay conceptos y secciones que explica de manera excelente, sin embargo otras no están bien explicadas o las pasa bastante por alto, y son esenciales. Pensaba que tendría unas buenas bases, pero sigo necesitando otros recursos.

G
German28 January 2021

Excelente curso, me a gustado lo de las tareas siento que me ayudan a pensar y poner en practica lo que estoy aprendiendo

R
Roberth27 January 2021

Hasta ell momento si ha sido bueno, espero seguir las clases para verificar si lo que se menciona en las primeras clases si se cumple.

J
Jonathan26 January 2021

Hasta este punto muy bien explicado, se realizan videos cortos por secciones lo que facilita la atención.

R
Rodrigo26 January 2021

Sabiendo que el curso lo imparte Fernando Herrera, ya es garantía que en sus explicaciones quedará todo entendido y claro.

M
Mynor25 January 2021

Buenisima eleccion. Actualmente estoy estudiando en la universidad ingenieria en sistemas pero aveces siento que no estamos abarcando el contenido que se deberia. Estos cursos me ayudan a poder profundizar sobre los temas y areas que a mi me interesan como futuro profesional.

J
Jonatán25 January 2021

ya adquirí los cursos previos de Angular de Fernando Herrera y con este está al mismo nivel o más que los cursos anteriores. Un Gran divulgador

D
David23 January 2021

Hasta el momento ha sido un excelente curso, muy puntual, todo es muy claro y tampoco esta sobre saturado de información

M
Marco23 January 2021

va muy bien, adicional que con Fernando Herrera tengo varios cursos y conzoco de su nivel de ensenanza.



Coupons

StatusDateDiscount
Expired1/22/202195% OFF
Expired1/29/202195% OFF
Valid2/8/202194% OFF
Expired2/23/202195% OFF

3662358

Udemy ID

11/26/2020

Course created date

1/22/2021

Course Indexed date
Bot
Course Submitted by

Twitter
Telegram
Android PlayStore
Apple Appstore