Modulo 1.1

Sesión 1 – Introducción y ecosistema Angular

1. Angular como framework de desarrollo frontend

Angular es un framework frontend completo, desarrollado y mantenido por Google, orientado a la construcción de aplicaciones web SPA (Single Page Application) de tamaño medio y grande. A diferencia de otras soluciones más ligeras, Angular proporciona un ecosistema integral que cubre la mayoría de las necesidades habituales en el desarrollo de aplicaciones web modernas.

Angular no se limita a la capa de vista, sino que define una forma estructurada de construir aplicaciones, imponiendo una arquitectura clara y consistente desde el inicio del proyecto.

Entre sus características principales se encuentran:

Uso de TypeScript como lenguaje base
Arquitectura basada en componentes
Sistema de inyección de dependencias integrado
Enrutado de aplicaciones
Gestión de formularios
Cliente HTTP
Herramientas de testing y construcción incluidas

Este enfoque hace que Angular sea especialmente adecuado para proyectos donde la mantenibilidad, la escalabilidad y la consistencia del código son factores críticos.

2. Casos de uso habituales de Angular

Angular suele utilizarse en contextos donde:

La aplicación tiene un ciclo de vida largo
El código es mantenido por varios desarrolladores
Se requiere una estructura clara desde el inicio
La aplicación crece de forma progresiva en complejidad
Se trabaja en entornos corporativos o empresariales

Ejemplos habituales de uso incluyen:

Aplicaciones corporativas
Paneles de administración
Backoffices
Sistemas de gestión interna
Dashboards con alto grado de interacción

El carácter opinado del framework reduce la ambigüedad en la toma de decisiones técnicas y facilita la homogeneidad del código en equipos grandes.

3. Modelo de aplicación SPA

Angular se basa en el modelo SPA (Single Page Application). En este tipo de aplicaciones:

El navegador carga inicialmente un único documento HTML
La navegación entre vistas no provoca recargas completas
La interfaz se actualiza dinámicamente mediante JavaScript

Este modelo permite ofrecer una experiencia de usuario fluida, similar a la de una aplicación de escritorio, donde las transiciones entre pantallas son rápidas y sin interrupciones visibles.

Angular genera aplicaciones SPA de forma predeterminada.

4. Renderizado del lado del cliente (CSR)

En el modelo Client Side Rendering (CSR), el proceso de carga de la aplicación sigue los siguientes pasos:

El navegador solicita la aplicación al servidor
El servidor devuelve un HTML mínimo junto con los archivos JavaScript y CSS
El framework se ejecuta en el navegador
La interfaz se construye dinámicamente en el cliente

Este enfoque presenta varias ventajas:

Navegación rápida una vez cargada la aplicación
Separación clara entre frontend y backend
Experiencia de usuario fluida

Como contrapartida:

La primera carga puede ser más lenta
El contenido no está disponible inmediatamente para motores de búsqueda sin técnicas adicionales

Angular utiliza CSR como modelo base.

5. Renderizado del lado del servidor (SSR)

El Server Side Rendering (SSR) consiste en generar el HTML completo de la aplicación en el servidor antes de enviarlo al navegador.

En este modelo:

El servidor ejecuta Angular para renderizar la vista inicial
El navegador recibe HTML ya construido
Posteriormente, Angular toma el control en el cliente

Las principales ventajas del SSR son:

Mejora del SEO
Mejor tiempo hasta el primer contenido visible
Mejor rendimiento percibido

Angular soporta SSR mediante Angular Universal, aunque este curso se centra inicialmente en el modelo CSR para asentar las bases del framework.

6. Posicionamiento de Angular frente a otros frameworks

Dentro del ecosistema frontend moderno, Angular convive principalmente con React y Vue. Cada uno adopta un enfoque distinto.

Característica	Angular	React	Vue
Naturaleza	Framework completo	Librería de UI	Framework progresivo
Arquitectura	Muy definida	Flexible	Intermedia
Enfoque	Aplicaciones estructuradas	Construcción de interfaces	Simplicidad y adopción gradual
Escalabilidad	Alta	Alta (con decisiones adicionales)	Media

Angular destaca por proporcionar una solución integral desde el inicio, reduciendo la necesidad de tomar decisiones sobre librerías externas o patrones arquitectónicos en fases tempranas del proyecto.

7. Entorno de desarrollo: Node.js y npm

Angular se apoya en Node.js como entorno de ejecución y en npm como gestor de paquetes.

Estas herramientas permiten:

Instalar dependencias
Ejecutar scripts de desarrollo
Lanzar el servidor local
Construir la aplicación para producción

Comprobación de versiones instaladas:

node -v
npm -v

Angular requiere versiones modernas de Node.js, recomendándose el uso de versiones LTS.

8. Angular CLI

Angular CLI es la herramienta oficial para trabajar con Angular. Su función principal es automatizar tareas comunes del desarrollo.

Entre sus responsabilidades se encuentran:

Creación de nuevos proyectos
Generación de componentes y otros artefactos
Ejecución del servidor de desarrollo
Compilación de la aplicación

Instalación global:

npm install -g @angular/cli

Verificación de la instalación:

ng version

Angular CLI estandariza la estructura del proyecto y promueve buenas prácticas desde el inicio.

9. Creación de un proyecto Angular

La creación de un nuevo proyecto se realiza mediante el comando:

ng new primer-proyecto-angular

Durante el proceso de creación, Angular CLI solicita información relacionada con:

Uso de enrutado
Formato de hojas de estilo

Una vez finalizado el proceso, se genera una estructura completa lista para su ejecución.

Acceso al proyecto:

cd primer-proyecto-angular

10. Ejecución del servidor de desarrollo

Angular incorpora un servidor de desarrollo que permite ejecutar la aplicación en local.

ng serve

El servidor compila la aplicación y la expone por defecto en:

http://localhost:4200

El entorno de desarrollo incluye recarga automática, lo que permite visualizar los cambios realizados en el código de forma inmediata.