Multimedia y Laboratorio Unidad II Angular 2025

1. MULTIMEDIA Y LABORATORIO
UNIDAD II. HERRAMIENTAS DE DESARROLLO –
FRONTEND ANGULAR
Dr(c). Richard Eliseo Mendoza Gáfaro
Docente

2. FRONTEND

3. Angular: Construyendo el Futuro de la Web
Los frameworks de JavaScript han revolucionado el
desarrollo web moderno al proporcionar
arquitecturas estructuradas que mejoran la
mantenibilidad y escalabilidad de las aplicaciones.
Según Patel et al. (2020), la adopción de frameworks
basados en componentes ha incrementado la
productividad del desarrollo en un 40% y reducido
significativamente los errores de producción
mediante la implementación de tipado estático y
patrones de diseño establecidos. En el ecosistema
actual, Angular, React y Vue dominan por su
soporte industrial y comunidades activas; no
obstante, difieren en nivel de “baterías incluidas”,
desde la solución integral de Angular hasta
aproximaciones más librería-centradas como React.

4. Tabla comparativa frameworks Javascript
Framework Tipo Renderizado Modelo UI Reactividad Ruteo/Forms Tooling/Ecosistema
Peso JS por
defecto* Casos de uso ideales
Angular
Framework
integral (SPA)
CSR, SSR +
Hydration, SSG,
vistas diferibles
(@defer)
Templates HTML +
Directivas;
componentes
standalone
Signals + RxJS; DI
Router y Forms
nativos
CLI, Material, CDK,
@angular/ssr
Medio–alto
Apps enterprise,
dashboards, equipos
grandes
React Librería UI
CSR; SSR/SSG vía
Next/Remix;
RSC/streaming
JSX + Hooks
(VDOM)
setState/Hooks;
concurrencia
3rd party (react-
router, react-hook-
form)
Vite, Next.js, gran
ecosistema
Medio
Flexibilidad, microfrontends,
ecosistema amplio
Vue
Framework
progresivo
CSR; SSR/SSG vía
Nuxt
SFC
(template/script/sty
le); Composition
API
Proxies
(reactive/ref),
computed
Vue Router oficial;
estado con Pinia Vite, Nuxt, DevTools Medio–bajo
SPAs/SSR, desarrollo veloz y
ergonómico
Astro
Framework de
contenido/SSG
SSG por defecto; SSR
opcional;
Islands/partial
hydration
.astro + integración
React/Vue/Svelte
Delegada (no
runtime propio)
Rutas por archivos;
forms
nativos/acciones
Integrations,
Content Collections,
MDX, imágenes
Muy bajo
Sitios de contenido, docs,
blogs, marketing
Svelte
Framework/
compilador
CSR; SSR/SSG vía
SvelteKit
.svelte (SFC)
Reactividad por
compilación ($:),
stores
En SvelteKit
SvelteKit, Vite,
DevTools
Bajo
Apps pequeñas/medianas,
widgets rápidos
Next.js
Meta framework
‑
(React)
SSR/SSG/ISR; RSC;
Edge/streaming
React (app router,
layouts)
React (hooks,
concurrent)
Router integrado;
Server Actions
Integraciones Vercel
(images, fonts,
analytics)
Medio
Apps full stack, e commerce,
‑ ‑
SaaS
Nuxt
Meta framework
‑
(Vue)
SSR/SSG/ISR; híbrido
(Nitro)
Vue SFC +
composables
Vue (reactive/ref)
Rutas por archivos;
Pinia integrada
Módulos (content,
image), DevTools
Medio
Contenido + apps Vue
full stack
‑
SolidJS Librería UI
CSR/SSR; hydration;
islands con
SolidStart
JSX compilado (sin
VDOM)
Signals finos
(createSignal/memo
/effect)
Solid Router;
SolidStart Vite, DevTools Muy bajo
UIs altamente interactivas y
rápidas
Qwik
Framework
resumible
SSR + resumability;
hydration bajo
demanda; Islands
JSX like (Qwik)
‑ Signals/store Qwik City; acciones
Adaptadores
(Vercel/Cloudflare),
Vite
Muy bajo
LCP crítico, landings,
e commerce
‑

5. Panorama de frameworks JavaScript
Según el estudio de Stack Overflow Developer
Survey (2023), Angular mantiene una posición sólida
en aplicaciones empresariales debido a su
arquitectura opinionada y conjunto completo de
herramientas integradas, con un 20.4% de adopción
entre desarrolladores profesionales. La elección del
framework depende de factores como el tamaño del
equipo, los requisitos del proyecto, la curva de
aprendizaje y el ecosistema de bibliotecas
disponibles, siendo Angular preferido en
organizaciones que valoran la estructura, el tipado
fuerte y el soporte a largo plazo. El legado de Miško
Hevery permanece evidente en la filosofía de
Angular de proporcionar soluciones completas y
opinionadas que reducen la "fatiga de decisión" en
equipos de desarrollo.

6. ¿Por qué Angular?
Angular es un framework de desarrollo web de
código abierto mantenido por Google que
implementa una arquitectura basada en
componentes con TypeScript como lenguaje
principal. Angular se diferencia de otras soluciones
por ser un framework "opinionado" que
proporciona una estructura completa para el
desarrollo, incluyendo sistemas integrados de
routing, gestión de estados, comunicación HTTP y
validación de formularios, lo que reduce la
necesidad de bibliotecas externas y facilita la
estandarización en equipos grandes. Su arquitectura
basada en componentes y la inyección de
dependencias facilitan la modularidad y las
pruebas. (Angular Team, 2024).

