CURSO ANGULAR 17 PARA EL TRABAJO: INTRODUCCIÓN Y HERRAMIENTAS CLAVE 🛠️

Introducción a Angular

Resumen de la Sección: En esta sección inicial, se introduce el curso sobre Angular y se prepara el entorno de desarrollo. Se destaca que el curso está dirigido a personas nuevas en Angular o sin conocimientos previos en la materia.

¿Qué es Angular?

• Angular es más que un framework, es una plataforma completa para el desarrollo web.

• Un framework es un conjunto de librerías que facilitan el desarrollo de aplicaciones web, desktop o móviles.

• Angular viene con librerías predeterminadas para agilizar el proceso de desarrollo.

Características y Funcionalidades de Angular

• Al instalar Angular, se obtiene una línea de comandos que simplifica la creación de componentes, servicios y pruebas unitarias.

• Los comandos predefinidos realizan tareas como generar componentes y relacionar archivos automáticamente, mejorando la productividad.

Herramientas Integradas en Angular

• Angular incluye funcionalidades como peticiones HTTP, manipulación de formularios y redireccionamiento en las páginas.

• La internacionalización (i18n), compilación y despliegue son procesos simplificados gracias a las herramientas integradas en Angular.

Angular como Plataforma Completa

Resumen de la Sección: Se explora cómo Angular va más allá de ser solo un framework al ofrecer una serie de aplicaciones y librerías adicionales que complementan su funcionalidad principal.

Expansión de Funcionalidades en Angular

• Además del framework, Angular proporciona una serie de aplicaciones y librerías independientes para diversas funciones dentro del desarrollo web.

Angular: Desarrollo Web y Móvil

Resumen de la Sección: En esta sección, se explora la versatilidad de Angular no solo en el desarrollo web, sino también en el ámbito móvil, destacando su capacidad para crear aplicaciones móviles y trabajar con tecnologías como Ionic. Además, se menciona la utilidad de Angular Universal para renderizar vistas desde el servidor.

Angular en Desarrollo Móvil

• Angular permite desarrollar aplicaciones móviles utilizando tecnologías como Ionic.

• La tecnología PWA junto con Angular posibilita que las aplicaciones web aparezcan como apps dentro del dispositivo móvil.

Angular Universal y Librerías

• Angular Universal facilita el renderizado desde el servidor, permitiendo que este sirva toda la vista.

• La versión 17 introduce "hydration", optimizando la experiencia al hacer que la vista del navegador funcione como un SPA (Single Page Application).

Compilación y Ejecución en Angular

Resumen de la Sección: Aquí se aborda la importancia de una compilación rápida y una ejecución eficiente en el desarrollo con Angular, presentando herramientas como Bazel y B10 para agilizar estos procesos.

Herramientas para Compilación Rápida

• Bazel y B10 garantizan tiempos mínimos de espera en cada renderización, mejorando significativamente la productividad del desarrollador.

• B10 es una herramienta frontend que prepara un entorno de desarrollo completo, siendo útil no solo para proyectos basados en Angular sino también para otras librerías como Vue o React.

Mejoras en Eficiencia

• B10 + Spild es el estándar actual en Angular para reemplazar a herramientas anteriores como Webpack, ofreciendo una transpilación más rápida y eficiente.

Compilación y Transpilación en Angular

Resumen de la Sección: En esta sección se aborda el proceso de compilación y transpilación en Angular, destacando la importancia de herramientas como Babel y Webpack para optimizar el rendimiento del desarrollo web.

Proceso de Compilación y Transpilación

• Se menciona que el compilador weap tarda 41.21 segundos, mientras que spil solo necesita 0.39 segundos para compilar.

• Angular utiliza herramientas como Babel y Webpack para agilizar la detección de cambios y la transpiración, facilitando llevar los proyectos a producción de manera eficiente.

• La versión 17 de Angular introduce mejoras significativas en el proceso de compilación, siendo un estándar estable que revoluciona el desarrollo con Angular.

Diferencia entre Compilación y Transpilación

• Se destaca la diferencia fundamental entre compilar y transpilar: la compilación traduce código a código máquina, mientras que la transpilación convierte un lenguaje a otro compatible con cierto entorno (como TypeScript a JavaScript).

• En el contexto del desarrollo web, se explica cómo la transpilación es crucial al trabajar con TypeScript, ya que los navegadores solo reconocen JavaScript, requiriendo este proceso para convertirlo adecuadamente.

Importancia en Desarrollo Web

• El uso generalizado de TypeScript en proyectos empresariales resalta la necesidad de transpilarlo a JavaScript para su ejecución efectiva en navegadores web.

