Angular: De cero a experto - Fernando Herrera

Angular: De cero a experto
Legacy (v14)

Este es un curso Legacy, ya no se le da mantenimiento porque existe otro que lo sustituye. Puedes encontrar la nueva versión aquí

Adquirir Ahora Vista previa gratis

Contenido del curso

1. Curso Legacy
  PRUEBA GRATIS
2. Introducción
  PRUEBA GRATIS
3. ¿Cómo funciona el curso?
  PRUEBA GRATIS
4. Instalaciones necesarias y recomendadas
  PRUEBA GRATIS
5. Importante: Cursos Legacy
  PRUEBA GRATIS
6. Nota de actualización - Versión de node recomendada
7. Instalar AngularCLI
  PRUEBA GRATIS
8. Nota de actualización - ¡Importante!
9. ¡Únete a Nuestra Comunidad de DevTalles en Discord!
1. Introducción a la sección
2. Temas puntuales de la sección
3. Introducción a Angular
4. Nota de actualización
5. Crear un proyecto de Angular
6. Nota de actualización
7. Explicación de cada archivo del proyecto
8. Explicación de los archivos dentro del SRC
9. App Component
10. Contador App
11. Métodos en el componente
12. Tarea con el contador
13. Crear un componente manualmente
14. Componente de Heroe y separación de directorios
15. Cambios en el template del componente
16. Concepto de one way data binding - enlazado en una sola vía
17. Crear componente de forma automática
18. Directiva *ngFor
19. Directiva *ngIf
20. Ng-Template y el ngIf-else
21. Módulos
22. Módulos - segunda parte
23. Bonus: Hacer respaldo de nuestro proyecto en GitHub
24. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Continuación del proyecto
4. Módulo DBZ (Dragon Ball Z)
5. Diseño de la pantalla a trabajar
6. FormsModule
7. ngModel
8. Mostrar listado de personajes
9. Crear componentes hijos
10. @Input
11. Tarea con inputs y módulos
12. @Outputs y EventEmitter
13. Bonus: Depuración de aplicación
14. Servicios
15. Centralizar el acceso de los personajes en el servicio
16. Métodos en el servicio
17. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Nota de actualización
4. Generar build de producción
5. Desplegando en Netlify
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración del objetivo final de la sección
4. Inicio de proyecto - GifsApp
5. Diseño inicial de nuestra aplicación de Gifs
6. Módulo Shared
7. GifsModule y sus componentes
8. @ViewChild - Obtener referencias a objetos del HTML
9. GifsService
10. Controlar el historial de búsquedas
11. Giphy Api Key - Giphy Developers
12. Realizar una petición HTTP
13. Mostrar los resultados en pantalla
14. Colocando un tipado a las peticiones http
15. LocalStorage
16. Cargar imágenes automáticamente
17. Obtener imágenes desde el sidebar
18. HttpParams
19. Animate.style CSS
20. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración de la sección
4. Inicio de proyecto - PaisesApp
5. Estructura y explicación de la aplicación de países
6. Creando los módulos y los componentes básicos
7. Estructura HTML de nuestra aplicación
8. RouterModule - Rutas en nuestra aplicación
9. RouterLink
10. Componente Sidebar
11. Componente para buscar por país
12. Nota de actualización:
13. Servicio para buscar países
14. Manejo de errores
15. Tipado de la petición de RestCountries
16. Llenar la tabla de países
17. Componente Input y Tabla
18. Funcionalidades del componente PaisInputComponent
19. DebounceTime - en el input
20. Por Capital
21. Ver país de forma independiente
22. RxJs - SwitchMap
23. Terminar la pantalla de ver país
24. Fin de la pantalla de ver país
25. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Continuación del proyecto - PaísesApp
4. ngClass, class y [class.]
5. Clases de CSS condicionales
6. Mostrar países por región
7. Nota de actualización
8. Optimizar las peticiones HTTP
9. Animaciones de CSS
10. Mostrar sugerencias al escribir - autocomplete
11. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración del objetivo de la sección
4. Inicio de proyecto - PipesApp
5. Introducción a los Pipes de Angular
6. Instalar PrimeNg
7. Prime Button y estilo global
8. Cards y botones con íconos
9. PrimeNg module
10. PrimeNg - MenuBar
11. Rutas de nuestra aplicación
12. Cambiar las rutas utilizando el MenuBar
13. Nota de actualización - PrimeFlex
14. PrimeFlex
15. UpperCase, LowerCase y TitleCase Pipes
16. Date Pipe
17. Cambiar el idioma por defecto
18. Timezone y otros idiomas
19. DecimalPipe
20. CurrencyPipe y PercentPipe
21. PrimeNg - Fieldset
22. I18nSelectPipe
23. I18nPluralPipe
24. Tarea sobre i18nPipes y Primeng
25. SlicePipe
26. KeyValuePipe
27. JsonPipe
28. AsyncPipe
29. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Continuación de proyecto - PipesApp
4. Pipe personalizado - mayusculasPipe
5. Valor y argumentos a los pipes personalizados
6. PrimeTable y PrimeToolbar
7. Llenar un PrimeTable con data
8. Tarea pipe personalizado - VuelaPipe
9. Ordenar héroes por nombre - OrdenarPipe
10. Parametrizar nuestro pipe personalizado
11. Primeng - Sortable Table
12. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración del objetivo final de la sección
4. Inicio de proyecto - HeroesApp
5. Módulos y componentes iniciales
6. Rutas principales - Root
7. Rutas hijas y LazyLoad - AuthRoutes
8. Tarea - Rutas Hijas de Héroes
9. Resolución de la tarea - Rujas Hijas de Héroes
10. Mostrar Rutas Hijas - Segundo RouterOutlet
11. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración del objetivo final de la sección
4. Continuación del proyecto - HeroesApp
5. Material Sidenav, Toolbar e iconos
6. Material Navlist
7. Heroes Backend - json-server
8. Heroes Service - Traer información de los héroes
9. Interfaz Héroe
10. Material Card - Flex Layout
11. Flex Layout - Diferentes resoluciones
12. Tarea - HeroeTarjetaComponent
13. Tarea - PipeImagen
14. Tarea - Ruta Héroe y Editar Héroe
15. Pantalla de Héroe
16. Diseño de la pantalla de Héroe
17. Variables de entorno
18. Material Autocomplete
19. Autocomplete - Segunda Parte
20. Tarea - Autocomplete cuando no encontró nada
21. Resumen de la sección
22. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración del objetivo final de la sección
4. Continuación del proyecto - HeroesApp
5. Diseño de la pantalla para agregar héroes
6. Insertar en base de datos
7. Editar héroes
8. Excepciones en nuestro ImagenPipe
9. Eliminar registros
10. Pipes Puros e Impuros
11. Material Snackbar
12. Material Dialog
13. Información desde y hacia el dialogo
14. Adecuar los textos de la pantalla de agregar
15. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Continuación de proyecto - HeroesApp
4. Pantalla de Login Básico
5. AuthService - Servicio para mantener el estado de la autenticación
6. Mostrar la información del usuario activo
7. Angular Guards - CanLoad
8. CanActivate
9. Mantener la sesión del usuario
10. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Inicio de la sección - Formularios
4. Creación de módulos necesarios
5. Componentes y LazyLoad de formularios
6. SideMenu
7. Template: Diseño del formulario básico
8. Template: FormsModule
9. Template: Mostrar mensajes de error
10. ViewChild
11. Template: Validar número igual mayor a 0
12. Directivas personalizadas - CustomMin - Opcional
13. Template: Limpiar el formulario
14. Template: Formularios dinámicos y arreglos
15. Agregar elementos de forma dinámica
16. Eliminar elemento creado de forma dinámica
17. Agregar juegos favoritos
18. Template: Radio, Check y Switches
19. Template: Validando Radios, Checks y Switches
20. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Continuación de proyecto - Formularios
4. Primeros pasos en formularios reactivos
5. FormBuilder
6. Validaciones básicas - Forms Validator
7. Mostrar mensajes de error
8. Submit del formulario
9. Tarea: Validar un nuevo campo
10. FormArray
11. Agregar controles al FormArray
12. Eliminar elementos de un FormArray
13. Formularios Reactivos: Switches
14. Actualizar el valor de la persona
15. Documentación de formularios reactivos en Angular
16. Código fuente de la sección
1. Inicio de sección
2. Temas puntuales de la sección
3. Continuación de proyecto
4. Resolución de la tarea - Ruta y LazyLoad
5. Diseño de la pantalla de registro
6. Validar contra una expresión regular
7. Evaluar un email
8. Validaciones personalizadas
9. Separar la lógica de validaciones del componente
10. Validar contraseñas iguales
11. Preparaciones para Validaciones Asíncronas
12. Validaciones asíncronas
13. Estado del formulario
14. Errores personalizados
15. Mensaje de error personalizado
16. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración del objetivo de la sección
  PRUEBA GRATIS
