Acerca de este curso

Hay que perderle el miedo a las diferentes versiones de una herramienta tecnológica y centrarnos en aprender bien la base de cómo funcionan cada uno de los engranajes que lo conforman. En este curso fomentamos el aprendizaje en profundidad de todos los aspectos y librerías que conforman el universio Angular.

Angular es un framework para el desarrollo de aplicaciones multiplataforma que nos permite, de una manera sencilla, crear soluciones de software personalizadas bajo el patrón SPA (single page application). Mantenido por un equipo relacionado con Google, el framework es uno de los más importantes del mercado a la hora de crear este tipo de aplicaciones.

En relación al resto de librerías disponibles en el mercado que trabajan con Javascript como base, Angular quizá es la más complicada de aprender. Sin embargo, si aprendemos las bases de manera sólida, el aprendizaje del resto de herramientas es mucho más sencillo ya que comparten los mismos conceptos.

Te invito a descubrir conmigo todos los secretos de Angular de manera práctica a través de la recopilación de todos mis conocimientos durante estos años.


     
  • Lo que aprenderás

    Los conceptos básicos sobre uno de los frameworks más importantes para el desarrollo web actual. El alumno aparte, será independiente de la versión en la que se encuentre Angular, adquiriendo una buena base de la herramienta.

  • Requisitos básicos

    Se deben tener conocimientos mínimos de maquetación con HTML y CSS. Es recomendable tener conocimientos básicos en algún lenguaje de programación, si puede ser Javascript, mejor.

  • A quién está dirigido

    Desarrolladores web que quieren aprender un nuevo framework con una base muy potente y que les permitirá abrirse camino facilmente al resto. Maquetadores web que quieran dar el salto al mundo del desarrollo de aplicaciones. Desarrolladores Front en busca de conocer uno de los frameworks más demandados del mercado.

Temario del curso

Más de 17 horas de vídeos

  • 1

    Introducción al curso

  • 3

    Introducción a Angular

    • El stack MEAN

    • ¿Qué es Angular?. Características principales

    • Angular CLI

    • Arquitectura de aplicación Angular

    • Mi primera aplicación Angular

  • 4

    Creación y uso de componentes

    • ¿Qué es un componente?

    • Creación de un componente simple. Selector

    • Diseñando nuestros componentes: template y templateUrl

    • Definiendo estilos: styles y styleUrls

    • Cómo definir una jerarquía de componentes

    • Interpolación (variables)

    • Interpolación (métodos)

    • Property Binding

    • Event Binding (evento simple)

    • Planteamiento: Componente Sumar

    • Solución: Componente Sumar

    • Planteamiento: Componente Cronómetro

    • Solución: Componente Cronómetro

    • Event Binding ($event)

    • Event Binding (mouseenter y mouseout)

    • Event Binding (input, focus y blur)

    • Planteamiento: Componente Calculadora

    • Solución: Componente Calculadora

    • Decorador @Input

    • Decorador @Input (property binding)

    • Planteamiento: Modificación Componente Sumar

    • Solución: Modificación Componente Sumar

    • Decorador @Output

    • Planteamiento: Modificación Componente Cronómetro

    • Solución: Modificación Componente Cronómetro

    • Two Way Binding

    • Two Way Binding (objetos)

    • Planteamiento: To-do Simple

    • Solución: To-do Simple

    • Ciclo de vida de un componente

    • Ciclo de vida de un componente (ngOnChanges)

  • 5

    Directivas

    • ¿Qué es una directiva?

    • ngStyle

    • ngStyle (ejemplo con ngModel)

    • ngStyle (change, input)

    • ngClass

    • ngClass (a través de un objeto)

    • ngIf

    • ngIf (then, else)

    • ngFor

    • ngFor (mejorando el diseño)

    • ngSwitch

    • Planteamiento: To-do Complejo

    • Solución: To-do Complejo

    • Planteamiento: Caja Registradora

    • Solución: Caja Registradora

    • Directivas Personalizadas

    • Directivas Personalizadas - Renderer

    • Directivas Personalizadas - @HostListener

    • Directivas personalizadas - @HostBinding

    • Directivas personalizadas - @Input

    • Planteamiento: Lista de la compra

    • Solución: Lista de la compra

  • 6

    Angular Routing

    • ¿Qué es el routing de Angular?

    • Creación de una aplicación con Routing

    • Definición básica de rutas

    • Ruta raíz y ruta **

    • routerLink y routerLinkActive

    • Router.navigate

    • Rutas dinámicas

    • Children routes

    • Router Guards

  • 7

    Angular Services

    • ¿Qué es un servicio?

    • Creación de un servicio

    • Providers - Singleton

    • Servicio con Promesa

    • Planteamiento: Listado de Escritores

    • Solución: Listado de Escritores

    • Planteamiento: Listado de Libros

    • Solución: Listado de Libros

  • 8

    Gestión de Formularios

    • Formularios en Angular

    • Preparación del proyecto

    • Instalación de Bootstrap

    • Template Driven

    • Model Driven - Creación del formulario

    • Model Driven - Validaciones simples

    • Model Driven - Validaciones simples II

    • Model Driven - Propiedades de controles

    • Model Driven - Validaciones personalizadas (edad)

    • Model Driven - Validaciones personalizadas (dni)

    • Model Driven - Mostrar errores html

    • Model Driven - Mostrar errores html II

    • Model Driven - valueChanges

    • Planteamiento: Gestión de Empleados

    • Solución: Gestión de Empleados

  • 9

    Conexiones HTTP

    • Conexión HTTP

    • Petición de tipo GET

    • Petición de tipo GET (getById)

    • Petición de tipo POST

    • Petición de tipo POST (desde formulario)

    • Petición PUT y DELETE

    • Cabeceras en la petición

    • Planteamiento: Países de Europa

    • Solución: Países de Europa

    • Planteamiento: Rick y Morty

    • Solución: Rick y Morty

  • 10

    Angular Pipes

    • register Locale

    • CurrencyPipe

    • DecimalPipe

    • DatePipe

    • PercentPipe

    • JsonPipe

    • LowerCasePipe, UpperCasePipe y TitleCasePipe

    • SlicePipe

    • AsyncPipe

    • Custom Pipe (Invertir string)

    • Custom Pipe (Capitalize)

    • Custom Pipe (NumToArray)

  • 11

    Animaciones

    • Creación de animaciones

    • Animaciones Keyfra

  • 12

    Uso de mapas

    • Obtención de API Key

    • Configuración inicial del mapa

    • Recuperar la posición del usuario

    • Creación de marcadores

    • Eventos sobre el mapa

    • Eventos sobre los marcadores

    • Autocomplete

    • Dirección entre dos puntos

    • Angular Google Maps

Acceso al curso

Disfruta de todos los vídeos del curso a un precio reducido.

Conoce al formador

Senior Web & Mobile developer

Mario Girón Martín

Desarrollador Web y móvil con más de 10 años de experiencia en el mundo de la creación de software. Experto formador con más de una treintena de cursos impartidos sobre nuevas tecnologías.