• Herramientas como Babel y Webpack permiten visualizar el desarrollo web tras procesos de transpiración o compilado, facilitando ver los resultados finales tanto en aplicaciones web como móviles.

Ventajas del Uso de Babel y Webpack en Angular

Resumen de la Sección: Esta parte destaca las mejoras sustanciales al trabajar con Babel y Webpack en Angular 17, enfatizando su rapidez y eficiencia durante el desarrollo web.

Mejoras Significativas con Babel y Webpack

Velocidad y Mejoras en Angular

Resumen de la Sección: En esta sección, se discute la velocidad mejorada de Angular y las futuras mejoras que se esperan en la tecnología.

Velocidad y Eficiencia

• La velocidad de Angular ha mejorado significativamente, lo que antes no existía para Angular.

• Las mejoras en Angular hacen que sea más rápido e intuitivo para el desarrollo de aplicaciones móviles y web.

• Se introduce el concepto de Single Page Application (SPA), donde no hay refrescos constantes al cambiar de página, lo que mejora la experiencia del usuario.

• Se compara una web tradicional con una SPA, destacando cómo funciona el refresco en cada caso.

• Con Angular y el enfoque SPA, la interacción con el servidor es fluida sin necesidad de refrescar constantemente.

Beneficios del Enfoque SPA

Resumen de la Sección: Aquí se exploran los beneficios clave del enfoque Single Page Application (SPA) al trabajar con Angular.

Ventajas del SPA

• Las aplicaciones SPA permiten mantener la interactividad con el usuario sin causar molestias por tiempos de espera.

• La fluidez en las interacciones es fundamental para retener a los usuarios, evitando tiempos prolongados de carga.

• Estrategias como "Skeleton" pueden utilizarse para mostrar contenido gradualmente y mejorar la percepción del rendimiento.

Desarrollo con Angular: Requisitos Iniciales

Resumen de la Sección: Aquí se detallan los requisitos iniciales para comenzar a desarrollar aplicaciones con Angular.

Preparación del Entorno

• Es necesario montar un entorno de desarrollo para preparar las herramientas requeridas en la máquina.

• El uso de Node.js es fundamental para ejecutar el compilado final del proyecto y renderizarlo correctamente.

Instalación y Configuración de Angular

Resumen de la Sección: En esta sección, se aborda la instalación y configuración inicial de Angular, incluyendo el uso de Node.js (Node) y Angular CLI. Se discute la importancia de utilizar versiones estables y compatibles para un desarrollo eficiente.

Descarga de Librerías con Node.js

• Node permite compilar proyectos sin conexión a internet al haber descargado previamente las librerías necesarias.

• La instalación de Angular requiere Node y npm para gestionar las dependencias del proyecto.

Creación del Primer Proyecto con Angular CLI

• Es fundamental instalar Node.js antes de crear un proyecto en Angular.

• Se recomienda utilizar la versión LTS (Long Term Support) para garantizar estabilidad y compatibilidad.

Importancia de Versiones Estables

• La versión LTS indica estabilidad tras pruebas extensas, siendo ideal para entornos productivos.

• Al descargar e instalar Angular CLI a través de npm, se obtiene un entorno listo para trabajar con Angular.

Uso de npm en Desarrollo Frontend

• npm es esencial para acceder a librerías frontend modernas desde un repositorio centralizado como npmjs.com.

• Permite descargar e instalar librerías necesarias para el proyecto, facilitando el desarrollo frontend.

Manejo de Versiones con Node Version Manager (nvm)

• nvm es crucial al trabajar con múltiples versiones incompatibles entre Node.js y Angular.

Instalación de Angular y Node.js

Resumen de la Sección: En esta sección, se aborda el proceso de instalación de Angular y Node.js en diferentes sistemas operativos.

Instalación de Angular

• Se recomienda desinstalar versiones anteriores de Node.js antes de proceder con la instalación.

• Se utiliza NVM (Node Version Manager) para instalar y gestionar las versiones de Node.js en Windows, Linux y Mac.

• Se proporcionará un enlace con recursos y tutoriales para configurar NVM en Mac y Linux.

Verificación e Instalación de Node.js

• Descargar la versión deseada de Node.js desde el repositorio oficial.

• Verificar la instalación correcta ejecutando comandos como mbm nbm envm.

Configuración y Uso de Versiones en Node.js

Resumen de la Sección: Aquí se detalla cómo verificar las versiones instaladas y cambiar entre ellas en Node.js.

Verificación y Cambio entre Versiones