4. Inicio de proyecto - Selectores
5. Estructura de directorios para esta aplicación
6. Formulario reactivo - primer selector
7. Selector de regiones
8. Segundo selector anidado
9. Limpiar país cuando el primer selector cambia
10. Tercer selector anidado - Fronteras
11. Llenar tercer selector - Fronteras
12. Mejorar la experiencia de usuario
13. Cambiar códigos de fronteras por los nombres de los países
14. Código fuente de la sección
1. Introducción a la sección
2. Temas de la sección
3. Inicio de proyecto - LifeCycle
4. Implementar todos los hooks del ciclo de vida
5. Explicación sobre los ciclos de vida
6. ngOnChanges
7. ngOnDestroy
8. Más información sobre el ciclo de vida
9. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración del objetivo final de la sección
4. Inicio de sección - MapasApp
5. Creando los componentes necesarios y rutas
6. Menú de la aplicación
7. Mostrar un mapa en pantalla completa
8. Punto central, zoom y accessToken de forma global
9. Página Zoom-Range - Diseño y tarea
10. Controlar el objeto del mapa - ZoomIn y ZoomOut
11. Controlar el nivel del Zoom
12. Crear EventListeners del mapa
13. Restringir el Zoom y uso del Range
14. Obtener las coordenadas centrales del mapa
15. Marcadores en el mapa
16. Añadir marcadores de forma dinámica
17. Mantener el arreglo de marcadores y colores
18. FlyTo
19. Guardar y leer del LocalStorage
20. Nota de actualización
21. Borrar y actualizar marcadores
22. Lista de propiedades - Diseño y estructura de la data
23. Componente MiniMapa
24. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración del objetivo final de la sección
4. Inicio de proyecto - GraficasApp
5. Estructura del proyecto
6. Rutas y LazyLoad
7. Menú de la aplicación
8. Gráfica de barra
9. Personalizando la gráfica
10. Componente personalizado para mostrar gráficos
11. Añadir flexibilidad a nuestro componente personalizado
12. Gráfica de Dona
13. Gráfica de Dona mediante petición Http
14. Mostrar la información en la gráfica
15. Cambiar la información mediante RXJS
16. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Inicio de proyecto - DirectivasApp
4. Estructura de la aplicación
5. Formulario reactivo tradicional
6. Directiva personalizada - ErrorMsg
7. Directive Input - Cambiar el color del host
8. Cambiar el mensaje de la etiqueta
9. Reaccionar a los cambios en tiempo real
10. Input setters
11. Resolución del problema
12. Mostrar y Ocultar si tiene error el campo
13. Directivas estructurales personalizadas
14. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración del objetivo final de la sección
4. Inicio de proyecto - Auth MEAN
5. Npm - Nodemon
6. Instalaciones necesarias para el backend
7. Configurar servidor de Express
8. Crear las rutas de nuestra aplicación
9. Separar el controlador de la ruta
10. Configurar CORS y body de las peticiones
11. Variables de entorno de Node
12. Servir una página HTTP desde Express
13. Validar campos obligatorios
14. Tarea: Validar campos
15. Custom Middleware - ValidarCampos
16. Configurar base de datos - MongoDB
17. Conectar MongoDB Atlas - Compass y Node
18. Crear modelo de base de datos
19. Crear usuario en base de datos
20. Hash de la contraseña
21. Generar JsonWebToken
22. Login de usuario
23. Renovar y validar el JWT
24. Solución a la tarea - Generar JWT
25. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración de la sección
4. Inicio de proyecto - Auth MEAN
5. Estructura del proyecto - AuthApp
6. Rutas y LazyLoad
7. Diseño de la pantalla de Registro y Login
8. Pantalla protegida
9. Login de usuario desde Angular
10. Almacenar la información del usuario
11. Mensajes de error visuales
12. Mantener el usuario activo tras recargar el navegador web
13. ValidarToken - Guard
14. Logout
15. Tarea: Registro de usuarios
16. Resolución de la tarea
17. Tarea: Mantener el email del usuario
18. Resolución de la tarea - Email
19. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Continuación de proyecto - AuthApp
4. Desplegar aplicación de Angular en Node
5. Desplegar aplicación de Node a Heroku
6. Configurar ambiente de producción
7. Revisar logs de Heroku
1. Temas puntuales de la sección
2. Demostración del objetivo final
3. Inicio de proyecto - MapasApp
4. Configuraciones iniciales del proyecto
5. Obtener la geolocalización del usuario
6. Mostrar un mensaje de carga
7. Mostrar un mapa de Mapbox
8. Marcadores y Popups
9. Boton flotante y Logo de Angular
10. Servicio para controlar el mapa
11. Diseño de componentes de búsqueda y detalles
12. Debounce Manual
13. Realizar petición HTTP para obtener lugares
14. Custom Http Client - PlacesApiClient
15. Mostrar los resultados de la búsqueda
16. Agregar marcadores en los lugares encontrados
17. Ajustar el mapa para mostrar todos los marcadores encontrados
18. Obtener la ruta entre dos puntos
19. Obtener la distancia y duración del recorrido
20. Dibujar la polyline
21. Ocultar el menu de lugares
22. Desplegar la aplicación de mapas
23. Código fuente de la sección
1. Documentos complementarios sobre Angular
2. Más sobre mis cursos
3. Más información sobre nuestros otros cursos
4. Despedida

