|
|
|
# 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:
|
|
|
|
|
|
|
|
1. El navegador solicita la aplicación al servidor
|
|
|
|
2. El servidor devuelve un HTML mínimo junto con los archivos JavaScript y CSS
|
|
|
|
3. El framework se ejecuta en el navegador
|
|
|
|
4. 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:
|
|
|
|
|
|
|
|
```bash
|
|
|
|
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:
|
|
|
|
|
|
|
|
```bash
|
|
|
|
npm install -g @angular/cli
|
|
|
|
```
|
|
|
|
|
|
|
|
Verificación de la instalación:
|
|
|
|
|
|
|
|
```bash
|
|
|
|
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:
|
|
|
|
|
|
|
|
```bash
|
|
|
|
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:
|
|
|
|
|
|
|
|
```bash
|
|
|
|
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.
|
|
|
|
|
|
|
|
```bash
|
|
|
|
ng serve
|
|
|
|
```
|
|
|
|
|
|
|
|
El servidor compila la aplicación y la expone por defecto en:
|
|
|
|
|
|
|
|
```text
|
|
|
|
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.
|
|
|
|
|
|
|
|
--- |
|
|
|
\ No newline at end of file |
