|
|
|
First |
|
|
\ No newline at end of file |
|
|
|
# Angular
|
|
|
|
|
|
|
|
## Presentación
|
|
|
|
|
|
|
|
La asignatura de **Angular** tiene como finalidad capacitar al alumnado en el desarrollo de aplicaciones frontend modernas, escalables y mantenibles mediante el uso del framework Angular. A partir de los conocimientos previos de JavaScript y ECMAScript, se profundiza en la construcción de **Single Page Applications (SPA)**, la arquitectura basada en componentes, la comunicación con servicios backend y la gestión avanzada del estado de la aplicación.
|
|
|
|
|
|
|
|
La asignatura está orientada a proporcionar una base sólida para el desarrollo profesional de aplicaciones web complejas, siguiendo estándares actuales de la industria y buenas prácticas de ingeniería de software.
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
## Marco General de la Asignatura (Currículo)
|
|
|
|
|
|
|
|
**MÓDULO 10 – Desarrollo de Aplicaciones Web**
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
## Competencias Generales
|
|
|
|
|
|
|
|
**C.G.1**
|
|
|
|
Haber adquirido conocimientos avanzados y demostrado, en un contexto altamente especializado, una comprensión detallada y fundamentada de los aspectos teóricos y prácticos y de la metodología de trabajo en el campo de los sistemas de información.
|
|
|
|
|
|
|
|
**C.G.2**
|
|
|
|
Ser capaces de asumir la responsabilidad de su propio desarrollo profesional y de su especialización en uno o más campos de estudio.
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
## Competencias Específicas
|
|
|
|
|
|
|
|
**C.E.3**
|
|
|
|
Concebir, planificar, dirigir, implementar y mantener proyectos de desarrollo software.
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
## Unidades de Competencia
|
|
|
|
|
|
|
|
**U.C. 3.13**
|
|
|
|
Identificar, conocer y aplicar los estándares Web.
|
|
|
|
|
|
|
|
**U.C. 3.15**
|
|
|
|
Integrar frameworks frontend modernos en aplicaciones web.
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
## Objetivo de la Asignatura
|
|
|
|
|
|
|
|
### Resultados de aprendizaje
|
|
|
|
|
|
|
|
Al finalizar la asignatura, el alumnado será capaz de:
|
|
|
|
|
|
|
|
* Comprender la arquitectura y el ecosistema del framework Angular.
|
|
|
|
* Crear y estructurar aplicaciones SPA basadas en componentes.
|
|
|
|
* Aplicar correctamente el data binding y las directivas de Angular.
|
|
|
|
* Implementar comunicación entre componentes mediante inputs y outputs.
|
|
|
|
* Gestionar la navegación y el control de acceso mediante el Router.
|
|
|
|
* Consumir servicios backend mediante HTTP y programación reactiva.
|
|
|
|
* Aplicar patrones de gestión de estado en aplicaciones Angular.
|
|
|
|
* Desarrollar formularios escalables y robustos.
|
|
|
|
* Optimizar el rendimiento y aplicar buenas prácticas de calidad de código.
|
|
|
|
* Estructurar proyectos Angular preparados para entornos productivos.
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
## Metodología
|
|
|
|
|
|
|
|
La metodología de la asignatura se basa en un enfoque **activo, práctico y orientado a proyecto**, priorizando el aprendizaje experiencial y progresivo. El proceso de enseñanza-aprendizaje se articula en torno al principio de *aprender haciendo*, mediante la construcción incremental de una aplicación Angular realista.
|
|
|
|
|
|
|
|
Las sesiones combinan actividades prácticas guiadas con exposiciones teóricas posteriores, cuyo objetivo es formalizar y consolidar los conceptos que el alumnado ha explorado previamente. Este enfoque favorece una comprensión profunda del framework y de sus decisiones arquitectónicas.
|
|
|
|
|
|
|
|
Se fomenta la autonomía, la investigación individual y la reflexión crítica, incentivando el uso de la documentación oficial y el análisis de soluciones alternativas. Asimismo, la metodología es flexible y adaptativa, permitiendo atender distintos ritmos de aprendizaje y niveles de experiencia.
|
|
|
|
|
|
|
|
El acompañamiento docente se ajustará a las necesidades del alumnado, proponiendo niveles de ampliación para perfiles más avanzados y refuerzos conceptuales para quienes lo requieran.
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
## Temario y Planificación
|
|
|
|
|
|
|
|
### Bloque 1. Fundamentos y arranque del proyecto
|
|
|
|
|
|
|
|
**Sesiones 1 – 4**
|
|
|
|
|
|
|
|
**Contenido principal**
|
|
|
|
Introducción a Angular y su ecosistema. Creación y arranque de un proyecto, análisis de la estructura base, fundamentos de TypeScript aplicado a Angular y uso de plantillas con data binding y directivas.
|
|
|
|
|
|
|
|
**Objetivo general**
|
|
|
|
Comprender la arquitectura básica de Angular, su flujo de arranque y los fundamentos necesarios para construir una aplicación funcional.
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
### Bloque 2. Componentes y reutilización
|
|
|
|
|
|
|
|
**Sesiones 5 – 9**
|
|
|
|
|
|
|
|
**Contenido principal**
|
|
|
|
Creación de componentes, reutilización, encapsulación, comunicación entre componentes mediante inputs y outputs, y ciclo de vida de los componentes.
|
|
|
|
|
|
|
|
**Objetivo general**
|
|
|
|
Desarrollar componentes reutilizables y comprender los mecanismos de comunicación y gestión del ciclo de vida dentro de una aplicación Angular.
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
### Bloque 3. Navegación y estructura de aplicación
|
|
|
|
|
|
|
|
**Sesiones 10 – 14**
|
|
|
|
|
|
|
|
**Contenido principal**
|
|
|
|
Configuración del Router, navegación entre vistas, rutas con parámetros, lazy loading, guards y resolvers.
|
|
|
|
|
|
|
|
**Objetivo general**
|
|
|
|
Diseñar la navegación de aplicaciones SPA complejas y controlar el acceso y la carga de datos de forma estructurada.
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
### Bloque 4. Servicios y comunicación con backend
|
|
|
|
|
|
|
|
**Sesiones 15 – 19**
|
|
|
|
|
|
|
|
**Contenido principal**
|
|
|
|
Servicios, inyección de dependencias, HttpClient, programación reactiva con RxJS, manejo de errores, interceptores y arquitectura de servicios.
|
|
|
|
|
|
|
|
**Objetivo general**
|
|
|
|
Implementar la comunicación con backend de forma escalable, reactiva y mantenible, aplicando patrones profesionales de arquitectura.
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
### Bloque 5. Gestión de estado (Stores)
|
|
|
|
|
|
|
|
**Sesiones 20 – 24**
|
|
|
|
|
|
|
|
**Contenido principal**
|
|
|
|
Problemas de estado, introducción a stores, implementación con RxJS, introducción a NgRx, efectos y herramientas avanzadas.
|
|
|
|
|
|
|
|
**Objetivo general**
|
|
|
|
Comprender y aplicar patrones de gestión de estado adecuados a aplicaciones Angular de media y gran escala.
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
### Bloque 6. Calidad, optimización y cierre
|
|
|
|
|
|
|
|
**Sesiones 25 – 30**
|
|
|
|
|
|
|
|
**Contenido principal**
|
|
|
|
Formularios template-driven y reactivos, optimización de rendimiento, testing, arquitectura avanzada, preparación para producción y proyecto final.
|
|
|
|
|
|
|
|
**Objetivo general**
|
|
|
|
Garantizar la calidad, mantenibilidad y rendimiento de aplicaciones Angular profesionales y consolidar los conocimientos adquiridos mediante un proyecto final.
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
## Evaluación
|
|
|
|
|
|
|
|
La evaluación se basará en una combinación de **issues prácticas** y un **proyecto final**, aplicando criterios objetivos, medibles y alineados con estándares profesionales.
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
## Issues prácticas
|
|
|
|
|
|
|
|
* Se definirán issues específicas asociadas a ejercicios concretos.
|
|
|
|
* Cada issue detallará claramente la funcionalidad a implementar y las pruebas a realizar.
|
|
|
|
* El cierre de cada issue será evidencia de la correcta ejecución de la tarea.
|
|
|
|
* Se exigirá el cumplimiento de la **guía de estilo oficial de Angular y TypeScript**.
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
## Práctica final
|
|
|
|
|
|
|
|
La asignatura culminará con un **proyecto final completo**, en el que el alumnado deberá implementar una aplicación Angular funcional, estructurada y mantenible, cumpliendo unos criterios mínimos de calidad y arquitectura previamente definidos.
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
## Criterios de puntuación
|
|
|
|
|
|
|
|
* Correcta ejecución funcional.
|
|
|
|
* Aplicación de buenas prácticas de programación.
|
|
|
|
* Claridad, simplicidad y modularidad del código.
|
|
|
|
* Nomenclatura adecuada y coherencia arquitectónica.
|
|
|
|
* Alineación con los principios de *Clean Code*.
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
## Buenas prácticas
|
|
|
|
|
|
|
|
* Declaración de autoría y correcta referencia de fuentes.
|
|
|
|
* Uso prioritario de la **documentación oficial de Angular**, TypeScript y RxJS.
|
|
|
|
* Consulta de recursos como Angular.io y documentación oficial relacionada.
|
|
|
|
|
|
|
|
El uso de Inteligencia Artificial puede ser un apoyo puntual al aprendizaje, pero se recomienda un uso responsable, crítico y siempre contrastado con la documentación oficial.
|
|
|
|
|