
Escoge el navegador que quieras usar.
Aprende a como abrir una terminal desde Windows
Instalamos NodeJS para utilizarlo durante el curso
Escoge el navegador que quieras usar.
Aprendemos a como abrir una termina en Mac
Instalamos Visual Studio Code para utilizarlo durante el curso
Instalamos NodeJS para utilizarlo durante el curso
Instalamos @angular-cli, un conjunto de herramientas de texto para crear, compilar o arrancar nuestros proyectos.
Resultado final de nuestra primera aplicación.
Creación de nuestro primer proyecto. Explicamos la estructura del mismo.
Vemos como podemos arrancar una aplicación angular para ver nuestra aplicación en acción.
Explicamos como instalar bootstrap e incluirlo en nuestro proyecto.
Creación de nuestro primer componente. Explicamos las partes del mismo.
Creación de nuestro contenedor base usando bootstrap.
Creación de la interface IQuestion para representar nuestras preguntas.
Asignamos propiedades a nuestro componente que utilizaremos después.
Mostramos la pregunta de hemos creado en el componente.
Mostramos nuestras respuestas utilizando @for
Adaptaremos el tamaño de nuestros botones utilizando ngClass de Angular
Comprobamos si la respuesta es correcta utilizando el evento click de nuestros botones
Explicación de como depurar usando el navegador
Explicación de como depurar usando Visual Studio Code
Mostraremos al usuario si la respuesta elegida es correcta o no con un alert. Utilizaremos @if
Descarga de la aplicación con comentarios.
Explicamos como compilar nuestro proyecto angular
Instalamos la dependencia http-server para probar nuestro proyecto compilado.
Probamos como probar nuestro proyecto utilizando http-server
Resultado de la 2º aplicación del curso.
Creamos nuestro proyecto. Instalamos bootstrap.
Instalamos bootstrap icons que utilizaremos para mostrar iconos en nuestra aplicación
Creación de los componentes que usaremos en nuestra aplicación.
Creamos el contenedor base usando bootstrap.
Creación de la interface ITask que representa una tarea.
Creamos la base del componente donde mostraremos las tareas.
Agregamos un tarea usando un input
Validamos que una tarea no este vacio o no tenga espacios vacios.
Explicamos como funcionan los Inputs de Angular.
Mostramos los tasks que tenemos almacenados.
Usando DatePipe, mostramos la fecha formateada
Mostramos las acciones disponibles para nuestras tareas.
Explicamos el concepto de BEM y para que sirve.
Cuando nuestro texto sea muy largo, lo truncaremos usando una clase de bootstrap
Explicamos como crear y utilizar Outputs de Angular.
Implementamos la funcionalidad al completar una tarea.
Implementamos la funcionalidad al eliminar una tarea.
Vemos como cambiar los estilos entre tareas pendientes y completadas usando ngClass
Colocamos el botón para mostrar/ocultar las tareas completadas.
Descarga de la aplicación con comentarios.
¡Bienvenidos a mi curso de Angular! 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:
- Nivel básico:
1. Pregunta y respuestas: primera aplicación para empezar con lo más básico de angular.
¿Qué aprenderás?
- Creación y estructura de un proyecto
- Instalación de bootstrap
- Creación de modelos
- Control flow: @if y @for
- Eventos nativos (click)
2. Lista de tareas: creamos nuestras propias tareas y podremos visualizar aquellas que estén completas y las que no.
¿Qué aprenderás?
- Inputs
- Outputs
- Comunicación entre componentes
- Pipe DatePipe
3. Formulario de contactos: añadiremos nuestros contactos a través de un formulario y los visualizaremos en pantalla.
¿Que aprenderás?
- Enrutamiento de una aplicación
- Creación y manejo de formularios
- Uso de servicios para compartir datos entre componentes
- Pipe TitleCasePipe
4. Cocktail app: usando la API de cocktaildb, realizaremos filtros para buscar nuestros cocktails preferidos.
¿Qué aprenderás?
- Uso de servicios para llamar APIs
- Paginación simple
- Obtener parámetros de una URL
- Control flow: @switch
- Nivel intermedio:
5. Viajes soñados: Cargaremos una lista de países en una lista que podremos arrastrar y mover a otra lista usando drag and drop.
¿Qué aprenderás?
- AsyncPipe
- Google Maps
- Drag and Drop
- @defer
6. 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.
¿Que aprenderás?
- Login basico
- Uso de json-server
- Fullcalendar
- Subjects
- Formularios reactivos
7. Burguer Queen: Imitamos los paneles de pedido rápido de las cadenas de comida rápida. Incluye backend.
¿Que aprenderás?
- Uso de docker para nuestro backend
- Stripe para pagos
- Angular Material
- Signals
- Nivel avanzado:
8. Blog dinámico: Hacemos un blog en Angular para visualizar posts. Incluye backend.
¿Qué aprenderás?
- Lazy Load
- Resolvers
- Directivas
- SEO
9. Dashboard: Parte trasera de la aplicación de blog dinámico, nos permitirá gestionar posts y categorías. Incluye backend.
¿Que aprenderás?
- Login con token y cookies
- Refresco de token
- Interceptors
- Componentes reutilizables
- ng-select
10. Controla gastos: Aplicación para controlar nuestros gastos e ingresos de nuestro dia a dia. Usamos Firebase como si fuera un backend.
¿Que aprenderás?
- Integracion de Firebase
- Autenticacion con Firebase
- CRUD+ Paginacion con Firebase
- Animaciones
- Gráficas
¡Nos vemos en el curso!