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

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