Repaso de conceptos básicos de Angular para desarrollar aplicaciones web interactivas.
Angular es un framework JavaScript para desarrollar aplicaciones web dinámicas y interactivas. En este artículo veremos rápidamete los conceptos básicos para aprender cómo funciona. Si tienes experiencia con otros frameworks verás rápidamente las diferencias y similitudes con Angular.
La aplicación se puede dividir en componentes. Cada componente consiste en:
<app-ejemplo>
).import { Component } from '@angular/core';
@Component({ selector: 'app-ejemplo', template: ` <div> <h1>{{ title }}</h1> </div> `, styles: ['h1 { color: gray; }']})
export class AppComponent { title = 'Hola mundo!';}
Data binding es el concepto de sincronizar la página con el estado de la aplicación. Es decir, consiste en aplicar el valor de un objeto o variable a la pantalla y, en sentido opuesto, trasladar los cambios realizados en la pantalla al estado de la aplicación cuando se interactúa con ella. Hay varios tipos:
<h1>{{ title }}</h1>
.(event)="handleClick()"
.<input [value]="login"> {{login}}
.<input [(ngModel)]="nombre"><p>{{ nombre }}</p>
.Las directivas en Angular es u concepto que permite extennder los elementos HTML con comportamientos personalizables. Son instrucciones en forma de elementos, atributos o classes CSS que Angular interpreta y usa para manipular el DOM (Document Object Model).
Se pueden clasificar en distintos tipos:
Modifica el DOM para añadir o eliminar elementos:
<div *ngIf="isVisible">El texto es visible</div><ul> <li *ngFor="let elemet of elements">{{ element }}</li></ul>
Son directivas que se añaden como propiedad de un elemento del DOM:
<div [ngClass]="{main: true}" [ngStyle]="{color: 'blue'}">
Los formularios en Angular permiten manejar datos del usuario mediante plantillas dirigidas (Template-Driven Forms) o formularios reactivos (Reactive Forms). Los formularios reactivos son especialmente útiles porque permiten un control completo sobre la validación y la gestión de datos.
import { Component } from '@angular/core';import { FormGroup, FormControl, Validators } from '@angular/forms';
@Component({ selector: 'app-login', template: ` <form [formGroup]="loginForm" (ngSubmit)="onSubmit()"> <label for="email">Email:</label> <input id="email" formControlName="email"> <div *ngIf="loginForm.get('email')?.invalid && loginForm.get('email')?.touched"> Email no válido. </div>
<label for="password">Password:</label> <input id="password" type="password" formControlName="password"> <div *ngIf="loginForm.get('password')?.invalid && loginForm.get('password')?.touched"> La contraseña es requerida. </div>
<button type="submit" [disabled]="loginForm.invalid">Iniciar sesión</button> </form> `})
export class LoginComponent { loginForm = new FormGroup({ email: new FormControl('', [Validators.required, Validators.email]), password: new FormControl('', Validators.required), });
onSubmit() { console.log(this.loginForm.value); }}
Las Pipes en Angular transforman los datos antes de que se muestren en la vista. Angular incluye pipes integrados como date
, uppercase
o currency
. También puedes crear pipes personalizados.
Ejemplo de directiva que transforma un texto modificando la primera letra a mayúscula.
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'capitalize'})export class CapitalizePipe implements PipeTransform { transform(value: string): string { return value.charAt(0).toUpperCase() + value.slice(1).toLowerCase(); }}
// Uso en el componente:@Component({ selector: 'app-example', template: `<p>{{ 'angular me encanta!' | capitalize }}</p>`})export class ExampleComponent {}
Salida: Angular me encanta!
.
Los servicios en Angular son ideales para gestionar la lógica de negocio y compartir datos entre componentes. La inyección de dependencias permite que Angular gestione la creación y entrega de estos servicios donde se necesiten.
import { Injectable } from '@angular/core';
@Injectable({ providedIn: 'root'})export class DataService { private data: string[] = [];
addItem(item: string) { this.data.push(item); }
getItems() { return this.data; }}
// Uso del servicio en un componente:@Component({ selector: 'app-list', template: ` <button (click)="addItem()">Agregar item</button> <ul> <li *ngFor="let item of items">{{ item }}</li> </ul> `})export class ListComponent { items: string[] = [];
constructor(private dataService: DataService) {}
addItem() { this.dataService.addItem('Nuevo item'); this.items = this.dataService.getItems(); }}
El módulo de rutas en Angular permite navegar entre componentes mediante URLs. Puedes definir rutas en el archivo app-routing.module.ts
.
import { NgModule } from '@angular/core';import { RouterModule, Routes } from '@angular/router';import { HomeComponent } from './home/home.component';import { AboutComponent } from './about/about.component';
const routes: Routes = [ { path: '', component: HomeComponent }, { path: 'about', component: AboutComponent }];
@NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule]})export class AppRoutingModule {}
// Uso en un componente:@Component({ selector: 'app-nav', template: ` <nav> <a routerLink="/">Inicio</a> <a routerLink="/about">Acerca de</a> </nav> <router-outlet></router-outlet> `})export class NavComponent {}
Los módulos organizan y agrupan funcionalidad relacionada. Cada aplicación Angular tiene al menos un módulo raíz (AppModule), pero puedes crear módulos adicionales para dividir la aplicación en partes más gestionables.
import { NgModule } from '@angular/core';import { CommonModule } from '@angular/common';import { FormsModule } from '@angular/forms';import { CapitalizePipe } from './capitalize.pipe';
@NgModule({ declarations: [CapitalizePipe], imports: [CommonModule], exports: [CapitalizePipe, CommonModule, FormsModule]})export class SharedModule {}
// Uso en otro módulo:import { SharedModule } from './shared/shared.module';
@NgModule({ imports: [SharedModule]})export class FeatureModule {}
Esta ha sido una guía muy breve y a grandes rasgos de algunos de los conceptos básicos de Angular. Si te ha parecido interesante te propongo que sigas este tutorial interactivo para afianzar y ampliar los conocimientos que hemos expuesto.