
Una introducción al framework, sus orígenes, y por qué el cambio tan radical.
En esta clase explicamos cómo funcionará el curso y dónde encontrar información útil
A continuación veremos las herramientas que debemos de instalar para poder seguir al pie de la letra el curso.
Todo el recurso aquí utilizado es gratuito o de uso libre.
En caso de que sea necesario, debido a alguna actualización del curso, ire colocándolas aquí
Un resumen de lo que aprenderemos
Primeros pasos en TypeScript
Un código ilustrativo de las bondades del TypeScript
Inicializando el proyecto de TypeScript
Declaraciones de variables y constantes del ES6 disponibles en TypeScript
Una breve introducción al manejo de las variables en TypeScript
Aquí veremos una forma de evitar que TypeScript compile todo
Nuevas formas de crear variables de tipo texto (strings)
Explicación de los 3 tipos de parámetros de las funciones en TypeScript y ES6
Nueva forma de crear funciones que no modifican el objeto THIS y poseen otras bondades.
Formas de asignar variables y obtener información de objetos más rápidamente y con menos código.
Una forma de controlar tareas asíncronas.
Aquí realizaremos un trabajo con promesas para comprender más sobre su funcionamiento y tipado
Contratos que nuestro compilador entenderá y nos obligará a respetar
Por si acaso no sabes el concepto de las clases.
Introducción a las clases de TypeScript
Es lo primero que se ejecuta cuando creamos una nueva instancia de una clase.
Inicio de un proyecto que nos permita realizar importaciones
Característica nueva del TypeScript, que nos permite adicionar funcionalidades a nuestras clases y objetos.
Aquí vamos a colocar el tipado de las funciones
Poniendo en práctica lo aprendido en la sección
Explicación de la tarea #1
Esta es una posible solución al ejercicio
Aquí les dejo el código fuente de la sección por si lo llegan a necesitar
Un breve resumen del contenido de esta sección
Este es el objetivo final de esta sección
Primer paso en Angular 2, comprender los componentes, servicios y directivas estructurales.
Utilizando Plunker
Una pequeña actualización
Iniciando nuestro Hola Mundo
Para el conocimiento nuestro, aquí una breve descripción de los archivos.
Una pequeña acción para que nuestras aplicaciones se vean mucho mejor.
Para tener orden entre la parte HTML y el componente
Creando un footer para nuestra página
Vamos a trabajar un poco en el estilo del body
La primera directiva estructural para la repetición de elementos.
Código fuente de la sección adjunta aquí
Un breve resumen del contenido de esta sección
Este es el objetivo final de esta sección
Angular CLI - Command Line Interface.
Crearemos la estructura del proyecto utilizando el Angular CLI
Aquí aprenderemos a instalar el bootstrap cuando usamos el Angular-CLI
En esta clase, le daremos forma a nuestra aplicación.
Este será el corazón de nuestra aplicación de una sola página.
Manejando el estilo de los links y terminaremos la ruta de la aplicación.
Este es el componente encargado de mostrar toda la información de nuestros héroes.
Los servicios los utilizaremos a lo largo de nuestras aplicaciones, y comúnmente contienen los orígenes de datos.
Crearemos nuestro primer servicio para traer información sobre los héroes de nuestra aplicación.
Trabajaremos el diseño de nuestra página de héroes para que se vea elegante utilizando las tarjetas del bootstrap 4 y el *ngFor
Aquí aprenderemos dos formas de movernos a otras páginas y la forma de utilizar parámetros.
Su trabajo será terminar la pantalla del héroe
Esto es una posible solución a nuestra tarea.
De esta forma transformamos únicamente de forma visual, la data que queremos mostrar en pantalla.
Realizando el mecanismo de búsqueda de héroes.
Esta es la tarea más retadora que tenemos hasta el momento.
Resolución de la tarea y asignación de la búsqueda de héroes.
Mostrando un mensaje cuando no hay resultados en la búsqueda.
Esta es una forma de recibir información de un componente padre a un hijo
Esta funcionalidad es importante cuando necesitamos que el componente hijo emita eventos diciendo que algo sucedió
La búsqueda tiene un pequeño problema con el manejo de indices... pero aquí lo arreglaremos
Aquí les dejo el código fuente de la sección
Introducción a la sección
Un resumen de todo lo que aprenderemos en la sección.
Esto es lo que lograremos al terminar la sección.
Los pipes transforman la data de forma visual, sus valores seguirán siendo los mismos.
Un pipe que sirve para cortar elementos, arreglos o strings.
Pipe para controlar la forma en la que se muestran los números.
Un pipe que nos ayudará a mostrar números en su forma de porcentajes.
Un pipe utilizado para darle formato de moneda a nuestros números.
Un pipe muy utilizado cuando queremos saber que tipo de información contiene un objeto.
Un pipe asincrono.
Un Pipe muy poderoso cuando queremos transformar fechas o strings con formato de fecha.
Aquí aprenderemos a registrar otros idiomas en nuestra aplicación
Crearemos un pipe personalizado para poder utilizarlo a lo largo de nuestro programa.
Esta es una forma de utilizar el DomSanitizer, para asegurarnos que nuestro código es HTML es seguro.
Crear el siguiente pipe personalizado.
Aquí resolveremos la tarea de los pipes.
Aquí les dejo el código fuente de la sección
En resumen aprenderemos estos temas en concreto.
Aquí esta el resumen visual de lo que haremos a lo largo de esta sección.
Una pequeña actualización
Iniciando el proyecto de SpotiApp
Las rutas para las navegaciones de nuestra aplicación de música.
Solicitar información de otros sitios web
El API de Spotify se ha actualizado, y ahora requerirá un Token para poder realizar las peticiones.
Realizaremos nuestra primera interacción con el objeto HTTP, para realizar un GET de la información que retorna la API de Spotify.
Aquí utilizaremos el servicio para crear algo interesante en el HomeComponent
Aquí crearemos un componente que nos sirva para buscar artistas por nombre
Aprenderemos un poco sobre el operador map
Aquí aprenderemos a centralizar las peticiones para tener en un único lugar el token y el API de Spotify
Aquí aprenderemos a manejar las imágenes para evitar posibles fallos a nuestro código.
Unificaremos la búsqueda y el home en un único componente
Aquí haremos una retro alimentación al usuario, para indicarle que estamos cargando información y que debe de esperar
Un fuerte repaso de todo lo visto hasta el momento.
De esta forma obtendremos lo mejor del artista.
Utilizaremos un widget prefabricado de Spotify para nuestra aplicación
Aquí aprenderemos a controlar un error de un observable
Este es un Plus, pero pueda que lo quieran implementar
Aquí pueden descargar el código fuente de la sección por si acaso lo necesitan
Este es el objetivo final de nuestra aplicación
Breve introducción a ionic 2
Nota de actualización sobre esta sección
Creando el cascarón de nuestra aplicación.
Aquí les dejo un enlace y el material que necesitaremos para trabajar esta sección
Creando un componente para manejar los pendientes utilizando ionic
Empezando a estructurar nuestra lista de deseos creando el servicio y una par de clases.
Trabajaremos en el diseño de nuestra pantalla y enseñaremos como usar la documentación de ionic
Aquí trabajaremos el primer movimiento entre pantallas y el formulario para agregar items.
Aquí trabajaremos un poco con el estilo de la página para agregar listas
Aquí usaremos un componente de ionic, para agregar una nueva lista
Aquí vamos a trabajar en hacer persistente la información que insertamos en nuestras listas
Creando la funcionalidad de la pantalla de agregar lista.
Aquí vamos a pulir un par de detalles
Aquí borraremos items que ya tengamos en la lista de deseos
Aquí aprenderemos a trabajar con otras listas
Aquí aprenderemos un poco sobre los módulos en Angular
Aquí vamos a mover la lógica de mi tab1 a mi listas.component
Aquí aprenderemos a borrar una lista
Usando y creando un filtro impuro, son muy útiles cuando los cambios en el ciclo de detección de cambios de Angular no se disparan en el mismo componente
Para finalizar, editaremos el nombre de la lista
Aquí tendremos el código fuente de la sección
Un breve resumen sobre los temas que veremos a continuación
Visualmente, esto es lo que lograremos al final de la sección
Crearemos la aplicación de angular usando el Angular-CLI, y dejaremos listo lo que necesitamos para empezar en esta sección.
Formas de poder utilizar estilos a los componentes HTML directamente y cambiar sus valores de forma dinámica.
De esta forma podremos aplicar estilos que serán aplicados a un único componente sin afectar el resto de nuestra aplicación.
Aprenderemos a utilizar clases condicionales y utilizarlas a nuestro antojo.
Usando font-awesome para indicarle al usuario que esta pasando.
Crearemos una directiva personalizada para cambiar el estilo y a su vez, recibir parámetros de la misma.
Hay momentos donde realizar multiples *ngIf no es práctico, el ngSwitch, es otra directiva estructural.
Aquí crearemos una pequeña demostración de rutas rutas con rutas hijas, que nos servirá para próximas aplicaciones que realizaremos en el curso.
Rutas de una pantalla que es construida a partir de una ruta principal.
De esta manera podemos tener un poco más ordenado nuestro código de rutas hijas.
De esta manera podemos obtener los parámetros que sean enviados por el padre, desde las rutas hijas.
Estos son todos los pasos que realiza un componente, el cual nos permitirá ejecutar algún tipo de código si lo necesitamos.
Aquí pondremos a prueba todas las etapas del ciclo de vida de los componentes/directivas.
Un resumen de lo que veremos a continuación.
Visualmente, esto es lo que lograremos al final de la sección
Vamos a comenzar con la aplicación con restricciones.
Crearemos los componentes y la interfaz básica para el manejo de la autenticación
Empezaremos a trabajar con Auth0 y su documentación
Realizaremos un par de configuraciones en el Auth0 Dashboard y empezaremos a trabajar con el servicio.
Aquí vamos a realizar la autenticación con Auth0 y llamar el login
Con este servicio, podemos impedir que páginas sean mostradas si el usuario no esta logueado.
Aprenderemos a almacenar la información del perfil del usuario que ha realizado el login
Aquí pueden descargar el código fuente de la sección
Breve resumen de lo que veremos en esta sección
Un resumen puntual de los temas que veremos en esta sección
Aquí les dejo el producto final de la sección
Aquí iniciaremos el proyecto
Aquí vamos a crear un modelo para poder controlar la forma como el usuario es generado
Aquí aprenderemos a asociar un modelo con una instancia de clase
Aquí vamos a realizar una validación antes de que hagamos un posteo de información
Aquí vamos a mostrar los errores que presenten los campos de los formularios
Aquí debemos re realizar todo el trabajo nuevamente, pero con la página de Login
Aquí vamos a realizar unas configuraciones para poder probar nuestro login
Aquí aprenderemos a registrar un nuevo usuario
Aquí vamos a realizar el ingreso de usuarios existentes
Aquí vamos a trabajar almacenando el Token del usuario en el LocalStorage
Aquí vamos a trabajar informando al usuario qué es lo que está pansando
Aquí vamos a realizar el procedimiento para recordar el usuario
Aquí vamos a realizar la protección de la ruta si no se está autenticado
Aquí vamos a trabajar realizando un logout
Aquí vamos a pulir la validación de nuestro token
Aquí les dejo el código fuente de la sección
Nota Legacy:
Después de 5 años desde el lanzamiento inicial de este curso (y actualizaciones), queremos informarte que el mismo ha pasado a ser versión legacy. Esto implica que su contenido no recibirá actualizaciones adicionales y nuestro equipo de Co-instructores no continuará proporcionando soporte a preguntas relacionadas a este curso.
Te recomendamos que consideres tomar nuestro nuevo curso Angular: De cero a experto. Este curso ha sido desarrollado desde cero, siguiendo estándares actualizados y con un temario renovado. También te invitamos a unirte a nuestra comunidad en Discord, donde podrás recibir apoyo y resolver tus dudas.
Agradecemos tu comprensión.
Funcional en Angular 10
(Un curso Legacy, es un curso que ya no se le da mantenimiento porque existe otro que lo sustituye)
(Este curso es para personas que necesitan algo específicamente de esta versión)
Angular es un marco de trabajo (framework) de front-end impulsado por Google. Creado para desarrollar aplicaciones web, aplicaciones móviles o realizar procesos del lado del servidor utilizando NodeJS.
Este curso se enfoca en llevarte de la mano desde cero hasta poder crear aplicaciones de todo tipo, que van desde páginas web de una sola página (SPA - single page application) hasta conectarnos a una base de datos para realizar proceso de inserción, actualización, eliminación y selección de información. Este curso contiene todo lo que tu necesitas para poder crear aplicaciones con este framework tan potente y veloz.
Cada sección del curso termina en una aplicación completa que sirve para aprender y dominar un tema en especifico, y conforme vayamos avanzando en el curso, iremos creando aplicaciones más complejas y sin darnos cuenta ya estaremos creando directivas, componentes, pipes, servicios y rutas sin darnos cuenta.
Pero este curso no sólo te enseñara Angular, también conocerás sobre:
- Firebase
- Firebase RESTful services
- Firebase Cloud Functions
- CRUD
- TypeScript
- ECMAScript 6
- Reactive-Extensions
- Sockets
- Ionic 5
- Atom packages / Visual Studio Code Extensiones
- Angular CLI
- AngularFire
- Local Storage
- Bootstrap 4
- Spotify API
- Youtube API
- Entre otras tecnologías…
Aprenderemos este potente y muy veloz framework, con las debidas introducciones al código, lógica para resolver problemas utilizando las mejores prácticas y la guía de estilos oficial de Angular.
Tendremos un poco de teoría introductoria pero el 95% del curso es práctico y se enfoca en crear varias pequeñas-medianas aplicaciones escalables, que te harán experto en Angular.
Entre las aplicaciones que haremos en este curso están:
- Aplicación de música utilizando el API de Spotify
- Aplicación estática que sirve páginas HTML - SPA
- Aplicación de cine
- Auth0 - Aplicación con paginas protegidas usando login de Facebook, Google, Linkedin o datos personalizados.
- Aplicación de Mapas de Google
- Aplicación de lista de deseos – Ionic
- Aplicación CRUD usando FireBase RESTful services
- Chat utilizando Sockets, Firebase y AngularFire2
- Aplicación de videos de YouTube
- Aplicaciones ilustrativas del comportamiento de diversos componentes y directivas de Angular
- Gráficos
-Subir archivos a Firebase
Adicionalmente hay una sección completa para aprender ES6 (ECMAScript 6) y TypeScript, que te enseñaran todo lo que necesitas para poder programar utilizando el Framework de Angular con TypeScript.
Durante el curso, tendremos tareas prácticas y teóricas que aseguran tu comprensión sobre Angular, adicionalmente cada sección esta pensada para realizarse en poco tiempo y te hará construir una aplicación pequeña en base a videos cortos menores de 10 minutos (en el 98% de los mismos)
Cada sección enseña un tema independiente, por lo que puedes tomar descansos y saber que comenzaras de nuevo en cada sección.
No hay ningún costo adicional durante el curso, todas las herramientas aquí utilizadas son open source, gratuitas o servicios que podemos consumir sin ningún problema.
Si conoces o no Angular, este es un curso que debes de tomar, me he esforzado mucho para poder realizar este curso que te será de mucha ayuda, inclusive si sólo deseas el conocimiento adicional que cada módulo ofrece.
Anímate e inscríbete, te veo adentro.