• Utilizar comandos como mbm list para ver las versiones instaladas.

• Para trabajar con una versión específica, instalarla utilizando comandos como install 18.1.0.

Instalación Adicional de Versiones en Node.js

Resumen de la Sección: Explicación sobre cómo instalar nuevas versiones adicionales en Node.js.

Instalación Adicional

• Ejecutar comandos como install 18.3.3 para añadir nuevas versiones a las ya existentes.

• Verificar la correcta instalación mediante comandos como env ven.

Gestión Avanzada: Cambio entre Versiones

Resumen de la Sección: Detalles sobre cómo cambiar entre diferentes versiones instaladas en Node.js.

Cambio entre Versiones

• Cambiar fácilmente entre las distintas versiones utilizando comandos como use 20.9.1.

• En algunos sistemas operativos, puede ser necesario ejecutar los comandos con permisos administrativos.

Instalación Específica: Angular v17

Resumen de la Sección: Proceso detallado para instalar Angular versión 17 junto con sus requisitos.

Instalando Angular v17

Instalación de Angular y Visual Studio Code

Resumen de la Sección: En esta sección, se aborda la instalación de Angular y las extensiones necesarias en Visual Studio Code para el desarrollo. Se detallan los pasos para instalar Angular y configurar Visual Studio Code con extensiones útiles.

Instalación de Angular

• npm install -g @angular/cli: Comando para instalar Angular en el sistema operativo.

• Verificación de instalación: Ejecutar 'ng v' para confirmar la correcta instalación de Angular.

• Verificación adicional: Si hay problemas, abrir otra terminal y ejecutar 'ng v' nuevamente.

• Trabajo con diferentes versiones: Es posible trabajar con distintas versiones de Angular utilizando 'npm list' y seleccionando la versión deseada.

Configuración de Visual Studio Code

• Elección del editor: Utilización de Visual Studio Code como editor recomendado.

• Extensión Bird para temas visuales: Recomendación de la extensión Bird para personalizar temas visuales en Visual Studio Code.

Personalización y Mejoras en Visual Studio Code

Resumen de la Sección: En este apartado, se profundiza en las opciones de personalización visual y funcionalidades adicionales que ofrece Visual Studio Code a través de extensiones específicas.

Personalización Temática

• Uso del tema Bird: Recomendación del uso del tema Bird para modificar la apariencia visual del editor.

• Variedad temática: Exploración de diversas opciones temáticas disponibles con el tema Bird, permitiendo ajustar el entorno según preferencias personales.

Mejoras Funcionales

Identificación de Archivos y Extensiones en Visual Studio Code

Resumen de la Sección: En esta sección, se aborda la importancia de identificar diferentes tipos de archivos y extensiones en Visual Studio Code para facilitar el trabajo con distintos lenguajes y frameworks.

Identificación de Archivos

• La capacidad de identificar rápidamente qué tipo de archivo es fundamental al trabajar en Visual Studio Code.

• Los archivos HTML se distinguen por su extensión ".html", mientras que los archivos TypeScript tienen la extensión ".ts".

• La extensión Material Icons facilita la identificación visual de los diferentes tipos de archivos mediante iconos específicos.

Configuración y Uso de Extensiones en Visual Studio Code

Resumen de la Sección: En este segmento, se detalla cómo configurar extensiones clave como Material Icons para mejorar la experiencia del usuario al trabajar con Visual Studio Code.

Configuración de Material Icons

• Para habilitar los iconos visuales proporcionados por Material Icons, es necesario instalar esta extensión desde el marketplace.

• Tras instalar Material Icons, se debe acceder a la configuración y seleccionar "Set File Icon Theme" para activar los iconos personalizados.

• Esta configuración permite una identificación más rápida y sencilla de los distintos tipos de archivos dentro del entorno de desarrollo.

Optimización del Entorno con Angular Language Service y Angular Snippets

Resumen de la Sección: Aquí se explora cómo optimizar el entorno para trabajar con Angular mediante extensiones como Angular Language Service y Angular Snippets.

Angular Language Service

• Es imprescindible instalar Angular Language Service para reconocer sintaxis específicas dentro del código Angular.

• Esta extensión ayuda a detectar errores, advertencias y ofrecer recomendaciones durante el desarrollo en Angular.

Angular Snippets

• Los Angular Snippets proporcionan comandos predefinidos que agilizan la creación de componentes, servicios y otras estructuras comunes en proyectos Angular.

Trabajo con Archivos y Formateo de Código

Resumen de la Sección: En esta sección, se aborda la importancia del formateo uniforme del código al trabajar con diferentes tipos de archivos y editores para evitar problemas de integración y pérdida de tiempo.

