Desarrollo De Frontend (Clase) - INTRODUCCIÓN A ANGULAR: Módulos, Componentes y Arquitectura (parte 15) 🔥

Estos vídeos no están hechos con propósitos de enseñar, solo los subo para mantener un recuerdo de la Universidad, y para eventos futuros (errores, ¿Cómo diseñé esto?, ¿Qué error cometí?), lo digo porque no me fijo en la musica de fondo ni esos detalles mínimos ... Hola buenas, esta es la clase de "Desarrollo de Frontend" del día 28-04-2025 (semestre 2025-1) de la Universidad de Caldas. ¡Bienvenidos a la decimoquinta sesión de nuestro curso de *Desarrollo Frontend*! Iniciamos la recta final explorando *Angular*, un framework diseñado para crear aplicaciones escalables y altamente estructuradas. En esta sesión, nos enfocamos en la puesta a punto del entorno utilizando *NVM (Node Version Manager)* para asegurar la compatibilidad con versiones específicas. Desglosamos la anatomía de un proyecto Angular, explicando el propósito de carpetas clave como assets, environments y app. Comprendemos la diferencia vital entre un *Módulo* (agrupador de lógica) y un *Componente* (unidad básica de visualización), y cómo el enrutamiento por capas permite construir aplicaciones complejas de forma organizada. 🚀 *LO QUE APRENDERÁS EN ESTA SESIÓN:* • Gestión de Entorno: Uso de NVM para saltar entre versiones de Node.js. • CLI de Angular: Comandos esenciales (ng generate) para crear módulos y componentes. • Arquitectura por Carpetas: Propósito de SRC, assets y variables de entorno. • Módulos vs Componentes: Cómo organizar la lógica de negocio y las vistas. • Estructura de Componente: Los 4 archivos fundamentales (HTML, CSS, TS, Spec). • Enrutamiento (Routing): Configuración de la torre de control para navegar. 📌 *CAPÍTULOS DEL VIDEO:* 00:00 Bienvenida e introducción al cierre de curso con Angular 05:06 Instalación de NVM: Gestionando versiones de Node para compatibilidad 14:26 Preparación del repositorio y CLI de Angular 29:31 ¿Qué es Angular?: Ventajas, documentación y patrón MVC 33:56 Análisis de archivos: package.json, assets y environments 36:31 La carpeta APP: Módulos principales y el archivo app.routing 44:46 Definición de Módulos y Componentes: Fragmentos de página 48:36 Ejemplo práctico: Estructurando un sistema para un Cine 52:16 Comandos de generación: ng generate module y ng generate component 56:31 El parámetro --routing: Creando torres de control específicas 1:08:16 Anatomía de un componente: HTML, SCSS y el archivo TypeScript 1:14:41 Configurando el admin-layout.routing: El salto a la torre de control 1:21:01 Pruebas de enrutamiento: Verificando "Works!" en el navegador 1:26:11 Introducción al Backend: Preparando el servidor Python para el proyecto 1:34:01 Configuración de entornos virtuales y dependencias del Backend 1:43:46 Análisis de Endpoints: Rutas de restaurantes, productos y motos 🔗 *GUÍA DE LA PLAYLIST: DESARROLLO FRONTEND* • Video Anterior: https://www.youtube.com/watch?v=c5VmWpm5kJY • Video Siguiente: https://youtu.be/8VSeeHXn9UA?si=WLK5QJQ6NEjq_e6u 📺 *VIDEOS RECOMENDADOS DE INGE. SRM* • INTRODUCCIÓN BASES DE DATOS (Clase 1): https://www.youtube.com/watch?v=pkyMrzjc2no • FRONTEND CLASE 6 (API/Fetch): https://www.youtube.com/watch?v=TSGmxQufmyY #Angular #Frontend #NVM #TypeScript #WebDevelopment #SoftwareArchitecture #IngeSRM #GoogleAngular #Coding #MVC #TypeScript TAGS IGNORAR -------------------------------- mrbeast, viral, épico, imposible, sorprendente, reto extremo, hackeo épico, tecnología, programando en vivo, angular, frontend, backend, interceptores, autenticación, token secreto, ruta protegida, guardianes, seguridad extrema, control total, dominando angular, nivel dios, desafío de código, reto de programación, 24 horas programando, no creerás esto, rompimos angular, código imposible, hackeamos el sistema, protegimos todo, seguridad máxima, angular como nunca lo viste, misión secreta, auth angular, login impenetrable, reto de código extremo, lo hicimos posible, fullstack challenge, dev extremo, prueba definitiva, web segura, programador extremo, código legendario, lo más seguro, tecnología al límite, angular nivel pro, login indestructible, interceptores locos, guardianes del código, código viral, programador en acción, dominando el código, tutorial imposible, seguridad al máximo, token ultra seguro, rompimos internet, fullstack ninja, auth nivel hacker, el mejor sistema auth, el reto más difícil, programación viral, auth brutal, dev épico, lo más difícil de angular, angular explicado fácil, seguridad como MrBeast, reto tech, tech viral, programador vs hacker, seguridad sin límites, angular extremo, modo hacker, hacker friendly, codificando como bestia, lo más loco en angular, sistema a prueba de todo, auth 100% seguro, nunca visto en angular, angular destruido, angular full, desafío fullstack, auth a otro nivel, backend inquebrantable, web a prueba de hackers, codificando con estilo, lo más pro en auth, imposible de hackear, código que asombra, tech challenge, pro challenge, hackeamos angular, angular al extremo, brutalidad en código, 100% impenetrable, código nivel leyenda, angular