Acerca de este curso

441 lecciones
44 horas de contenido en video
USD 50.00
Fernando Herrera

Cursos que podrían interesarte

+DevTalles

Este segmento es exclusivo para sesiones en vivo con Fernando Herrera. Durante estas podrás realizar preguntas relacionadas al contenido de sus cursos y participar de forma interactiva con los panelistas. Se incluyen grabaciones de sesiones pasadas.

Pago único

Adquiere el curso con un único pago de forma vitalicia, con acceso a la comunidad y posibles actualizaciones futuras.

$50.00

Promociones y descuentos pueden aplicar.

Comprar ahora

Suscripción
Devtalles PRO Mensual

^USD16

Suscribirme ahora

Acceso ilimitado a toda la plataforma, cursos, clases en vivo, acceso anticipado a cursos durante el mes de vigencia.

Suscripción
DevTalles PRO Trimestral

^USD48

Suscribirme ahora

Acceso ilimitado a toda la plataforma, cursos, clases en vivo, acceso anticipado a cursos durante 3 meses de vigencia.

Suscripción
DevTalles PRO Semestral

^USD96

Suscribirme ahora

Acceso ilimitado a toda la plataforma, cursos, clases en vivo, acceso anticipado a cursos durante los 6 meses de vigencia.

Suscripción
DevTalles PRO Anual