Trabajo con Diferentes Editores

• La diversidad en el uso de editores como Visual Studio Code, Atom e IntelliJ IDEA puede generar conflictos debido a los distintos formatos y estilos que manejan cada uno.

• La falta de un formateador común puede ocasionar problemas al unir el código, incluso resultando en la eliminación accidental de segmentos importantes durante el proceso.

Establecimiento de un Sistema de Formateo

• Es fundamental acordar un sistema de formateo uniforme entre los miembros del equipo para optimizar la integración del código. Se destaca la personalización disponible a través de herramientas como Prettier.

• Prettier ofrece opciones para ajustar el ancho de pantalla y el estilo del indexado (Tab Width), permitiendo visualizar instantáneamente cómo se formatea el código según las preferencias establecidas.

Configuración y Uso Efectivo

• Después de personalizar las configuraciones en Prettier, es posible copiar dicha configuración en formato JSON para compartirlo con otros miembros del equipo o utilizarlo offline sin depender directamente de la extensión.

• Al mantener un archivo ".prettierrc" con las configuraciones adecuadas, se garantiza que todos los archivos sean formateados según lo acordado antes de enviar cambios al proyecto, facilitando una colaboración más eficiente.

Configuraciones Personalizadas y Actualizaciones

Resumen de la Sección: En este segmento, se profundiza en cómo establecer configuraciones personalizadas dentro del entorno Visual Studio Code para optimizar el uso efectivo del formateador Prettier y evitar conflictos durante actualizaciones.

Personalización en Visual Studio Code

• A través del menú "Settings" en Visual Studio Code, es posible acceder a las configuraciones JSON donde se pueden incorporar ajustes específicos relacionados con extensiones como Prettier para mantener un formato consistente.

• Al instalar extensiones como Prettier, es crucial seguir las recomendaciones e instalar librerías adicionales necesarias para su correcto funcionamiento. Las configuraciones detalladas deben ser copiadas en el archivo correspondiente para una implementación efectiva.

Optimización mediante Config Patch

• La opción "config Patch" dentro de las configuraciones avanzadas permite establecer un archivo específico que evita que Visual Studio Code sobrescriba ciertas configuraciones al actualizar extensiones como Prettier. Esto asegura una gestión controlada por parte del usuario.

Mantenimiento Eficiente

Sistema Operativo y Configuraciones en Visual Studio Code

Resumen de la Sección: En esta sección, se discute la importancia de configurar el sistema operativo y las opciones de configuración en Visual Studio Code para mejorar la eficiencia y productividad del desarrollo.

Configuración del Sistema Operativo

• Se recomienda activar la opción "required config" en Visual Studio Code para formatear el proyecto con las configuraciones adecuadas.

• La opción "required config" es crucial para indicar cuándo debe ejecutarse el formateador preter en lugar del formateador predeterminado.

• La configuración "required config" se encuentra dentro de las opciones del settings y permite establecer las preferencias de formato a nivel visual.

Atajos de Teclado Personalizados en Visual Studio Code

Resumen de la Sección: En este segmento, se explora cómo crear atajos de teclado personalizados en Visual Studio Code para aumentar la productividad y facilitar tareas comunes durante el desarrollo.

Creación de Atajos Personalizados

• Los atajos personalizados se pueden configurar accediendo a la sección "Keyboard shortcut" en las opciones de configuración.

• Personalizar los atajos permite agilizar acciones como guardar cambios con un solo comando o realizar importaciones automáticas con combinaciones específicas.

• Establecer atajos como control punto para importaciones automáticas simplifica tareas repetitivas y mejora la eficiencia durante el desarrollo.

Optimización con Extensiones y Configuraciones Avanzadas

Resumen de la Sección: Aquí se detallan estrategias avanzadas para optimizar el flujo de trabajo en Visual Studio Code mediante extensiones, atajos personalizados y configuraciones específicas.

Mejoras Avanzadas

• Utilizar atajos como control espacio import agiliza procesos manuales al realizar importaciones en múltiples archivos.

• Las configuraciones detalladas, incluidas los atajos personalizados, pueden ser compartidas para mejorar la productividad del equipo.

• Al centralizar todas las configuraciones clave en un único lugar, se simplifica el proceso de implementación y optimización del entorno de desarrollo.

Eficiencia con Herramientas Externas: Oh My Posh Terminal

Resumen de la Sección: Se introduce Oh My Posh Terminal como una herramienta externa que potencia la eficiencia al trabajar con repositorios Git y facilita una experiencia más intuitiva durante el desarrollo.

