Angular desde cero a experto: Crear una aplicación real

Angular te ofrece una lista de comandos increíble para facilitar el desarrollo, pero uno de los más importantes es ng new TU_PROYECTO el cual te inicia una nueva app de angular

35 Comandos de Angular:
https://codigoencasa.com/los-comandos-de-angular-mas-usados/

El comando para ejecutar en nuestro localhost se debe escribier el comando

ng serve o ng s

35 Comandos de angular

https://codigoencasa.com/los-comandos-de-angular-mas-usados/

TypeScript es un lenguaje mantenido por Microsoft y es una super extensión para JavaScript. No dejes que te esté concepto te atormente aprende de una manera sencilla como sacarle todo el poder a TS

Muchos de nosotros alguna vez hemos usado alguna librería externa como bootstrap, etc. En este proyecto solo utilizaremos las siguientes librerías de recursos estáticos.

ICONOS: https://iconscout.com/unicons
Google FONT: https://fonts.google.com/specimen/Poppins

Es bien visto el uso de data-set o banco de datos para comenzar a maquetar la interfaz del usuario sin limitarnos al uso de una api.

DATASET:

https://github.com/leifermendez/angular-spotify/tree/master/src/app/data

En un proyecto profesional se suele usar variables de color que estén relacionadas con el manual de identidad de la empresa, esto con el fin de mantener una consistencia de la apariencia de nuestra aplicación

En angular no existe una norma estricta para el uso de un orden determinado de carpetas, pero la comunidad ha aportado en gran parte, diferentes configuraciones que se adaptan a distintos modelos de negocio. Hoy te mostrase una estructura popular que se suele usar en proyectos que tienen proyecciones de escalamiento y trabajo de equipo

https://medium.com/williambastidasblog/angular-9-estructura-de-carpetas-de-para-una-aplicaci%C3%B3n-escalable-a34ab5dd6aaa

Angular como ya mencione anteriormente es una plataforma que se base mucho en módulos que a su vez se complementan con componentes, directivas, pipes, etc...

Por fortuna Angular nos permite generar módulos con sus rutas directamente con un solo comando

Comienza a dominar los módulos compartidos de una manera fácil. Ya que como su nombre lo indica es un módulo que permite compartir componentes, directivas, filtros y muchas cosas más.

Aprende a dominar la carga perezosa en tu aplicación como todo un profesional haciendo uso de los dynamic import

Los pequeños detalles marcan la diferencia entre un novato y apasionado. Y los path o alias suelen ser algo que se olvida, aprende a configurarlos de manera fácil

El orden y el fácil entendimiento de tu aplicación es la parte clave para poder ser escalable y mantenible. Se suele usar en muchos proyectos un patrón de estructura en el cual se denomine PageComponente a cuyos componentes están relacionados directamente con una ruta

Los router-outlet son la directive encarga de vincular tu ruta con un espacio asignado donde debe de renderizarse o visualizarse tu componente

Los ng-template son pedazos que código que puedes usar como de una plantilla dentro de un componente el cual nos sirve para mantener un orden y estructura dentro de nuestro archivo. Además de poder dividir cierta lógica y evitar repetir funciones

Comunicarse entre diferentes componentes es esencial al momento de crear una aplicación funcional por lo cual en este capítulo aprenderás a realizarlo

Las interfaces son simplemente contratos que debe de cumplir una estructura de datos para poder interpretarse de manera correcta

Los contextos son manera de pasar propiedades directamente a un ng-template para interpretación

Las rutas son la manera que angular incorpora para poder navegar entre diferentes vistas, estas rutas pueden pasar parámetros o queryParams

Una de las mejores características que aprenderás para la adaptación y manipulación de los datos, de manera desacoplada y fácil

En ocasiones necesitaremos interactuar directamente con un elemento renderizado y poder manipular sus propiedades basado en parámetros de entrada o basado en algún comportamiento

Los formularios reactivos simplemente son maravillosos nos permiten manipular los datos ingresados de manera óptima, fácil y con posibilidad de validación de datos

Aprende a generar servicios con métodos y dividir la lógica de tu componente hacia el servicio de esta manera mantener la mantenibilidad y estabilidad de tu proyecto. También aprende a usar EventEmitter

Aprende a utilizar los principales conceptos de programación reactiva en angular, sobre Observables, Subject, BehaviorSubject y más

https://osmancea.medium.com/programaci%C3%B3n-reactiva-con-rxjs-bebc9432485f

Aprende a conectarte mediante peticiones HTTP desde tu aplicación Angular a una API en este caso te proporciono una api en NODE con Express que va acorde con el proyecto

Aprenderás a manejar peticiones HTTP con suscriciones y algunos operadores rxjs con los cuales puedes establecer capas de filtros

También existen maneras de manipular suscripciones como promesas, por otro lado te enseño como colocar en el pipe un método que sea capaz de manipular errores provenientes de conexión

Aprende a enviar peticiones HTTP Post con las credenciales del usuario además aprende a guardar el token de session en una cookie

Los Guard son los vigilantes que te ayudaran a proteger las rutas, por ejemplo si tiene una session en la cookie dejarlo continuar o no

Como su palabra lo indica intercepta todas las peticiones que se realizan desde del Front (Angular) hacia el backend nos sirve para inyectar un token de authorization

Aprende a detectar los cambios de un ngModel (modelo) para poder disparar eventos relacionados al momento de teclear y de esta manera poder realizar una peticion HTTP Get a tu backend

Aprende a evitar overload de peticiones a tu backend podemos hacer uso del pipe async que nos ayudara a cancelar las peticiones anteriores y repetidas

Vamos aprender más a detalle sobre RXJS programación reactive como funciona un observable como crearlos todo sobre ellos.

El subject es un tipo de observable que es un "observable" y un "observe" al mismo tiempo  por otro lado tenemos el BehaviorSubject a diferencia que este último necesita inicializarse con un valor

Haciendo uso del BehaviourSubject y el objeto Audio comenzaremos a escuchar canciones en nuestro reproductor

Aprende a controlar y emitir el tiempo transcurridos de la canción que se esta reproduciendo gracias a el uso de los BehaviorSubject

Seguimos colocando en practicas los BehaviorSubject para manejar el estado de nuestro reproductor dando la funcionalidad de Play y Pause

Aprende a ajustar el ancho de la barra de progreso de manera porcentual dependiendo del progreso actual que se esta reproduciendo la canción

En este video aprenderás  a poder adelantar una canción a un punto especifico del progreso mediante un click en la barra