Curso Angular de Udemy

Este archivo contiene enlaces a los repositorios generados para los proyectos de este curso de Udemy, ya que están almacenados en una organización que no es visible desde mi perfil público.

Hola Mundo

• ¿Qué son los componentes?
• ¿Qué son las directivas estructurales?
• Uso de plunker para nuestra primera interacción con Angular.
• Trabajando de forma local un proyecto en Angular.
• Introducción sobre todos los archivos usados en el QuickStart de Angular.
• Uso de Bootstrap 4 para nuestros estilos.
• Crear archivos .HTML para que se encarguen de la estructura visual de nuestros componentes.
• Crear una aplicación con 3 componentes re-utilizables.
• *ngFor y el *ngIf

https://github.com/curso-angular-udemy/pr1-hola-mundo

Aplicación de una sola página (SPA)

• Crear una aplicación de una sola página (Single Page Application)
• Creación de proyectos de Angular usando el CLI (Command Line Interface)
• Instalar bootstrap o librerías de terceros usando el Angular-CLI
• Creación de rutas de nuestra aplicación
• Uso de RouterLink y RouterLinkActive para movernos de página y colocar clases a los elementos activos.
• Uso del modulo Router, que nos permite movernos de página mediante código.
• Obtención de parámetros vía URL.
• Configuración de nuestro primer servicio en Angular para el manejo de la data.
• Breve introducción a los Pipes
• Uso del buscador del navbar para realizar una consulta a nuestro arreglo de héroes.

https://github.com/curso-angular-udemy/pr2-heroes-app

Pipes

• Pipes uppercase y lowercase
• Pipe Slice
• Pice Decimal
• Pipe Percent
• Pipe Currency
• Pipe Json
• Pipe Async
• Pipe Date
• Pipes personalizados
  • Capitalizar palabras y nombres
  • Creación de un pipe, que permite cargar recursos externos de forma segura.

https://github.com/curso-angular-udemy/pipes

SpotyApp

• Refuerzo de rutas y parámetros de rutas.
• Uso de carruseles del Bootstrap 4
• Uso del HTTP para obtener información
• Uso de la API de Spotify para obtener información de:
  • Artistas
  • Albumes
  • Audio
• Trabajo sobre el manejo de data asíncrona.
• ngModel para enlazar campos de texto a variables del componente.
• Widgets de Spotify
• HTML5 audio
• Observables
• Maps

https://github.com/curso-angular-udemy/spotyapp https://github.com/curso-angular-udemy/spotify-get-token

Lista de deseos - IONIC App

• Uso del local storage guardar localmente información para nuestras aplicaciones.
• Introducción a ionic.
• Uso del framework de ionic.
• Uso de servicios que afectan el local storage.
• Uso de ionic DevApp para desplegar nuestra aplicación
• Control de estilos usando Angular.
• Manejo de la información a través de servicios ( update, delete, insert y select ) al local storage.
• Uso de pipes impuros para realizar filtros.

https://github.com/curso-angular-udemy/pr4-deseos

Componentes, directivas de atributos, ciclo de vida...

• Cambios en el estilo de algún elemento HTML utilizando variables en los componentes.
• Comprender y aplicar CSS en un determinado scope, sin afectar los demás componentes.
• Adicionar y remover clases según variables o cualquier tipo de condición.
• Crearemos directivas personalizadas.
• Uso del ngSwitch.
• Crearemos una pequeña aplicación para el uso de rutas y rutas hijas.
• Comprenderemos el ciclo de vida de un componente o directiva.

https://github.com/curso-angular-udemy/miscelanea

Aplicación de autenticación con Auth0

• ¿Qué es Auth0 y la documentación basada en Angular 2?
• Autenticación con Facebook, Twitter, Google, entre otros...
• Creación de un formulario de captura para la creación de usuarios.
• Personalización de la caja de login.
• Uso de servicios para bloquear rutas que no son válidas si el usuario no esta autenticado.
• Obtener la información del perfil del usuario ingresado.

https://github.com/curso-angular-udemy/authApp

Aplicación de autenticación tradicional

• Validar formularios
• Tokens
• LocalStorage
• Borrar tokens
• Caducidad de tokens
• Creación de usuarios
• Posteos
• Firebase REST API

https://github.com/curso-angular-udemy/app-login

Formularios

• Diferentes aproximaciones que tiene angular para trabajar formularios.
• Uso del ngModel.
• Uso de las validaciones prefabricadas.
• Crear validaciones personalizadas.
• Crear validaciones asíncronas.
• Realizar un submit utilizando el ngSubmit.
• Postear información únicamente cuando el formulario es valido,
• Crear formularios del lado del componente.
• Cargar información por defecto a los formularios.
• Subscripción a los cambios de los valores de los formularios.

https://github.com/curso-angular-udemy/formularios

Uso del HTTP - CRUD - Firebase

• Uso del modulo HTTP.
• Uso los servicios restful de Firebase
• POST.
• GET.
• DELETE.
• PUT.
• Configuraciones en la consola de Firebase.

https://github.com/curso-angular-udemy/heroesApp

Aplicación de chat - angularFire2

• Uso de AngularFire2 - Librería oficial de angular para conectarse a Firebase.
• Crear observables para escuchar mediante sockets los cambios en Firebase.
• Uso de la autenticación de Google y Twitter para nuestro chat.
• Uso de AngularFire2 para manejar las inserciones.
• Uso de promesas para poder ejecutar funciones cuando detectamos cambios en la base de datos.
• Uso el local storage para almacenar información del login para mantener las sesión.

https://github.com/curso-angular-udemy/firechat

Aplicación películas

• JSONP, para obtener información que proviene de otros dominios.
• Posibles errores por la versión 2.4.6 y 2.4.7 del HTTP Router.
• Actualización de un paquete en especifico del proyecto.
• Enviar información de un componente a otro para resumir el código HTML.

https://github.com/curso-angular-udemy/peliculas-app

Aplicación Google Maps

• Uso de Google Maps en un proyecto con Angular
• Creación del API KEY de Google Maps
• Uso de Reactive Forms - FormBuilder
• Creación de marcadores en el mapa
• Eventos y diversas interacciones con los mapas
• Edición de marcadores
• Uso de Angular Material en el proyecto
  • Dialogs
  • Snacks
  • Inputs
  • Toolbars
  • Themes

https://github.com/curso-angular-udemy/mapas

Aplicación canal de YouTube

• Creación de una API KEY para accesar los servicios de YouTube API v3a
• Uso de la documentación de YouTube para obtener información de un canal
• Obtener una lista de reproducción
• Crear una página en la cual pueda cargar los videos de forma paginada
• Usar el Token de respuesta de la api de YouTube

https://github.com/curso-angular-udemy/canal-youtube

Aplicación de fotos - File upload hacia Firebase

• Uso de directivas
• Detalles del Hostlistener
• Input y Outputs
• Storage de Firebase
• uploadTask de Firebase
• Evento drop, dragenter, dragleave, dragover
• Uso de tipo de dato File

https://github.com/curso-angular-udemy/fotos-firebase

Gráficas dinámicas en Angular con chart.js

• Instalaciones necesarias
• Configuraciones
• Gráfico de Barras
• Gráfico de Líneas
• Gráfico de Donut
• Gráfico de Radar
• Gráfico de Pastel
• Gráfico Polar
• Gráfico de Burbujas

https://github.com/curso-angular-udemy/graficas

Actualización Angular 7

• Drag and Drop de Angular
• Virtual Scroll

https://github.com/curso-angular-udemy/virtualDrop-Drag-Drop