Potenciando Eficiencia

• Oh My Posh Terminal ofrece una interfaz mejorada para trabajar con Git, lo que resulta especialmente útil al colaborar en proyectos o gestionar repositorios.

• Comparado con Git Bash, Oh My Posh Terminal proporciona una consola más dinámica e intuitiva que simplifica el uso diario del control de versiones.

Creación de Proyectos con Angular desde la Terminal

Resumen de la Sección: En esta sección, se discute la creación de proyectos con Angular desde la terminal, comparando el uso de comandos y herramientas como GitBash. Se enfatiza la importancia de utilizar una terminal intuitiva para personalizar y configurar los proyectos de manera eficiente.

Creación de Proyectos con Comandos en Angular

• Al generar un proyecto con el comando correspondiente, debería lanzarse un cuestionario para personalizar aspectos como archivos a utilizar y funcionalidades deseadas.

• GitBash, al ser una terminal poco intuitiva, ejecuta el template project por defecto en lugar de ofrecer opciones interactivas para personalización.

Importancia de Utilizar una Terminal Intuitiva

• Es fundamental emplear una terminal que permita una interacción más amigable al crear proyectos en Angular para facilitar la personalización y resolución de problemas.

• La utilización de terminales convencionales resulta más intuitiva que GitBash, brindando mayor control sobre las opciones y configuraciones del proyecto.

Personalización Avanzada con Herramientas Específicas

• Al iniciar un proyecto en Angular, es crucial contar con un cuestionario interactivo que permita seleccionar elementos como hojas de estilo y funcionalidades específicas.

• Herramientas como om my poch ofrecen opciones avanzadas para personalizar la apariencia y funcionalidad de la terminal, mejorando la experiencia del usuario al trabajar en entornos de desarrollo.

Configuración Avanzada con Windows Terminal

Resumen de la Sección: En esta parte se explora cómo configurar Windows Terminal para obtener una experiencia actualizada y potente al trabajar en entornos Windows. Se destaca la versatilidad y capacidad de personalización que ofrece esta herramienta.

Actualización e Instalación del Windows Terminal

• A partir de Windows 10, se puede acceder a Microsoft Store para buscar e instalar Windows Terminal, combinando las capacidades del cmd tradicional y PowerShell en una sola interfaz moderna.

• La nueva terminal integrada en Windows permite aprovechar las funciones tanto del cmd como del PowerShell, brindando flexibilidad y potencia a los usuarios durante el desarrollo.

Personalización Avanzada y Recomendaciones

• La posibilidad de personalizar Windows Terminal según preferencias individuales lo convierte en una herramienta altamente recomendada para optimizar el flujo de trabajo y mejorar la productividad.

Configuración de Terminal y Librería en Windows

Resumen de la Sección: En esta parte, se aborda la configuración de la terminal en Windows y cómo utilizar una librería para mostrar iconos que faciliten la identificación de archivos y carpetas.

Configuración de Terminal

• Se puede configurar la terminal para mostrar iconos al utilizar comandos como ls, lo que agiliza la identificación de archivos y carpetas.

• La librería utilizada también permite personalizar la interfaz al trabajar con gitb, mostrando iconos representativos del repositorio y la rama actual.

Próxima Clase: Configuración Avanzada y Uso de Librerías

Resumen de la Sección: En el próximo encuentro, se profundizará en la configuración avanzada de la terminal y el uso de librerías para optimizar el entorno de desarrollo.

Próxima Clase

• La próxima clase se realizará posiblemente el martes o miércoles, con el objetivo de explorar configuraciones adicionales tanto en Windows como en Linux o Mac OS.

• Se enseñará a configurar la terminal para mejorar su funcionalidad y se compartirán recursos útiles a través de un drive.

Preparación para Trabajar con Angular

Resumen de la Sección: Se destaca la importancia de conocer JavaScript antes de adentrarse en Angular, así como las próximas temáticas a tratar en las clases siguientes.

Trabajo con Angular

• Es fundamental tener conocimientos previos en JavaScript para trabajar eficientemente con Angular.

• Se anuncia que en futuras clases se abordará el uso específico del terminal o myp y scp para trabajar con Angular.

Enfoque Práctico: Buenas Prácticas y Desarrollo Profesional

Resumen de la Sección: Se enfatiza en aprender metodologías prácticas como Clean Code, patrones de diseño y arquitectura limpia para mejorar habilidades profesionales.

Buenas Prácticas

• Aprender metodologías demandadas por el mercado laboral como Clean Code es crucial para generar oportunidades laborales inmediatas.