7. Arquitectura de Angular (Componentes, DI y Templates)
Componente (Component)
•Es la unidad fundamental de construcción en
Angular.
•Contiene la lógica del negocio y los datos que se
mostrarán en la interfaz.
•Está definido en TypeScript usando el decorador
@Component
@Component({
selector: 'app-usuario',
templateUrl:
'./usuario.component.html'
})
export class UsuarioComponent {
nombre = 'Richard';
}
Plantilla (Template)
•Define la vista (UI) del componente en formato
HTML.
•Utiliza la sintaxis de interpolación {{ }} y directivas
(*ngFor, *ngIf) para vincular datos desde el
componente.
•Representa la capa visual en la arquitectura (MVC).
<h1>Bienvenido, {{
nombre }}</h1>
Metadatos (Metadata)
•Los metadatos son información
adicional que describe cómo debe
comportarse el componente,
directiva o servicio.
•Angular usa estos metadatos para
conectar el componente con su
plantilla y su selector.
•Se definen a través de decoradores
como @Component, @Directive o
@NgModule.
@Component({
selector:
'app-ejemplo',
template:
'<p>Ejemplo de
componente</p>'
})
Directivas (Directive)
•Son instrucciones que
modifican el comportamiento
o la apariencia del DOM.
•Estructurales: cambian la
estructura del DOM (*ngIf,
*ngFor)
•De atributo: cambian el estilo o
el comportamiento de un
elemento ([ngStyle], [ngClass]).
<p
*ngIf="mostrar">Texto
visible si la
condición es
verdadera</p>
Inyector (Injector)
• Es el mecanismo de
inyección de
dependencias
(Dependency Injection, DI)
de Angular.
• Permite que los
componentes reciban
servicios externos (como
APIs, almacenamiento local,
autenticación, etc.) sin tener
que crearlos manualmente.
• El inyector gestiona la
creación, ciclo de vida y
reutilización de los
servicios.
constructor(private
servicioUsuario:
UsuarioService) {}

8. Ejemplo Angular
import { Component } from
'@angular/core';
@Component({
selector: 'app-sumar',
templateUrl:
'./sumar.component.html'
})
export class SumarComponent
{
numero1: number = 0;
numero2: number = 0;
resultado: number = 0;
sumar(): void {
this.resultado =
this.numero1 +
this.numero2;
}
}
1. Componente (sumar.component.ts)
<h2>Calculadora Simple</h2>
<input type="number"
[(ngModel)]="numero1"
placeholder="Número 1">
<input type="number"
[(ngModel)]="numero2"
placeholder="Número 2">
<button
(click)="sumar()">Sumar</button>
<h3>Resultado: {{ resultado }}</h3>
2. Plantilla (sumar.component.html)
2. Plantilla (sumar.component.html)
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-
browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { SumarComponent } from
'./sumar/sumar.component';
@NgModule({
declarations: [AppComponent, SumarComponent],
imports: [BrowserModule, FormsModule],
bootstrap: [AppComponent]
})
export class AppModule { }
3.Módulo principal (app.module.ts)
<app-sumar></app-sumar>
4. Uso en el HTML principal
(app.component.html)

9. NgMODULES: CONTENEDORES ORGANIZACIONALES
Los NgModules son clases decoradas con
@NgModule que definen contextos de
compilación y proporcionan un mecanismo de
encapsulación para organizar componentes,
directivas, pipes y servicios relacionados. Cherny
(2021) explica que el sistema de módulos de
Angular permite la creación de límites
arquitectónicos claros mediante la definición de
qué elementos son públicos (exports) y cuáles
privados (declarations), facilitando la
modularización del código y la implementación
de estrategias de carga diferida que mejoran
significativamente el tiempo de carga inicial de
aplicaciones complejas.
@NgModule({
declarations: [AppComponent,
SumarComponent],
imports: [BrowserModule,
FormsModule],
bootstrap: [AppComponent]
})
export class AppModule { }
@NgModule({
declarations: [], // Componentes,
directivas, pipes
imports: [], // Otros
módulos necesarios
providers: [], // Servicios
disponibles
exports: [], // Elementos
públicos
bootstrap: [] // Componente
raíz (solo AppModule)
})
export class MiModulo { }

10. COMPONENTES: BLOQUES DE CONSTRUCCIÓN
Los componentes constituyen la unidad
fundamental de construcción en Angular,
encapsulando la lógica de presentación, el
template HTML y los estilos en una entidad
cohesiva y reutilizable. De acuerdo con Dayley et
al. (2020), los componentes Angular
implementan el patrón de diseño Model-View-
ViewModel (MVVM), donde la clase TypeScript
actúa como ViewModel gestionando el estado y
la lógica, el template representa la View
declarativa basada en HTML extendido, y el data
binding bidireccional mantiene la sincronización
automática entre ambos.

11. BIBLIOGRAFIA
• Angular Team. (2024). Testing Angular applications. Angular.
https://angular.dev/guide/testing
• Angular Team. (2024). Angular tooling and ESBuild/Vite. Angular. https://angular.dev/tools