TUTORIAL COMPLETO DE ANGULAR PARA DESARROLLADORES WEB
Introducción a Angular para Desarrollo Web
Angular es un framework de código abierto mantenido por Google, diseñado para construir aplicaciones web dinámicas y de una sola página (SPA). Su arquitectura basada en componentes, su robusto sistema de módulos y su integración con TypeScript lo convierten en una opción líder para desarrolladores que buscan crear aplicaciones escalables y mantenibles. Este tutorial, actualizado para 2025, explora los conceptos fundamentales de Angular, desde la configuración inicial hasta la creación de aplicaciones completas, con ejemplos prácticos que ilustran su uso en proyectos reales. Ideal para programadores que desean dominar el desarrollo de aplicaciones web modernas, este artículo cubre instalación, componentes, directivas, servicios, enrutamiento y más.
Para comenzar, Angular requiere un entorno de desarrollo configurado con Node.js y el CLI de Angular. Node.js es esencial para gestionar dependencias y ejecutar scripts, mientras que el CLI simplifica la creación, compilación y despliegue de proyectos. Asegúrate de tener Node.js versión 18 o superior instalado, ya que las versiones más recientes de Angular están optimizadas para estas.
# Verifica la versión de Node.js
node -v
# Verifica la versión de npm
npm -v
Instala el CLI de Angular globalmente ejecutando el siguiente comando:
npm install -g @angular/cli
Una vez instalado, crea un nuevo proyecto con el comando ng new:
ng new mi-proyecto-angular
cd mi-proyecto-angular
ng serve
Este comando genera una estructura de directorios básica y lanza un servidor de desarrollo en http://localhost:4200. La estructura inicial incluye:
mi-proyecto-angular/
├── src/
│ ├── app/
│ │ ├── app.component.ts
│ │ ├── app.module.ts
│ ├── assets/
│ ├── index.html
│ ├── main.ts
├── angular.json
├── package.json
Creación y Uso de Componentes
Los componentes son los bloques fundamentales de una aplicación Angular. Cada componente encapsula una parte de la interfaz de usuario, con su propia lógica y estilos. Un componente se define mediante una clase TypeScript, un archivo HTML para la plantilla y un archivo CSS para los estilos. Para generar un componente, usa el CLI:
ng generate component mi-componente
Esto crea una carpeta mi-componente con los siguientes archivos:
src/app/mi-componente/
├── mi-componente.component.ts
├── mi-componente.component.html
├── mi-componente.component.css
├── mi-componente.component.spec.ts
Edita mi-componente.component.ts para definir la lógica del componente:
import { Component } from "@angular/core";
@Component({
selector: "app-mi-componente",
templateUrl: "./mi-componente.component.html",
styleUrls: ["./mi-componente.component.css"],
})
export class MiComponenteComponent {
mensaje: string = "¡Bienvenido a Angular!";
}
En mi-componente.component.html, vincula la propiedad mensaje a la plantilla:
<h2>{{ mensaje }}</h2>
Incluye el componente en la plantilla principal app.component.html:
<app-mi-componente></app-mi-componente>
Al ejecutar ng serve, verás el mensaje renderizado en la página. Los componentes permiten crear interfaces modulares, facilitando la reutilización y el mantenimiento del código.
Directivas en Angular
Las directivas son instrucciones que modifican el comportamiento o la apariencia del DOM. Angular ofrece tres tipos principales: directivas de componentes, estructurales y de atributos. Las directivas estructurales, como *ngIf y *ngFor, alteran la estructura del DOM, mientras que las directivas de atributos, como ngClass, modifican propiedades de los elementos.
Un ejemplo de *ngIf para mostrar contenido condicionalmente:
<div *ngIf="mostrarMensaje">Este mensaje es condicional.</div>
<button (click)="toggleMensaje()">Alternar</button>
En el archivo TypeScript del componente:
export class AppComponent {
mostrarMensaje: boolean = true;
toggleMensaje() {
this.mostrarMensaje = !this.mostrarMensaje;
}
}
Para iterar sobre una lista con *ngFor:
<ul>
<li *ngFor="let item of items">{{ item }}</li>
</ul>
export class AppComponent {
items: string[] = ["Elemento 1", "Elemento 2", "Elemento 3"];
}
Estas directivas son esenciales para construir interfaces dinámicas que respondan a los datos y las interacciones del usuario.
Servicios y Inyección de Dependencias
Los servicios en Angular encapsulan lógica reutilizable, como la comunicación con APIs o la gestión de datos. La inyección de dependencias permite que los componentes y otros servicios accedan a estas funcionalidades de manera eficiente. Para crear un servicio:
ng generate service datos
Esto genera datos.service.ts:
import { Injectable } from "@angular/core";
@Injectable({
providedIn: "root",
})
export class DatosService {
obtenerDatos(): string[] {
return ["Dato 1", "Dato 2", "Dato 3"];
}
}
Inyecta el servicio en un componente:
import { Component } from "@angular/core";
import { DatosService } from "./datos.service";
@Component({
selector: "app-root",
template: '<ul><li *ngFor="let dato of datos">{{ dato }}</li></ul>',
})
export class AppComponent {
datos: string[];
constructor(private datosService: DatosService) {
this.datos = this.datosService.obtenerDatos();
}
}
Los servicios promueven la separación de preocupaciones, permitiendo que los componentes se centren en la presentación mientras los servicios manejan la lógica de negocio.
Enrutamiento en Angular
El enrutamiento permite navegar entre diferentes vistas en una SPA sin recargar la página. Angular proporciona un módulo de enrutamiento que configura rutas y asocia componentes a URLs. Genera un módulo de enrutamiento:
ng generate module app-routing --flat --module=app
Edita app-routing.module.ts para definir rutas:
import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";
import { InicioComponent } from "./inicio/inicio.component";
import { AcercaComponent } from "./acerca/acerca.component";
const routes: Routes = [
{ path: "", component: InicioComponent },
{ path: "acerca", component: AcercaComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule {}
Crea los componentes InicioComponent y AcercaComponent:
ng generate component inicio
ng generate component acerca
Agrega un enlace de navegación en app.component.html:
<nav>
<a routerLink="/">Inicio</a>
<a routerLink="/acerca">Acerca</a>
</nav>
<router-outlet></router-outlet>
El elemento <router-outlet> renderiza el componente correspondiente a la ruta activa. Este enfoque facilita la navegación fluida en SPA y mejora la experiencia del usuario.
Comunicación con APIs
Las aplicaciones modernas a menudo consumen datos de APIs REST. Angular utiliza el módulo HttpClient para realizar solicitudes HTTP. Configura HttpClientModule en app.module.ts:
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { HttpClientModule } from "@angular/common/http";
import { AppComponent } from "./app.component";
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, HttpClientModule],
bootstrap: [AppComponent],
})
export class AppModule {}
Crea un servicio para manejar solicitudes HTTP:
ng generate service api
Edita api.service.ts:
import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Observable } from "rxjs";
@Injectable({
providedIn: "root",
})
export class ApiService {
private url = "https://jsonplaceholder.typicode.com/posts";
constructor(private http: HttpClient) {}
obtenerPosts(): Observable<any[]> {
return this.http.get<any[]>(this.url);
}
}
Usa el servicio en un componente:
import { Component, OnInit } from "@angular/core";
import { ApiService } from "./api.service";
@Component({
selector: "app-root",
template: '<ul><li *ngFor="let post of posts">{{ post.title }}</li></ul>',
})
export class AppComponent implements OnInit {
posts: any[] = [];
constructor(private apiService: ApiService) {}
ngOnInit() {
this.apiService.obtenerPosts().subscribe((data) => {
this.posts = data;
});
}
}
Este código recupera una lista de publicaciones de una API pública y las muestra en la interfaz, demostrando cómo Angular maneja datos asíncronos.
Formularios en Angular
Angular ofrece dos enfoques para manejar formularios: reactivos y basados en plantillas. Los formularios reactivos son más escalables y fáciles de testar. Configura ReactiveFormsModule en app.module.ts:
import { ReactiveFormsModule } from "@angular/forms";
@NgModule({
imports: [BrowserModule, ReactiveFormsModule],
// ...
})
export class AppModule {}
Crea un formulario reactivo en un componente:
import { Component } from "@angular/core";
import { FormGroup, FormControl, Validators } from "@angular/forms";
@Component({
selector: "app-formulario",
template: `
<form [formGroup]="formulario" (ngSubmit)="enviar()">
<input formControlName="nombre" placeholder="Nombre" />
<div
*ngIf="
formulario.get('nombre')?.invalid &&
formulario.get('nombre')?.touched
"
>
El nombre es requerido.
</div>
<button type="submit" [disabled]="formulario.invalid">
Enviar
</button>
</form>
`,
})
export class FormularioComponent {
formulario = new FormGroup({
nombre: new FormControl("", Validators.required),
});
enviar() {
console.log(this.formulario.value);
}
}
Este formulario valida que el campo nombre no esté vacío antes de enviar los datos, mostrando un mensaje de error si es necesario. Los formularios reactivos son ideales para gestionar formularios complejos en aplicaciones empresariales.
Gestión de Estado con RxJS
La gestión de estado es crucial en aplicaciones complejas. Angular utiliza RxJS para manejar flujos de datos asíncronos. Un BehaviorSubject puede actuar como un almacén de estado simple:
import { Injectable } from "@angular/core";
import { BehaviorSubject } from "rxjs";
@Injectable({
providedIn: "root",
})
export class EstadoService {
private contador = new BehaviorSubject<number>(0);
contador$ = this.contador.asObservable();
incrementar() {
this.contador.next(this.contador.value + 1);
}
}
Usa el servicio en un componente:
import { Component } from "@angular/core";
import { EstadoService } from "./estado.service";
@Component({
selector: "app-contador",
template: `
<p>Contador: {{ contador }}</p>
<button (click)="incrementar()">Incrementar</button>
`,
})
export class ContadorComponent {
contador: number = 0;
constructor(private estadoService: EstadoService) {
this.estadoService.contador$.subscribe((valor) => {
this.contador = valor;
});
}
incrementar() {
this.estadoService.incrementar();
}
}
Este ejemplo demuestra cómo RxJS facilita la gestión de estado reactiva, permitiendo que los componentes respondan automáticamente a cambios en los datos.
Optimización y Despliegue
Para optimizar una aplicación Angular, usa la compilación en modo producción:
ng build --prod
Esto genera archivos optimizados en la carpeta dist/. Para desplegar, sube estos archivos a un servidor estático como Firebase, Netlify o GitHub Pages. Por ejemplo, con Firebase:
npm install -g firebase-tools
firebase init
firebase deploy
Asegúrate de configurar el archivo firebase.json correctamente:
{
"hosting": {
"public": "dist/mi-proyecto-angular",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"rewrites": [{ "source": "**", "destination": "/index.html" }]
}
}
La optimización incluye técnicas como lazy loading para cargar módulos bajo demanda, reduciendo el tiempo de carga inicial.
const routes: Routes = [
{
path: "lazy",
loadChildren: () =>
import("./lazy/lazy.module").then((m) => m.LazyModule),
},
];
Conclusiones
Angular sigue siendo un pilar en el desarrollo de aplicaciones web en 2025, gracias a su arquitectura robusta y su comunidad activa. Este tutorial ha cubierto los fundamentos, desde la configuración inicial hasta la gestión de estado y el despliegue, proporcionando ejemplos prácticos para cada concepto. Al dominar componentes, directivas, servicios, enrutamiento, formularios y RxJS, los desarrolladores pueden construir aplicaciones escalables y eficientes. Continúa explorando Angular mediante proyectos reales para consolidar tus habilidades y mantenerte actualizado con las últimas características del framework.