^USD176

El mejor precio disponible

Suscribirme ahora

Adquiere 1 año entero de suscripción al precio de 11 meses. Obtienes acceso ilimitado a toda la plataforma, comunidades, cursos, clases en vivo, acceso anticipado a una comunidad exclusiva y cursos en construcción.

¡Explora nuestra comunidad!

Conversa y debate con otros estudiantes sobre los cursos. Únete a nuestra comunidad en Discord. O accede a nuestra comunidad de cursos con Acceso Anticipado desde tu portal de estudiante con tu suscripción DevTalles PRO.

Comunidad Discord Portal de estudiante

Sección 1: Introducción al curso

Sección 2: Conceptos generales para empezar con Angular y TypeScript

Sección 3: Base de TypeScript - Sección recomendada

Sección 4: Introducción a Angular

Sección 5: Expandiendo nuestras bases

Sección 6: Despliegues rápidos a producción

Sección 7: GifsApp - Aplicación para buscar imágenes

Sección 8: SPA - PaisesApp

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

Sección 10: Pipes de Angular

Sección 11: Pipes personalizados

Sección 12: HeroesApp - Rutas hijas y Lazyload

Sección 13: HeroesApp - Angular Material & Angular Flex-Layout

Sección 14: HeroesApp - CRUD (Continuación con Angular Material)

Sección 15: Protección de Rutas

Sección 16: Formularios - Template y Lazyload

Sección 17: Formularios Reactivos

Sección 18: Formularios: Validaciones manuales y asíncronas

Sección 19: Formularios Reactivos - Multiples selectores anidados

Sección 20: LifeCycle Hooks

Sección 21: Mapas en Angular

Sección 22: Gráficas en Angular

Sección 23: Directivas personalizadas de Angular

Sección 24: Auth Backend - MEAN

Sección 25: AuthApp - MEAN

Sección 26: Desplegar backend y frontend a producción

Sección 27: Bonus: Mapas - Marcadores y Direcciones con Mapbox

Sección 28: Fin del curso

Acerca de este curso

+DevTalles

TypeScript: Tu completa guía y manual de mano.

JavaScript Moderno: Guía para dominar el lenguaje

ReactiveX - RxJs: De cero hasta los detalles

$50.00

Suscripción Devtalles PRO Mensual

Suscripción DevTalles PRO Trimestral

Suscripción DevTalles PRO Semestral

Suscripción DevTalles PRO Anual

Suscripción
Devtalles PRO Mensual

Suscripción
DevTalles PRO Trimestral

Suscripción
DevTalles PRO Semestral

Suscripción
DevTalles PRO Anual